[Ё]WordPressでテキストやバナーを中央寄せする方法2つ

こんにちは、エンディです。

今回は、WordPressでテキストやバナーを中央寄せする方法を2つ紹介します。

Gutenberg(ブロックエディター)を使っていて、主にASPから提供されたバナーを貼り付ける時に中央寄せしたい、という時なんかに使えるので参考にしてみてください。

WordPressに限らず、Web関連では割と必須なのでぜひ覚えていってください。

中央寄せする方法

今回紹介する中央寄せする方法は以下です。

出オチですが、中央寄せするおまじないは

text-align: center;

です。

タグに直接text-align: centerのstyleを指定する

まずはこちらです。

HTMLのタグとして直接style指定する方法です。

<div style="text-align: center">
中央寄せしたいテキストやバナータグ
</div>

CSSの自作セレクタを作ってtext-align: centerを指定する

次に、自作のセレクタとして、text-align: centerを登録して使う方法です。

WordPressであれば、子テーマのstyle.cssか、追加のカスタムCSSみたいなところに以下追加します。

.en-center {
  text-align: center;
}

セレクタ名(.en-center)は被らない名前でご自身の好きなように指定してください。

使用する時は、

<div class="en-center">
中央寄せしたいテキストやバナータグ
</div>

のように指定してください。

個人的には、直接style指定するやり方よりもこちらを推奨します。理由は、万が一機能追加や修正したい時にこのセレクタだけいじれば良いからです。

【非推奨】 <center></center>タグで囲む

HTMLを昔から触っていた人は、<center>のタグを使ったことがあると思います。

こちらでも動きはしますが、HTML5からは非推奨になったので、いつか無効化されるかも？

個人的には楽でいいんですけどね・・・

あとがき

中央寄せはわりと使う機能なので、この機会にぜひ覚えてみてください。