WordPress テーマの日本語テキスト周りを設定しました。
HTML5 に対応した WordPress テーマ、FreeDream を利用していますが、アルファベット圏が前提に組まれたテーマですから、どうしても日本語周りがきちゃなくなります。 デザインのカナメ *1 はタイポグラフィ、日本語周りを中心に整えました。WordPress に限らず、すべての Web サイト/ブログで使える、基本的な事項です。
font-family の設定
[css]body { font-family: Candara, 'Segoe UI', Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'メイリオ', Meiryo, sans-serif; / 和欧混植。/ }[/css] まずは、font-family の設定です。 欧文フォント → 和文フォントの順に設定しますと、アルファベットは欧文フォント、日本語は和文フォントで表示されます。欧文と和文の間に “違和感” が生じて好きです。 *2 ただ、「‘ ’（シングルクォーテーション）」「“ ”（ダブルクォーテーション）」や「…（三点リーダー）」なども欧文フォントになります。 *3参考：CSSを利用したWebでの欧文書体と和文書体の混植。あるいはWindows Vista, 7 の新フォント。 :: キミガタメ「ハ」
Vista 以降の新しいフォントなど OpenType の属性を持ったフォントを欧文フォントに指定しますと、Firefox では正しくカーニングやリガチャされますのでおすすめ。Candara が好きです。 *4
和文フォントには「ヒラギノ」と「メイリオ」を指定します。欧文フォントはともかく、和文フォントは必ず指定しましょう。sans-serif としか指定しませんと、「ＭＳＰゴシック」で表示されてしまいますから。汚い。 *5
[css]pre { font: normal 11px Consolas, "Courier New", Courier, monospace; }[/css] モノスペースのフォントも指定します。 Consolas が読みやすい。和文フォントはなんでもいいです。マトモなフォント、OS にプリインストールされていませんから。 *6
文字揃え、両端揃え。
[css]body { text-align: justify; / 文字列を両端揃えに。Firefox 用 / text-justify: inter-ideograph; / IE 用。 / }[/css] テキストを両端揃えにします。重要。右端のラインがそろい、綺麗になります。紙の本では当たり前の設定です。でも、Firefox と IE しか対応していません（IE は独自プロパティで対応。）。 *7[css].widget_tag_cloud a { white-space: nowrap; }[/css] text-align と関係して。 単語の途中で折り返さないようにします。 タグクラウドなどで有効。本文に使うと見苦しくなります。
行間の調整
[css]p { line-height: 1.75; / 行間調整。 / margin: 1.75em 0; / 段落間も行間に合わせる。/ }[/css] 行間の調整です。 line-height は文字と行間を含んだ値。 “ぐっと” 開けた方が読みやすいです。紙で一般的な二分アキ（line-height: 1.5）では狭く感じます。 *8 全角アキ（line-height: 2）では広すぎる感じもしますが、狭いよりはずっと読みやすいです。 line-height: 1.8 あたりが無難できれいな数値でしょう。計算しやすいよう、二分四分アキ（line-height: 1.75）に設定しています。 また、段落間 margin は line-height と同じ値を取りますと、きっちりそろって綺麗になります。あるいは margin-top を 0 にして、margin-bottom に line-height の２倍の値を与えます。リンク周り
[css]a { text-decoration: none; }a:hover { position:relative; top: 1px; }[/css]
日本語組版とは関係なくなってきましたが、テキスト周りの設定です。 野暮ったい、a の下線を消去します。 また、マウスホバーで下に 1px 移動。left: 1px; を指定しますと右に動きます。 動くリンクを選択するかはともかく、a:hover に適当なデザインを設定しておきませんと、リンクの存在に気づきにくいですので、何かしら目に見えるようにしましょう。 1px 動くリンクは、昔からの趣味です。 *9
字間調整
[css]#logo h1 { letter-spacing: 20px; }[/css] 字間調整。タイトル文字を広く設定。また、-1 px など負の値を指定すれば、逆に詰め詰めにできます。Helvetica Bold などと組み合わせるとごつごつして好き。趣味。題字などは、FLAutoKerning を利用して詰めると綺麗になります。要素を削って使用しています。 参考：jquery.FLAutoKerning.js を使い、HTML でも文字詰めしました。 « タメハ（仮）
先ほども述べたように、Firefox と OpenType 要素を持つフォント利用すればきっちりカーニングしてくれます。綺麗です。
Google Web Fonts アクセントに。Krankyを利用しています。
特殊文字、スペーシング。
[code] [/code] non-breaking space。WordPress でむりやり複数改行するときに便利。[code] [/code] hair space。細いスペース。タイトルの半角文字と全角文字のすきま。 スペースには他にもいろいろあります。IME か AutoHotkey あたりに覚えさせておきますと便利です。 *10
[code]&[/code] & のこと。 HTML 文字セットを参考に。
他にもいろいろ細かく設定しましたが、ほんとに大切なのはこのあたり。もっと詳しく知りたければ、
などを参考に。