WordPressで左寄せのテキストを中央に配置する方法

固定ページや投稿で、テキストを入力するとき、たとえば「詩」のように、短い文章を、改行しながら、複数行にわたって書きたい場合があります。

このとき、普通に入力していくと、

あああああああ
いい
ううううう

このように、文字が画面の左側に寄ってしまい、体裁が悪くなります。

だからといって、文字をセンタリングしてしまうと、

あああああああ
いい
ううううう

このように、文字のあたまの位置がそろわず、文章が読みにくくなってしまいます。

これに対し、以下の方法で、文章は左寄せのままで維持しながら、それらのまとまりを、画面中央に配置することができます。

• WordPressの入力モードを「テキスト」に切り替えます。
• 整列したい複数行の文字列を、「<p class=”sample01″><span style=”color: #000000;”>」と「</span></p>」で括ります（「sample01」は単なるキーワードなので、後述するCSS内のキーワードと同じであれば何でも構いません）。以下のような感じになります。

<p class="sample01"><span style="color: #000000;">あああああああ
いい
ううううう</span></p>

• 「外観」＞「カスタマイズ」＞「 Design Options」＞「Custom CSS」（ない場合は、「外観」＞「カスタマイズ」＞「追加CSS」）で、以下の記述を追加します。

.sample01 {
text-align: center;
}
.sample01 span {
display: inline-block;
text-align: left;
}

これで、以下のとおり、左揃えされた文字列のまとまりを、画面中央に配置することができます。

あああああああ
いい
ううううう

なお、今回の対処は、WordPress バージョン4.9を使い、「Attitude」というWordPress無料テーマに対して実施しています。WordPressのバージョン5系で同様の処理を行いたい場合は、こちらの記事を参照してください。

また、文字色の指定は、対象の文章に「span」というタグをつけるために行っています。今回は「span」タグをつけるには、文字色の指定が簡単だったので、今回はこの方法を採用しましたが、同様の処理ができるのであれば、他の方法でも構いません。