WordPressで文字、画像、YouTube、Googleマップ、X（旧Twitter）、Instagramを中央寄せする方法を解説します。現在のブロックエディターでは、多くのコンテンツをCSSなしで中央寄せできます。まずブロックの配置機能を使い、対応していない埋め込みだけCSSで調整しましょう。
最初にブロックの配置機能を確認する
- 投稿または固定ページの編集画面で、中央寄せしたいブロックを選びます。
- ブロック上部のツールバーにある「配置」または「テキスト配置」を開きます。
- 「中央揃え」を選びます。
- プレビューを開き、パソコンとスマートフォンの表示を確認します。
表示される項目はブロックとテーマによって異なります。「幅広」「全幅」は中央寄せではなく、コンテンツの表示幅を変更する設定です。
文字を中央寄せする
- 段落または見出しブロックを選びます。
- ツールバーの「テキスト配置」をクリックします。
- 「テキスト中央寄せ」を選びます。
文章全体を中央寄せすると長文が読みにくくなるため、タイトル、短い案内、ボタン付近などに限定するのがおすすめです。
画像とキャプションを中央寄せする
- 画像ブロックを選びます。
- ツールバーの配置メニューを開きます。
- 「中央揃え」を選びます。
画像の下へ入力したキャプションは画像ブロックの中に含まれます。テーマのデザインによってキャプションだけ左寄せになる場合は、後述する追加CSSを使います。
YouTubeを中央寄せする
ブロック追加画面から「YouTube」ブロックを選び、動画URLを貼り付けます。通常は記事幅に合わせて表示されるため、個別の埋め込みコードやテーマファイルの編集は必要ありません。
- 「＋」からYouTubeブロックを追加します。
- 公開または限定公開の動画URLを入力し、「埋め込み」をクリックします。
- 配置項目がある場合は「中央揃え」を選びます。
- プレビューで左右の余白を確認します。
YouTube Shortsなど固定幅の埋め込みが左へ寄る場合は、ブロックをグループ化してグループのレイアウトを中央揃えにするか、下の共通CSSを利用してください。
Googleマップ・ストリートビューを中央寄せする
- パソコンでGoogleマップを開き、場所を表示します。
- 「共有」→「地図を埋め込む」→「HTMLをコピー」を選びます。
- WordPressで「カスタムHTML」ブロックを追加し、コピーしたコードを貼り付けます。
- カスタムHTMLブロックをグループ化し、グループのレイアウトを中央揃えにします。
テーマに中央揃えのレイアウト項目がない場合は、埋め込みコードを次のように囲みます。
<div class="embed-center">
<!-- ここにGoogleマップの埋め込みコード -->
</div>地図がスマートフォンの画面からはみ出さないよう、埋め込みコードのiframeには最大幅を設定します。下の共通CSSで対応できます。
X（旧Twitter）の投稿を中央寄せする
WordPressの「X」埋め込みブロックへ公開投稿のURLを貼り付けます。正しく表示されない場合は、Xの投稿メニューから「Embed post」を選び、publish.x.comで取得したコードをカスタムHTMLブロックへ貼り付けます。
カスタムHTMLを使う場合は、取得したコードを次の枠内へ貼り付けます。
<div class="embed-center">
<!-- ここにXの埋め込みコード -->
</div>非公開、削除済み、利用停止されたアカウントの投稿は表示できません。
Instagramの投稿を中央寄せする
WordPress標準機能では、InstagramのURLを貼るだけの埋め込みが利用できない場合があります。その場合はInstagram側で取得できる埋め込みコード、または現在も保守されている対応プラグインを利用します。
埋め込みコードを使う場合は、カスタムHTMLブロックへ貼り付け、次のように囲みます。
<div class="embed-center">
<!-- ここにInstagramの埋め込みコード -->
</div>中央寄せ用の共通CSS
ブロックの配置機能だけでは中央寄せできない埋め込みには、次のCSSを使います。テーマのstyle.cssを直接編集すると、テーマ更新時に変更が消える可能性があるため避けてください。
/* 固定幅の埋め込みを中央寄せ */
.embed-center {
display: flex;
justify-content: center;
width: 100%;
margin-block: 1.5rem;
}
.embed-center > * {
max-width: 100%;
}
.embed-center iframe {
max-width: 100%;
}
/* 画像キャプションだけ中央寄せ */
.wp-block-image figcaption {
text-align: center;
}CSSを追加する場所
- クラシックテーマ：「外観」→「カスタマイズ」→「追加CSS」
- ブロックテーマ：「外観」→「エディター」→「スタイル」から追加CSSまたはブロックごとのCSSを設定
管理画面の名称はテーマやWordPressのバージョンによって異なります。「追加CSS」が見つからない場合は、テーマの説明書も確認してください。
中央寄せできないときの確認項目
- 画像や埋め込み自体の幅が記事幅いっぱいになっていないか
- 親のグループブロックが左寄せになっていないか
- 追加したクラス名が「embed-center」と完全に一致しているか
- キャッシュを削除しても表示が変わらないか
- テーマやプラグインのCSSが後から上書きしていないか
- パソコンだけでなくスマートフォンでもはみ出していないか
カスタムHTML内のscriptやiframeは、ユーザー権限やセキュリティ設定によって保存時に削除される場合があります。提供元が不明な埋め込みコードは貼り付けないでください。
外部コンテンツ埋め込みの注意点
YouTube、Googleマップ、X、Instagramなどを埋め込むと、閲覧者のIPアドレスやCookieなどが外部サービスへ送信される場合があります。サイトのプライバシーポリシーへ利用サービスを記載し、必要に応じて同意管理を行ってください。
まとめ
画像やYouTubeは、まずブロックツールバーの「中央揃え」を使います。GoogleマップやSNSの埋め込みなど、配置機能がないコンテンツはグループブロックで中央揃えにし、それでも整わない場合だけ共通CSSを使いましょう。テーマファイルを直接編集しないことも重要です。