WordPressのテーマを日本語でも見栄えをよくする

WordPressコミュニティには素晴らしいテーマがたくさんあるのですが、ほとんど全てが欧文のブログを想定しています。気に入っても、いざ導入してみると「あれっ？」と思うこともすくなくないと思います。和文だと見栄えがよくないのが多いんですよね。

そこで、日本語でも見栄えをよくする為のポイントを書いてみます。

スタイル・シートにて、以下の３つに注目するのが良いかと。括弧内はCSS。

• フォントの種類（font-family）
• 文字の大きさ（font-size）
• 行間（line-height）

フォントの種類（font-family）

フォントは大まかに幾つかの種類に分けられることができますが、WordPressのテーマでよく使われているのはserif（セリフ）とsans-serif（サンズ・セリフ）です。セリフとは文字についている飾りの線、と言うか出っ張りみたいなのです。それがあるのはserif（セリフ）、無いのがsans-serif（サンズ・セリフ）。

よく指定されるsans-serif（サンズ・セリフ）はVerdana、Arial、Helvetica辺りかと思います。ブログのテキストによく設定されてある13px前後のフォント・サイズでは、日本語でもあまり見栄えには問題ないと思います。ダウンロードしてきたテーマのスクリーンショットやデモとそれほど見栄えに違いが無い場合は、大体これらのフォントが指定されていると思います。ただし、ここ１年くらいよく目にするTrebuchet MSは、英語・日本語に関係なく、アンチエイリアスがかかっていない環境（ディフォルト状態のウィンドウズがそう）では極端に見栄えが悪くなるので注意。

逆に、見栄えが全然違うと感じるのが多いのはserif（セリフ）系のフォント。Times、Georgia、Century等がそうです。

文字の大きさ（font-size）

同じフォント・サイズであれば、和文の方が欧文よりも少し大きく見えます。サイズ的には同じなのですが、和文はサイズいっぱいのスペースを使用するからです。

行間（line-height）

これは見栄えと同時に、可読性に影響します。基本的に欧文よりも和文の方が行間を多く必要とします。CSSのline-heightとは、厳密に言うと行間ではなく行の高さです。欧文だとline-heightが１．３から１．４くらいでも問題ないのですが、和文だとこれは窮屈に見えてしまい、可読性が落ちてしまいます。フォントのサイズにもよりますが、大体１．５は欲しいところです。

まとめ

じゃあ具体的に何をどうすればよいかと言う事ですが、見栄えが悪ければまずはフォントの種類を確認してください。サンズ・セリフならば、他のサンズ・セリフに。セリフならば他のセリフ、もしくはサンズ・セリフも試してみる。場合によっては和文フォントを指定するのも良いと思います。サンズ・セリフならばゴシック体、セリフならば明朝体。特にセリフで見栄えは悪いけど、でもセリフを使いたい場合は明朝体にすると良いかもしれません。また、１３ｐｘくらいでは良くても、大き目のサイズを指定している箇所も和文フォントを試してみるのも良い。

次に文字の大きさと行間です。窮屈だなぁと感じたら、font-sizeを１段下げてline-heightはそのままに、もしくはfont-sizeをそのままにline-heightを１段上げてみると良い。テーマによっては、記事本文とその他の部分（サイドバーなど）を個別に指定すると良いと思います。リストが多いサイドバーでは気にならないが、記事本文は窮屈に感じるということもあるはずです。

見栄えに関する問題は必ずしもこの３つと言うわけではありませんが、海外のテーマを使用する場合はタイポグラフィに注目してみると良いと思います。

タイポグラフィの勉強になるサイト：

• Hints of fonts on the web — Introduction
• 和文フォント大図鑑 [Study]