stylishのusercssで見栄え良く

ホームページを見ていると、文字の大きさが大きすぎたり小さすぎたり

行間が狭すぎて文字が重なっていたりと見辛くて困る場合があります、パソコンのモニターやブラウザーの環境が十人十色なのでどのデザインがダメとは一概に言えませんが、逆に言うと自分の好みや環境に合わないものは全てダメとも言えます、自分の管理するサイトなら自分好みに調整できますが、レンタルブログの環境によっては自由に編集ができない場合もあります。

自分好みにデザインを変更しろとワガママをホームページの管理人に言っても建設的じゃないので、自分でなんとかするって発想で生まれたのが、Firefoxのアドオンstylishです、最近では色んなブラウザーがusercssに対応してきていますが、以下Firefoxが前提の話になります。

明朝体で行間が不適切

ゴシック体で行間も適切に

例として、左の画像はうちのブログの下の方に配置しているカテゴリークラウドです、フォントが明朝体（serif）で行間が不適切なので文字が重なっているので見辛いです。

初歩的なカスタマイズの手順なのですが、CSSをいじれば少しの手順で右の画像のように、見やすく表示するようにできます。

stylishの準備をする

有名なアドオンなので説明の必要はないと思います、上記に書いた悩みがあるかぎり、ずっとお世話になるアドオンで、入れておいて損はないかと思います。

下記リンクよりインストールします。

https://addons.mozilla.org/ja/firefox/addon/2108/

ユーザーＣＳＳを書く

インストールが終わるとFirefoxを再起動、するとステータスバーにStylishのアイコンが出ていると思いますのでクリックして（無い場合はアドオンのメニューから）、新しいスタイルを書く→白紙のスタイルを選びます。

すると下のような画面が立ち上がりますので、名前の欄に自分がわかる名前を入れ（今回はsans-serif）本文の欄に下記のコードを入力して保存。

*{
font-family :sans-serif !important;
line-height : 1.3 !important;
}

説明とポイント

font-family :sans-serif !important;
line-height : 1.3 !important;

CSSの部分は調べたらすぐわかると思いますが、行間調整のline-heightの部分にミソがありまして、行間の後にpxやemなど単位を入れて指定するんですが、firefoxの場合は指定しなければ文字の大きさを自動的に判断をしてくれます、無指定のメリットは、サンプルに上げたようなカテゴリークラウドのように1行の間に文字の大きさがバラバラに混在する場合に1.3と指定すると適切に1.3文字分の行間に調整してくれます。

こんな手順を踏まなくてもブラウザのフォントの設定で、明朝体の所にゴシック体のフォントを指定をしてｗｅｂフォントが指定したフォントを優先するのチェックを外せば明朝体を見ないで済みます。

じゃあＣＳＳに行間だけ指定すればいいじゃまいかって話ですが、ＣＳＳで指定すると有効無効が簡単に切り替えられるメリットがあります。

Stylishを使ったUsercssは色々面白いものがあるので、今後紹介していきます。