ブログ改造日記 8: 両端揃えの導入

左揃えから両端揃えへ

久しぶりのブログ改造日記、今回はタイトル通りブログに両端揃えを導入してみた。NILOG読者の方の環境によっては、文章を読み進めていくうちにいつもと何か印象が違うことに気付くはず。今までは目次以外は特に文字揃えを意図的に設定していなかったので、左揃えになっていた。しかし日本語の場合は両端揃えが基本であり、その方が全体的に読み易く、清々しく、また整然とした印象を与える。むしろ何故今まで設定していなかったのか自分でも良く分からないが、ブログ改造日記などの根本的な部分の整理に気が配れるようになっているということは、忙しいながらも心に余裕ができている証拠かもしれない。

CSSの設定方法

実際の設定は簡単なので、CSSに慣れている人なら瞬殺できる作業だろう。またCSSに詳しくなくてもこれから書く方法で両端揃えを設定することができる。ちなみに今回はWordPressで何かしらのテーマを使用していることを前提としているが、それ以外の環境の人でもCSSを設定できるなら参考になるはず。

まず以下のどちらかの経路でAdditional CSSの画面を出す。

Appearance > Additional CSS

Customize > Additional CSS

次に以下のコードをコピペして貼り付ける。

body {
 text-align: justify;
 text-justify: inter-ideograph;
}

Publishする。基本的には以上で作業は終了。

CSSコードの意味

body {
}

bodyタグはブラウザに表示されるものに作用する。例えばbodyをh3などの見出しタグに変更すれば、その特定のタグにだけ文字揃えなどを設定することもできる。

text-align: justify;

text-alignプロパティは、文字揃えの位置を指定するためのプロパティ。justifyで両端揃えを設定できる。

text-justify: inter-ideograph;

実はIEなどの特定のブラウザ以外ならこのtext-justifyプロパティの併用は必要ないが、念のために設定しておいた。inter-ideographは日本語などの表意文字の言語において、テキストの単語と文字間隔を調整することで均等割付を設定できる。

今回の記事のまとめ

今回の記事ではブログの文章をCSSを設定することで、両端揃えにする方法を試してみた。場合によってレイアウト崩れが起きる場合もあるようだが、今のところはそういったこともなく満足している。ブログ改造日記では以前から引き続き取り組みたいことが幾つかあったが、やることが多すぎて後回しにしてきた。しかしそろそろそれらにも手を付けるべき時が来ているように感じている。次回がいつになるかは未定だが、引き続きブログ改造日記を通してブログ改造に粛々と取り組んでいきたい。

ブログ改造日記: 連載記事リンク

ブログ改造日記 1: デザインの変更と機能の追加

ブログ改造日記 2: ブログに関する問題点

ブログ改造日記 3: 自滅としてのグーグル八分

ブログ改造日記 4: 「Table of Contents Plus」の限界と自作目次の導入

ブログ改造日記 5: 「All in One SEO」から「Yoast SEO」へ

ブログ改造日記 6: Googleのインデックスに関する問題点

ブログ改造日記 7: 「Broken Link Checker」の導入と自作目次の改善

ブログ改造日記 8: 両端揃えの導入

ブログ改造日記 9: Headerの高さを調整してみた

ブログ改造日記 10: Twitter Cardの設定

ブログ改造日記 11: footnotesというプラグインで脚注を導入してみた

ブログ改造日記 12: カテゴリ整理

ブログ改造日記 13: IFTTTとInstagram Feedの設定