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

スポンサーリンク
お役立ち情報

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

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

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

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

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

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

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

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

  • 文字列を入力した段落ブロックを選択した状態で、「高度な設定」の「追加CSSクラス」に「sample01」と入力します(「sample01」は単なるキーワードなので、後述するCSS内のキーワードと同じであれば何でも構いません)。
  • その段落ブロック内の全ての文字列を選択した状態で、「フォントサイズ」で任意のフォントサイズを選択します。
  • 「外観」>「カスタマイズ」>「追加CSS」で、以下の記述を追加します。
.sample01 {
text-align: center;
}
.sample01 span {
display: inline-block;
text-align: left;
}

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

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

なお、今回の対処は、「Cocoon」というWordPress無料テーマに対して実施しています。
フォントサイズの選択は、対象の文章に「span」というタグをつけるために行っています。「Cocoon」で「span」タグをつけるには、フォントサイズの選択が簡単だったので、今回はこの方法を採用しましたが、同様の処理ができるのであれば、フォントサイズの選択ではなく、他の方法でも構いません。

 

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

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

スポンサーリンク
スポンサーリンク
お役立ち情報
スポンサーリンク
シェアする
さとやまノート