WordPress テーマの日本語テキスト周りを設定しました。

Tweet

Pocket

　HTML5 に対応した WordPress テーマ、FreeDream を利用していますが、アルファベット圏が前提に組まれたテーマですから、どうしても日本語周りがきちゃなくなります。
　デザインのカナメ1 はタイポグラフィ、日本語周りを中心に整えました。WordPress に限らず、すべての Web サイト/ブログで使える、基本的な事項です。

font-family の設定

body {
	font-family: Candara, 'Segoe UI', Verdana, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'メイリオ', Meiryo, sans-serif; /* 和欧混植。*/
}

　まずは、font-family の設定です。
　欧文フォント → 和文フォントの順に設定しますと、アルファベットは欧文フォント、日本語は和文フォントで表示されます。欧文と和文の間に “違和感” が生じて好きです。2
　ただ、「‘　’（シングルクォーテーション）」「“　”（ダブルクォーテーション）」や「…（三点リーダー）」なども欧文フォントになります。3

参考：CSSを利用したWebでの欧文書体と和文書体の混植。あるいはWindows Vista, 7 の新フォント。 :: キミガタメ「ハ」

　Vista 以降の新しいフォントなど OpenType の属性を持ったフォントを欧文フォントに指定しますと、Firefox では正しくカーニングやリガチャされますのでおすすめ。Candara が好きです。4

　和文フォントには「ヒラギノ」と「メイリオ」を指定します。欧文フォントはともかく、和文フォントは必ず指定しましょう。sans-serif としか指定しませんと、「ＭＳＰゴシック」で表示されてしまいますから。汚い。5

pre {
	font: normal 11px Consolas, "Courier New", Courier, monospace;
}

　モノスペースのフォントも指定します。
　Consolas が読みやすい。和文フォントはなんでもいいです。マトモなフォント、OS にプリインストールされていませんから。6

文字揃え、両端揃え。

body {
	text-align: justify; /* 文字列を両端揃えに。Firefox 用 */
	text-justify: inter-ideograph; /* IE 用。 */
}

　テキストを両端揃えにします。重要。右端のラインがそろい、綺麗になります。紙の本では当たり前の設定です。でも、Firefox と IE しか対応していません（IE は独自プロパティで対応。）。7

.widget_tag_cloud a {
	white-space: nowrap;
}

　text-align と関係して。
　単語の途中で折り返さないようにします。
　タグクラウドなどで有効。本文に使うと見苦しくなります。

行間の調整

p {
	line-height: 1.75; /* 行間調整。 */
	margin: 1.75em 0; /* 段落間も行間に合わせる。*/
}

　行間の調整です。
　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 の２倍の値を与えます。

リンク周り

a {
	text-decoration: none;
}

a:hover {
	position:relative;
	top: 1px;
}

　日本語組版とは関係なくなってきましたが、テキスト周りの設定です。
　野暮ったい、a の下線を消去します。
　また、マウスホバーで下に 1px 移動。left: 1px; を指定しますと右に動きます。
　動くリンクを選択するかはともかく、a:hover に適当なデザインを設定しておきませんと、リンクの存在に気づきにくいですので、何かしら目に見えるようにしましょう。
　1px 動くリンクは、昔からの趣味です。9

字間調整

#logo h1 {
	letter-spacing: 20px;
}

　字間調整。タイトル文字を広く設定。また、-1 px など負の値を指定すれば、逆に詰め詰めにできます。Helvetica Bold などと組み合わせるとごつごつして好き。趣味。

　題字などは、FLAutoKerning を利用して詰めると綺麗になります。要素を削って使用しています。
参考：jquery.FLAutoKerning.js を使い、HTML でも文字詰めしました。 « タメハ（仮）

　先ほども述べたように、Firefox と OpenType 要素を持つフォント利用すればきっちりカーニングしてくれます。綺麗です。

Google Web Fonts
　アクセントに。Krankyを利用しています。

特殊文字、スペーシング。

 

　non-breaking space。WordPress でむりやり複数改行するときに便利。

 

　hair space。細いスペース。タイトルの半角文字と全角文字のすきま。
　スペースには他にもいろいろあります。IME か AutoHotkey あたりに覚えさせておきますと便利です。10

&

　& のこと。
　
　HTML 文字セットを参考に。

　他にもいろいろ細かく設定しましたが、ほんとに大切なのはこのあたり。もっと詳しく知りたければ、

• Webタイポグラフィまとめ – Archiva
• Type Tips—short, quick tips on all things web typography from Harry Roberts of CSS Wizardry

　などを参考に。

Tweet

Pocket

1. シカメと読むとほむほむに重火器で殺られます。 [↩]
2. 好みです。不揃いが気持ち悪い人が普通かも。 [↩]
3. また、アポストロフィには、ちゃんとシングルクォートの右閉じを使いましょう。 [↩]
4. これも好み。 [↩]
5. このサイトでは、こっそり ‘Yu Gothic’ を指定しています。Windows Phone 7.1 に搭載されました游ゴシックです。素敵。 [↩]
6. 投げやりです。 [↩]
7. Opera や Chrome/Safari も頑張ってください。 [↩]
8. 文字の大きさなどにもよります。 [↩]
9. きちきちに組んでいますと、デザインが飛びますので注意。 [↩]
10. 参考：スペース – Wikipedia [↩]