WordPressで中央揃えする方法｜画像・文字・ボタンが真ん中にならない原因も解説
WordPressで記事や固定ページを作成していると、「文字は中央揃えになったのに画像が動かない」「ボタンが真ん中にならない」といった問題が起こることがあります。
これは、中央揃えの対象によって設定方法が異なるためです。文字を中央揃えする場合はテキストの配置を変更しますが、画像やボタン、ブロック全体を中央に配置する場合は、ブロックの配置やレイアウト設定を変更する必要があります。
この記事では、WordPressで文字・画像・ボタンを中央揃えする方法を、ブロックエディターの操作を中心に解説します。中央揃えできない原因や、CSSを使って上下左右の真ん中に配置する方法も紹介するので、表示が思いどおりにならないときの参考にしてください。
1. WordPressで中央揃えする方法の早見表
WordPressで中央揃えする方法は、対象となる要素によって異なります。まずは、基本的な設定方法を確認しましょう。
| 中央揃えしたい要素 | 主な設定方法 |
|---|---|
| 文字 | ツールバーの「テキスト配置」から中央揃えを選択 |
| 画像 | 画像ブロックの「配置」から中央揃えを選択 |
| ボタン | ボタンブロック全体を選択し、中央揃えを選択 |
| ブロック全体 | グループブロックやカラムブロックのレイアウトを調整 |
| 上下左右の真ん中 | FlexboxなどのCSSを使用 |
中央揃えがうまくいかない場合は、「文字そのものを中央にしたいのか」「要素を含むブロックを中央にしたいのか」を確認することが重要です。
1-1. 文字を中央揃えする方法
段落や見出しの文字を中央揃えしたい場合は、対象のブロックを選択し、ブロックツールバーにある配置アイコンをクリックします。その後、「テキスト中央揃え」を選択してください。
基本的な操作手順は次のとおりです。
中央揃えしたい段落または見出しをクリックする
ブロック上部に表示されるツールバーを確認する
「テキスト配置」アイコンをクリックする
「中央揃え」を選択する
「更新」または「公開」をクリックする
HTMLでは、文字の中央揃えにtext-align: center;が使用されます。
.center-text {text-align: center;}テーマやプラグインの影響でエディター上の設定が反映されない場合は、対象のブロックに追加CSSクラスを設定し、上記のようなCSSを適用する方法があります。
1-2. 画像を中央揃えする方法
画像を中央揃えする場合は、画像ブロックを選択して配置を変更します。
画像をクリックするとブロックツールバーが表示されるため、「配置を変更」から「中央揃え」を選択してください。通常はこの操作だけで、画像がコンテンツエリアの中央に配置されます。
ただし、画像の横幅がコンテンツエリアいっぱいに設定されている場合は、中央揃えにしても見た目が変わらないことがあります。画像と表示エリアの幅が同じであれば、左右に移動する余白がないためです。
画像が中央にならないときは、次の点を確認しましょう。
画像の幅が100％になっていないか
「幅広」や「全幅」が選択されていないか
親ブロックに独自のレイアウト設定がないか
テーマのCSSで配置が上書きされていないか
画像に回り込み設定が残っていないか
CSSで画像を中央揃えする場合は、画像をブロック要素として扱い、左右の余白を自動にします。
.center-image {display: block;margin-left: auto;margin-right: auto;}追加CSSクラスにcenter-imageを入力すれば、対象の画像だけに適用できます。
1-3. ボタンを中央揃えする方法
WordPressのボタンブロックは、「ボタン」と、そのボタンを囲む「ボタンブロック全体」の二重構造になっています。そのため、内側のボタンだけを選択していると、中央揃えの設定が見つからないことがあります。
ボタンを中央揃えするときは、次の手順で操作します。
ボタンをクリックする
ツールバーまたはリスト表示から親の「ボタン」ブロックを選択する
配置アイコンをクリックする
「項目を中央揃え」を選択する
複数のボタンを設置している場合も、親となるボタンブロックの配置を中央に変更すれば、ボタン全体を中央にまとめられます。
CSSを利用する場合は、親要素に対して中央揃えを指定します。
.center-button {display: flex;justify-content: center;}ボタン自体にtext-align: center;を指定しても、ボタン内の文字が中央になるだけで、ボタンそのものの位置は変わらない場合があります。ボタンを移動させたいときは、親要素のレイアウトを調整してください。
1-4. ブロック全体を中央に配置する方法
文章や画像、ボタンなどをまとめたブロック全体を中央に置きたい場合は、グループブロックを利用すると便利です。
中央に配置したい複数のブロックを選択し、グループ化します。その後、グループブロックのレイアウトや配置を設定してください。
一定の横幅を持つブロックを中央に配置する場合は、左右の余白をautoにする方法が一般的です。
.center-block {width: 80%;max-width: 800px;margin-left: auto;margin-right: auto;}margin: 0 auto;だけでは中央揃えにならないことがあります。対象要素の幅が100％の場合、左右に余白が存在しないためです。中央に見せるには、widthやmax-widthで親要素より小さい幅を指定します。
.center-block {max-width: 800px;margin: 0 auto;}なお、ブロック内の文字まで中央揃えにしたい場合は、追加でtext-align: center;を指定します。
.center-block {max-width: 800px;margin: 0 auto;text-align: center;}「ブロックの位置」と「ブロック内の文字の位置」は別の設定である点に注意しましょう。
1-5. 上下左右の真ん中に配置する方法
要素を左右だけでなく、上下方向も含めて真ん中に配置したい場合は、CSSのFlexboxを使う方法が簡単です。
.center-box {display: flex;justify-content: center;align-items: center;min-height: 300px;}それぞれのプロパティには、次の役割があります。
display: flex;：Flexboxレイアウトを有効にするjustify-content: center;：主軸方向の中央に配置するalign-items: center;：交差軸方向の中央に配置するmin-height: 300px;：上下中央を確認できる高さを確保する
上下左右の中央揃えを行うには、親要素に高さが必要です。高さが設定されていない場合、親要素と子要素の高さがほぼ同じになり、上下中央の変化が見えません。
画面全体の中央に配置したい場合は、次のように指定できます。
.center-screen {display: flex;justify-content: center;align-items: center;min-height: 100vh;}100vhは、画面の高さと同じサイズを表します。ただし、ヘッダーや管理バーがあるページでは、実際の表示領域に合わせた調整が必要になることがあります。
2. ブロックエディターで中央揃えする方法
WordPressのブロックエディターでは、段落・見出し・画像・ボタンなどが、それぞれ独立したブロックとして扱われます。
中央揃えの設定項目は、選択しているブロックの種類や階層によって変わります。目的の設定が表示されないときは、画面左上の「リスト表示」を開き、現在選択しているブロックを確認しましょう。
2-1. 段落や見出しの文字を中央揃えする
段落ブロックや見出しブロックでは、ブロックツールバーから文字の配置を変更できます。
対象の文章をクリックし、「テキスト配置」から中央揃えを選択してください。複数の段落をまとめて変更したい場合は、対象ブロックを複数選択してから中央揃えを設定します。
ただし、使用しているブロックやテーマによっては、複数選択中に配置設定が表示されない場合があります。その場合は、ブロックをグループ化してグループ全体にtext-align: center;を指定するか、それぞれの段落を個別に設定してください。
中央揃えが反映されない場合は、次の原因が考えられます。
テーマ側のCSSに強い指定がある
装飾プラグインの独自ブロックを使用している
インラインスタイルや追加CSSで左揃えが指定されている
編集画面と公開ページで読み込まれるCSSが異なる
キャッシュに古いCSSが残っている
編集画面では中央に見えるのに公開ページでは左揃えになる場合は、キャッシュの削除やテーマのCSS確認も行いましょう。
2-2. 画像ブロックを中央揃えする
画像ブロックを中央揃えするには、画像を選択し、ツールバーの配置設定から「中央揃え」を選びます。
操作後は、パソコンだけでなくスマートフォン表示も確認してください。パソコンでは中央に配置されていても、画像に固定幅が指定されていると、スマートフォンで画面からはみ出すことがあります。
画像には、次のようなレスポンシブ対応を加えると安心です。
.center-image {display: block;max-width: 100%;height: auto;margin: 0 auto;}max-width: 100%;を指定すると、画像が親要素の幅を超えにくくなります。height: auto;は、画像の縦横比を維持するための設定です。
画像のキャプションだけが中央にならない場合は、キャプションに対して別途中央揃えを指定します。
.center-image-caption figcaption {text-align: center;}画像本体とキャプションは別の要素として扱われることがあるため、それぞれの表示を確認してください。
2-3. ボタンブロックを中央揃えする
ボタンブロックを中央揃えするときは、ボタンの内側ではなく、ボタンを囲んでいる親ブロックを選択します。
ブロックを選びにくい場合は、リスト表示から次のような階層を確認してください。
ボタン└ ボタン上側の「ボタン」が全体を管理する親ブロックで、下側が実際に表示される個別のボタンです。親ブロックを選択した状態で、配置を中央に変更します。
CSSで調整する場合、WordPressのボタンブロックには環境によって.wp-block-buttonsというクラスが付与されます。
.wp-block-buttons.center-buttons {justify-content: center;}追加CSSクラスにcenter-buttonsを設定すれば、特定のボタンブロックだけを中央揃えにできます。
それでも中央にならない場合は、親ブロックの横幅、カラムの配置、テーマ独自のボタンCSSを確認しましょう。特に、ボタンにfloatやpositionが指定されていると、通常の中央揃えが効かないことがあります。
2-4. グループブロックやカラム内の要素を中央揃えする
グループブロックやカラムブロックの中では、横方向と縦方向の配置を個別に設定できる場合があります。
グループブロック内の要素を中央にまとめたい場合は、グループを選択し、レイアウト設定から「中央」を選びます。横並びブロックを使用している場合は、項目の配置や両端揃えなどの設定も確認してください。
カラム内の文字や画像を中央揃えする場合は、次の2点を分けて設定します。
カラム内の文字を中央揃えする
カラム内にあるブロック自体を中央に配置する
文字だけを中央にしたい場合は、段落や見出しに中央揃えを設定します。画像やボタンを含むすべての要素を中央にしたい場合は、カラム内にグループブロックを追加し、そのグループに中央揃えを設定すると管理しやすくなります。
CSSでカラム内の要素を上下左右の中央に配置する場合は、カラムに追加CSSクラスを設定します。
.center-column {display: flex;flex-direction: column;justify-content: center;align-items: center;}ただし、align-items: center;を指定すると、子要素の横幅がコンテンツに合わせて小さくなる場合があります。段落などをカラム幅いっぱいに表示したいときは、子要素に幅を指定してください。
.center-column > * {width: 100%;}デザインによっては、すべての子要素を100％幅にすると画像やボタンまで広がる可能性があります。必要な要素だけを対象にするなど、表示を確認しながら調整しましょう。
まとめ
WordPressで中央揃えする方法は、対象が文字・画像・ボタン・ブロックのどれであるかによって異なります。
文字を中央揃えする場合は「テキスト配置」、画像は画像ブロックの「配置」、ボタンは親となるボタンブロックの配置設定を変更します。複数の要素をまとめて中央に置く場合は、グループブロックやカラムブロックを活用すると効率的です。
中央揃えにならないときは、次の点を確認してください。
正しいブロックを選択しているか
要素と親ブロックのどちらを中央にしたいのか
対象要素の横幅が100％になっていないか
親要素に十分な高さや余白があるか
テーマやプラグインのCSSで上書きされていないか
キャッシュに古い表示が残っていないか
ブロックエディターの設定だけで解決できない場合は、追加CSSクラスとtext-align、margin、Flexboxなどを組み合わせることで調整できます。編集画面だけで判断せず、公開ページとスマートフォン表示も確認しながら、文字・画像・ボタンを適切な位置に配置しましょう。