WordPress（ワードプレス）で中央揃えする方法を解説！

2024 4/26

ワードプレスで記事を作成する際、文章や画像などを中央揃えしたいことがありますよね。

今回は、ワードプレスで中央揃えする方法を解説します。

テキストの中央揃えをする方法

ブロックエディターで、入力した文章を中央揃えしたい場合の方法を説明します。

文字を入力したら、ブロックの設定で「配置」を選択します。

「テキスト中央寄せ」を選択しましょう。

これで、テキストが中央揃えになります。

とっても簡単ですよね！

中央揃えするコード

中央揃えにしたい場合は、そのままコードを埋め込むことも可能です。

<div>の間に「text-align: center;」を指定すればOKです。

ワードプレスのビジュアルエディターなら簡単に中央揃え可能ですが、もしコードを使う際は参考にしてみてください。

複数行のテキストをキレイに中央揃えする方法

次に、複数行のテキストの頭を揃えて中央揃えする方法を紹介します。

先ほどの中央揃えの方法を使うと、文字の頭の位置が揃わず、読みにくいし見た目もよくありません。

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

しかし、次の方法を使って文章の左寄せを維持したまま、まとめて画面中央に配置することができます。

まずは、ブロックにカスタムHTMLを追加し、次のコードを入力しましょう。

次に、ワードプレスのメニューから「外観」⇒「カスタマイズ」⇒「Design Options」⇒「Custom CSS」を選択します。

ない場合は「外観」⇒「カスタマイズ」⇒「追加CSS」と進みましょう。

そして、次の記述を追加してください。

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

この設定を行うことで、文字の頭を揃えながら中央揃えすることができますよ。

CSSを使ってブロックを中央揃えする方法

CSSで中央揃えする方法もあるので、その方法について見ていきましょう。

まず、中央に配置したいブロックの幅をwidthで決めた後、左右の余白をautoにします。

そしたら、HTMLは次のように入力しましょう。

CSSの入力は次の通りです。

これでOKです。

Googleマップやストリートビューを中央揃えする方法

ワードプレスのビジュアルエディターでは、ブロックを選択してブロックの設定から配置を選ぶことで簡単に中央揃えできますが、1つずつカスタムHTMLでタグを追加する方法についても紹介しておきます。

Google マップやストリートビューを中央揃えする場合は、1つずつ行いましょう。

<div style=”text-align: center;”>（Googleマップの埋め込みコードを入力）</div>

これだけで簡単に中央揃えになりますよ。

Twitterの埋め込みを中央揃えする方法

記事内にTwitterを埋め込んで表示させるときに中央揃えにするコードを見ていきましょう。

Twitterの場合は、テーマエディターでCSSにコードを追加する必要があります。

まず、「外観」⇒「カスタマイズ」を選択します。

次に、「追加CSS」を選択し、コードを描いていきましょう。

.twitter-tweet { margin: 0 auto; }

これで公開すれば、中央揃えは完了です。