ちょこっとカスタマイズ-フォント2013年01月04日 20:01

アサブロさんで用意しているデザインは結構気に入ったものがいくつかあるのだけれど、表示がちと見辛いなぁと思い、ブラウザの設定を変えて見たけれど変わらない。。。
で、『ちょこっとCSS編集』やってみました。


●表示フォントを変えてみる
『font-family』を検索してみると、3箇所見つかり、1箇所目は、
font-family: "ヒラギノ角ゴ ProN W6", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "Osaka", Verdana, arial, sans-serif;
と書かれてました。
WindowsはMS Pゴシックで表示されていたので、先頭からPC内にあるフォントが使われるのかと思いきや、Macはヒラギノ角ゴ ProN W6があるにも拘らず、ヒラギノ角ゴ Pro W3の表示になっていました。

とりあえず、メイリオを入れてWindowsで確認して見ると、、、
(i) 後ろに入れるパターン ・・・ "MS Pゴシック", "メイリオ", ・・・
 → MS Pゴシックで表示される
(ii) 前に入れるパターン ・・・ "メイリオ", "MS Pゴシック", ・・・
 → メイリオで表示される

というわけで、Windowsは、"MS Pゴシック"の手前に、表示させたいフォントを追加してめでたく変更されました。
・・・で、Macは?・・・ヒラギノ角ゴ Pro W3で満足してやってません(笑)


●行間を変えてみる
『line-height』を検索すると、あちらこちらにあるので、変えたいところだけ値を変更してみる。単位なしなので、使われるフォントの何倍の行間にするのかという設定なので、『1』以上にすれば重ならないと思われるが、あまり詰め過ぎると、使われるフォントによって読みづらくなるので、今回は、『1.7』→『1.4』くらいで様子を見ることにしました。


●フォントの色を変えてみる
『color』を検索して変えたいフォントの色が記述されているところを探します。
Color-Hexなどで変えたい色を検索し、値を書換え、保存して、確認するわけですが、いまひとつな色バランスだと、違う色に変えたくなりますよね。
しかし、、、CSS編集画面で『保存』ボタンを押すと編集画面が閉じられてしまいます。
もう一度、編集画面開いて、編集していた場所を探し、値を書換え、保存して、、、これ、結構めんどーです。



関連記事 -------------------------

ちょこっとカスタマイズ-ファビコン
アサブロのエディタ画面でhtmlの編集をしてみる