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

Pocket
LINEで送る

 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 としか指定しませんと、「MSPゴシック」で表示されてしまいますから。汚い。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 の2倍の値を与えます。

リンク周り

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 文字セットを参考に。

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

 などを参考に。

Pocket
LINEで送る

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

2 comments / Add your comment below

  1. ピンバック: WordPress Blog 最初の一工夫 | Diary in the sun

コメントを残す