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」タグをつけるには、文字色の指定が簡単だったので、今回はこの方法を採用しましたが、同様の処理ができるのであれば、他の方法でも構いません。

 

なお、私がWordPressの使い方を習得するのにあたっては、以下の書籍を参考にさせていただきました。

WordPressについては、Web上にもたくさんの情報がありますが、きちんと理解して使いたい場合には、一度書籍も読んでおいた方がいいかもしれません。

 


このサイトで書いている、ワードプレスに関するブログ記事を、「さとやまノート」という別のブログページに、あらためて整理してまとめました。

他のワードプレス記事にも興味のある方は「さとやまノート」をご覧ください。