文字間隔の調節

今回は、「文字間隔」のカスタマイズ方法について説明します。

ブログカスタマイズ講座では、スペースで文字間隔を調節してはいけない理由についても説明しますので、是非、参考にしてくださいね。

[カスタマイズ講座へ] → スペースで文字間隔を調節してはいけない理由


文字間隔を調整する方法として、具体的に、「カレンダー年月」の文字間隔を調整する方法を例に挙げて説明します。

■ CSS（スタイルシート）の編集方法
デフォルト・テンプレートのスタイルシートを見ていただくと、下記のような記述がありますね。

＜スタイルシート＞

#calendar caption { letter-spacing: .3em; }

初期設定では、「letter-spacing: .3em;」と指定されています。「#calendar caption」とは、カレンダーの年月部分のことです。この「.3em」という記述を変更することで、カレンダーの年月部分の文字間隔を変更することができます。


文字間隔の指定方法には、「3px」のように絶対サイズで指定する方法と、 「0.3em」のように相対サイズで指定する方法があります。

■ 絶対サイズで指定

< 記述例 >

letter-spacing: .3px;

文字間隔が、3ピクセル（px）になります。

< 表示例 >

2005年06月

■ 相対サイズで指定

< 記述例 >

letter-spacing: .0.3em;

文字間隔が、0.3文字分（em）になります。

< 表示例 >

2005年06月

絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。

絶対サイズ	意味
in	インチ。1in = 25.4mm
cm	センチメートル
mm	ミリメートル
pt	ポイント。1pt = 1/72in
pc	パイカ。1pc = 12pt
px	ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ）

相対サイズ	意味
em	基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ）
ex	基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ）
%	基準書体のサイズに対する百分率

文字間隔の調整について、カレンダーの年月を例として説明しましたが、カレンダーの年月だけでなく、他の部分の行間を変更したい場合は、その該当箇所に「letter-spacing」プロパティを追加することで調整できます。

MovableType3.17の主なクラス・セレクタは、下記の通りですので、参考にしてください。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分

以上、文字間隔の調整、指定方法について説明しました。
是非、参考にして、読みやすい文字間隔にカスタマイズしてくださいね。

参考になりましたら、応援お願いします。