タイトルロゴは大事と言われたから・・・ロゴ画像を作ってみたよ！ | kira-ismというエントリを書きながらブログのデザイン、特にフォントについて考えていました。
第7回東京ブロガーミートアップの時の@asuka_xpのプレゼン(詳細はブログデザインは信頼とインパクト、「第7回東京ブロガーミートアップ」は新しい発見の嵐に！ | め～んずスタジオ)でフォントの重要性を説かれたところでもあり、「このフォント、なんとかならないのかな・・・」の思いも強くなっていたのです。
以前から思っていたことだし、そもそもこのテーマ(mixedmediared)を使い始めた時から思っていたことです。
でもその時はWordPressを動かすのが精一杯で、そこまで調べようにも手が回らなかったというのが正直なところ。
このmixedmediaredは英語圏の野良テーマです。だからそもそも日本語用のフォント設定もされていなかったんですね。
ということにようやく気がつくと同時に気分的にも高まっていたところなので、フォントを全面的に見なおして改修しました。
ようやくだいぶ改善されたのでその作業ログ的なものを公開してみたり。
Sponsored Link
本文部分の改修結果
まずは本文部分のテキストの改修前と改修後の比較を
改修前
改修後
素晴らしいとは言えないまでも、なんとか及第点かなぁという感じにはなりました。
テーマの導入時にやっていたこと
フォントに関しては、唯一フォントサイズの変更だけしていました。
テーマのオリジナルのフォントサイズは、本文が12px、サイドバーが11pxでしたが、あまりにも小さいので、導入と同時にそれぞれ14px,13pxにしていました。
アルファベットは文字の作りが日本語よりも簡素なので、フォントが小さくても平気なんですね。また、読みやすいかどうかは別にして、フォントサイズは小さいほうがかっこよく見える気もします(僕だけ？)。
今回の改修でフォントについてやったこと
今回はブログ全体のフォントについて全面的に改修しましたが、以下は本文部分に対してやったことのみまとめます
フォントサイズの変更
オリジナルのテーマのイメージをなるべく損ねないようにとフォントサイズを小さめにしていましたが、やはり小さすぎたようです。
・line-height を 1.4 に(オリジナルは17px)
・font-size を 16px に(オリジナルは12px)
実は最近までline-heightはpixelで指定しない、ということを知りませんでした。
確かにこのように指定したほうが扱いやすい(調整しやすい)と感じました。
フォントファミリーの変更
これが今回の主要な改修です。
日本語のフォントが入っていなかったので・・・見た目が悪かったのも当然ですね。
・改修前
font:12px Verdana, Arial, Helvetica, sans-serif;
・改修後
font-family:Helvetica,Arial,'ヒラギノ角ゴ Pro W3','メイリオ','ＭＳ Ｐゴシック',sans-serif;
どんなフォントファミリーの指定にしようかというのが最も悩んだ(それが分からなかったので、今まで手を打てなかった面もあります)ことですが、調べてみると代表的なパターンは上記を含め2，3種類しか使われていないようです。
そのうちの2種類の組み合わせを比較してこの指定の仕方を選んだのですが、正直いってどっちも同じに見えました・・・。
フォントの変更なんて実は簡単だった
Firebugなどを使えば現状のフォントがどこでどう指定されているのかなどは簡単にわかりますね(自分の場合は、このテーマを使い出した時にはFirebugの使い方を知らなかったのです・・・)。
そして、どのように変更するとどのように表示が変わるかなども簡単にわかります。
人の真似というと聞こえが悪いですが、一般的な指定の仕方だって、今は公開情報がかなり多くなっていると思います。
実はエントリのタイトルのフォントがまだ納得がいかないので、これも後ほど改修しようと思います。
ということで、簡単にできて効果も大きいフォントいじり、フォントに不満のある方はチャレンジしてはいかがでしょうか。
参考リンク
第7回目の東京ブロガーミートアップのテーマはブログのデザインについて！ビジュアルだけじゃないんだよ、デザインは！ #tbmu | kira-ism
Sponsored Link
