css 特定のセレクタ以外に適用させる方法

ブラウザでの閲覧において、すべてのフォントを○○にしたいと云う場合がある。この場合、通常は以下のように記述すれば、すべてのセレクタに関して指定したフォントが有効になる。

* {
    font-family: ○○ !important;
}

しかしながら、これでは問題が生じる場合がある。それは、フォントによる絵文字を使用しているページである。このようなページでは、絵文字が所謂 ”豆腐” □ になってしまうのである。このような問題を回避するためには、絵文字フォントのセレクタでは、フォントの指定が無効になるように制御する必要がある。

:not(.icon):not(.icon_font):not(i) {
  font-family: ○○ !important;
}

上記の場合は、クラス名 [icon] , [icon_font] と セレクタ [i] が、 [font-family ...] 適用外となる。

クラス名に [icon] 文字列を含む場合すべてなら :not([class*="icon"]) としてもよい。

どのセレクタが使用されているか?は、ブラウザの ”要素の調査” を利用すれば簡単に調べることができる。 ↓ Firefoxでの事例。

58_001.png

このように対応すれば、自分の好みにあったフォントですべてのページの閲覧が可能となるワケである。

admin
カテゴリ:ブラウザ
タグ:CSS フォント
2017/01/12 17:44 | Comment(0)

LinuxでFirefoxを使用する場合のカスタマイズはコレだ

Linux Mint 18.1 - Cinnamon + Firefox において、Windowsでは問題がなかった様々な問題に対して対応したので、以下にまとめてみた。

07_001.png

タイトルバーが邪魔なので削除する

Chromeではタイトルバーの表示は、ユーザー側でon/offできる。しかしながら、Firefoxではユーザー側では制御できない。これに対処するためには、アドンを導入する。

タイトルバーを非表示にするFirefoxアドオン「Hide Caption Titlebar Plus」: Jkun Blog

このアドオンを導入すれば、タイトルバーの削除、タブバー、ツールバーのレイアウト変更が可能になる。表示領域を大きく取りたい場合には有用だ。

22_001.png

12_001.png

ブックマークバーが大きすぎなので調整する

ブックマークバーの領域を調整して、少しでも表示領域を大きくする。

ブックマークバーのレイアウトを調整するFirefoxアドオン「Thin Bookmarks」: Jkun Blog

22_001.png

ホイールスクロール速度が遅いので調整する

Windowsでは問題なかったが、Linux Mint 18.1 - Cinnamon では、ホイールスクロール速度が遅いので調整する。

Firefoxのホイールスクロール速度を調整: Jkun Blog

その他ユーザースタイルシートで調整

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* Firefox全般のフォント指定 (Linux + Windows) */
* {
  font-family: "Ubuntu Mono", Ubuntu, Consolas, Meiryo, メイリオ !important;
}

/* ブックマークバーのフォルダ下アイテムの行間・文字色・文字サイズ */
.bookmark-item {
  margin-bottom: -4px !important;
  color: #222 !important;
  font-size: 14px !important;
}

/* アクティブタブの背景色 */
.tabbrowser-tab [selected] {
  background-color: yellowgreen !important;
}

Stylish :: Add-ons for Firefox などを利用してユーザースタイルシートを設定する。

ノートパソコンを利用するユーザーが多い中、無駄な領域は極力削除したいのは誰しも同じであろう。

admin
カテゴリ:ブラウザ
2017/01/12 12:14 | Comment(0)

直感的にUser-Agentを偽装できるFirefoxアドオン「User-Agent Switcher」

ツールバーから出現したパネル上のアイコンを選択するだけで、User-Agentを偽装できるFirefoxアドオンの紹介。

User-Agent Switcher :: Add-ons for Firefox

2017011120:45:29_001.png

アイコンを選択するだけなので、直感的に扱えるのがGood!である。デフォルトに戻すのも、左下のチェックのアイコンをクリックするだけ。とにかく、すべてが直感的に操作できる。

Linux Mint 18.1 - Cinnamon + Firefox の環境で、GYAO!が閲覧できなかったので、対応してみた次第である。

admin
タグ:Firefox
2017/01/11 20:57 | Comment(0)

Gmailを開かずに即操作が可能なFirefoxアドオン「Gmail panel」

名前のとおり、ツールバーのアイコンをクリックすると、Gmailの画面がパネルとして出現して、Webアクセスと同様の操作が行えるアドオンである。

Gmail panel :: Add-ons for Firefox

ツールバーのアイコンをクリックすれば、即画面が出現する。待たされることは一切なし。

2017011119:20:14_001.png

↓ オプション画面では、レイアウトや呼び出しキーの設定、新着通知方法など、強力なカスタマイズが用意されている。

2017011119:19:40_001.png

裏でアクセスしているので、見た目の待ち時間はなし。軽快そのものである。

admin
2017/01/11 19:44 | Comment(0)

ブックマークバーのレイアウトを調整するFirefoxアドオン「Thin Bookmarks」

Linux Mint 18.1 - Cinnamon で Firefoxを使用していると、レイアウトがイマイチである。筆者はノートパソコンなので、レイアウト上の無駄な領域はなるべく省きたい。そこで利用しているのが、タイトルバーを非表示にするFirefoxアドオン「Hide Caption Titlebar Plus」: Jkun Blog であるが、このアドオンを使用してもブックマークバーの無駄な領域は省けない。そこで今回導入したのが・・・

Thin Bookmarks :: Add-ons for Firefox

である。

↓ 導入前、上下に無駄な領域がある。

2017011116:39:54_001.png

↓ 導入後、上下の無駄な領域がなくなっている。 (↑ と同一領域のスクリーンショット。)

2017011116:40:36_001.png

↓ 今回の設定は以下のとおり。

2017011117:02:36_001.png

自分でスタイルシートを書くには、調査にかなりの時間を要するので、このアドオンは有用である。

追記:ブックマークバーのフォルダから階層構造を下がると・・・ ↓ 行間がかなり空いている!

2017011117:23:31_001.png

これを、Stylish :: Add-ons for Firefox で調整すれば・・・ ↓ のようになる。

2017011117:22:55_001.png

cssは ↓ のとおりである。

.bookmark-item {
  margin-bottom: -6px !important;
}

好みに応じてcssを書けばよい。

admin
タグ:Firefox
2017/01/11 17:03 | Comment(0)