WordPressのバナー編集はどこから?種類別の編集場所と画像・リンクの変え方

WordPressのバナーは、テーマの種類とバナーの置き場所によって、編集する画面が変わります。

説明記事を見ながら「外観→カスタマイズ」を探しても見つからず、手が止まってしまった人も多いのではないでしょうか。

最初にバナーの種類を見分けておけば、画像の差し替えも文字やリンクの変更も迷わずに進められます。

本文のバナーやヘッダーの編集から、スマホで画像が切れる時や変更が反映されない時の確認順まで、標準機能で直す方法を解説します。

目次

WordPressのバナーはどこで編集する?種類ごとの編集場所を先に判定

WordPressのバナーはどこで編集する?種類ごとの編集場所を先に判定

WordPressのバナーは、作り方によって開く画面が変わります。

手順を探す前に、今表示されているバナーがどの種類なのかを確かめると、編集画面までの道のりが短くなります。

画面上のバナーの種類と編集場所の早見表

「バナー」と呼ばれる部分には、本文内の画像、画像に文字を重ねたカバーブロック、全ページ共通のヘッダー、テーマ独自のトップ画像、広告タグなどが混ざっています。

見た目は似ていても作り方が違うため、自分のバナーがどれに当たるかを次の表で確認してください。

画面上のバナー 最初に開く編集場所
投稿・固定ページの本文内にある そのページの投稿/固定ページ編集画面
画像の上に文字やボタンが重なっている カバーブロック(本文内なら投稿/固定ページ編集画面)
全ページの上部に共通で出ている 外観→エディター→パターン/ヘッダー
クラシックテーマのヘッダー画像 外観→カスタマイズ(カスタマイザー)
テーマ独自のトップ画像 テーマ公式の設定画面
ASPなどの広告バナー 広告タグ/テーマの広告管理/カスタムHTML
ポップアップ・追従型 専用ブロック、プラグイン、または追加の実装

表を見るときは、まず「そのバナーが特定のページだけに出ているか、全ページに出ているか」を確かめます。

特定のページだけなら投稿・固定ページの編集画面、全ページの上部に出ているならヘッダー側の設定を開くのが近道です。

画像の上に文字やボタンが乗っているものはカバーブロックで作られていることが多く、文字だけを直接書き換えられます。

広告バナーは画像の差し替え操作では直せないため、広告タグやテーマの広告管理画面を確認する必要があります。

編集場所はテーマとバナーの設置場所で異なるので、表で種類を特定してから次の手順に進みましょう。

外観メニューでブロックテーマかクラシックテーマかを見分ける

共通ヘッダーのバナーを直す前に、使っているテーマがブロックテーマかクラシックテーマかを確認します。

見分け方は、管理画面の左メニューで「外観」を開き、その中に「エディター」があるかどうかを見るだけです。

「外観→エディター」があればブロックテーマで、ヘッダーなどはサイトエディター(Site Editor)から編集します。

「エディター」が無い場合はクラシックテーマの可能性が高いので、「外観→カスタマイズ」から開くカスタマイザーでヘッダー画像を変える手順に進みます。

説明記事のとおりに「外観→カスタマイズ」を探しても見当たらないときは、ブロックテーマを使っていて、サイトエディターで編集する構成になっていると考えられます。

説明記事と自分の画面が違っても操作ミスとは限らず、テーマの種類や環境によってメニューの並びが変わります。

WordPress.comで運営しているサイトと、サーバーに自分で入れたWordPressとでも、管理画面の見た目が一部異なる場合があります。

メニューに目当ての項目が無いときは、テーマの種類を確かめてから手順を選び直すと迷いません。

タイムラインの色やアイテム数まで細かく調整したい人はこちら Cocoonのタイムラインの使い方|ブロック追加・アイテム数・色変更を解説

本文に置いたWordPressバナーの画像・文字・リンクを編集する手順

本文に置いたWordPressバナーの画像・文字・リンクを編集する手順

投稿や固定ページの本文に置いたバナーは、そのページの編集画面を開き、バナー部分のブロックをクリックして選ぶところから始めます。

カバーブロック(Cover)のバナーは画像を置換して文字やボタンを直す

画像の上に文字やボタンが重なったバナーは、多くの場合カバーブロック(Cover)で作られています。

WordPress.comの公式ガイドでも、カバーブロックはバナーを作る標準の手段として案内されており、投稿・固定ページ・テンプレートに追加できます。

画像だけを変えたいときは、カバーブロックを選択してツールバーの「置換」を押し、新しい画像を選びます。

「置換」を使えば、バナーの位置やレイアウト、上に重ねた文字やボタンはそのまま残ります。

見出し・段落・ボタンはカバーブロックの中に入った通常のブロックとして扱われるため、クリックしてそのまま書き換えられます。

キャッチコピーやボタンの文言を変えるだけなら、画像を作り直す必要はありません。

公式ガイドでは、文字を画像に焼き込むより、画像の上にWordPressの文字ブロックを重ねるほうが画面サイズに合わせやすいと案内されています。

文字入りの画像をそのまま背景に使うと、スマホで文字の端が切れて読めなくなることがあります。

文字が背景に埋もれて読みにくいときは、オーバーレイ(画像の上にかける色の層)の不透明度を調整します。

不透明度は0〜100で設定でき、公式ガイドではデザインに応じて25〜75が効果的な範囲とされています。

反対に、ヘッダー画像がグレーに見えて困っていた人が、オーバーレイの不透明度を0にして改善したという相談例もあります。

画像ブロックのバナーを差し替えてリンクを設定する

文字が重なっていない画像だけのバナーは画像ブロックで置かれていることが多く、画像を選んで置換すれば差し替えられます。

リンクを付けるときは、画像ブロックを選び、ツールバーのリンクアイコンからURLやサイト内のページを指定します。

リンクは画像とは別に設定されているため、画像だけ新しくすると古いページへ案内したままになることがあります。

画像を差し替えたら、リンク先も新しいページになっているかを必ず確認しましょう。

切り抜きや回転くらいの簡単な加工であれば、外部の画像ソフトを開かなくてもWordPressの中で済ませられます。

2026年10月時点の最新安定版はWordPress 7.1.3で、2026年8月に公開されたWordPress 7.1では新しいメディアエディターが搭載されました。

WordPress.comの公式ガイドによると、エディター上の画像編集では次の操作ができます。

  • 最大300%までのズーム
  • 16:9などの複数のアスペクト比での切り抜き
  • 90°単位の回転と反転

エディター上で画像を切り抜くと新しいコピーが作られるため、ほかの場所で使っている元の画像には影響しません。

メディアライブラリから編集すると元の画像ファイルに適用されるので、同じ画像を使う他ページへの影響に注意が必要です。

その場合も復元機能が用意されているので、加工を誤ったときは元の画像に戻せます。

カバーブロックと画像ブロックの違いを並べると、次のようになります。

比較軸 カバーブロック 画像ブロック
文字やボタンの重ね方 画像の上に見出し・段落・ボタンを重ねられる 画像そのものを見せる使い方が中心
スマホでの見え方 領域を埋めるため、画像の一部が切れる場合がある 画像全体を見せやすい
リンクの付け方 中に置いたボタンで移動先を案内する ツールバーのリンクアイコンで画像にリンクを付ける
向いている用途 ヒーローセクション、LP風のCTA 広告画像、キャンペーン画像

表のとおり、文字やボタンを後から書き換えたいならカバーブロック、画像を欠けずに見せたいなら画像ブロックが向いています。

ヘッダーやテーマ独自のWordPressバナーを編集する方法

ヘッダーやテーマ独自のWordPressバナーを編集する方法

全ページの上部に共通で出ているバナーは、多くの場合、投稿の編集画面ではなくテーマ側の設定から編集します。

ブロックテーマはサイトエディター(Site Editor)でヘッダーを編集する

ブロックテーマでは、「外観→エディター」でサイトエディターを開き、「パターン」や「ヘッダー」の項目から該当部分を選んで編集します。

サイトエディターではヘッダーやテンプレートを画面で見たまま編集できるため、共通ヘッダーのバナーもまとめて差し替えられます。

テンプレートパーツを保存すると、そのパーツを使っているサイト内の各所に変更が反映されます。

1ページだけのつもりで共通ヘッダーを編集すると全ページのヘッダーが変わるので、保存前に編集対象を確かめましょう。

ページごとに違うヘッダーを出したい場合は、別のヘッダー用パーツを使って分けます。

ヘッダー画像のサイズについて、公式ガイドでは一律の推奨サイズは無く、テーマによって変わると説明されています。

目安としては、16:9の比率(1920×1080や1280×720など)がきれいに表示されることが多いと案内されています。

使っているテーマに推奨サイズが示されている場合は、そちらを優先してください。

クラシックテーマはカスタマイザー、独自テーマは公式マニュアルを確認する

「外観」にエディターが無いクラシックテーマでは、「外観→カスタマイズ」でカスタマイザーを開き、ヘッダー画像の設定から画像を変更します。

カスタマイザーならテーマが用意した枠組みのままヘッダー画像を差し替えられるので、デザインを崩しにくくなります。

JIN:Rのように、テーマ独自のメインビジュアルやヘッダー用の設定画面を持つテーマもあります。

テーマ独自のトップ画像は標準と編集場所が違うことがあるため、「テーマ名+バナー」や「テーマ名+メインビジュアル」で公式マニュアルを確認しましょう。

テーマ独自の設定が優先される場合、標準の画面で画像を変えても表示が変わらないことがあります。

テーマの種類ごとの編集場所は、次の表のとおりです。

テーマの種類 見分け方 編集場所 注意点
ブロックテーマ 外観に「エディター」がある サイトエディター テンプレートパーツの変更は使用中の全ページに反映
クラシックテーマ 外観に「エディター」が無い カスタマイザー(外観→カスタマイズ) ヘッダー画像のサイズはテーマ次第
独自テーマ テーマ独自の設定メニューがある テーマの設定画面 標準の手順と編集場所が違うことがある

自分のテーマの行を確かめ、テーマが用意した編集場所から作業を始めるのが安全です。

WordPressのバナー編集後にスマホで切れる・反映されない時の直し方

編集が終わったら、スマホでの見え方と、公開ページに変更が出ているかを確認します。

スマホでバナーが切れる・サイズが合わない原因と対処

バナーの横幅や高さ、全幅表示、余白は、カバーブロックや画像ブロックの設定で調整できます。

画像ブロックでは、アスペクト比を選んだうえで、画像の収め方としてCoverとContainを使い分けられます。

Coverは表示する領域全体を埋めるため画像の一部が切れる場合があり、Containは画像全体を枠の中に収めます。

カバーブロックも背景を埋める性質を持つため、公式ガイドではモバイルで画像全体が表示されない場合があると説明されています。

PCでぴったり合っていても、スマホでは画面の縦横比が変わるため、ロゴや人物など大事な部分が画面の外に出ることがあります。

対処は、標準機能で済む方法から次の順に試します。

①カバーブロックの焦点(フォーカルポイント)を設定し、見せたい部分が画面に残るようにします。

②画像全体を必ず見せたい場合は、カバーブロックから画像ブロックに切り替えます。

③それでも合わない場合に限り、CSSで表示比率を調整する方法を検討します。

画像全体の表示が欠かせないバナーなら、画像ブロックを選ぶと欠けにくくなります。

フォーラムでも、スマホでカバー画像が切れる相談に対し、画像ブロックを使う案やCSSで比率を調整する案で解決した例が紹介されています。

変更が反映されない・バナーが表示されない時の確認順

保存したのに古いバナーのままに見えるときは、操作を誤ったと決めつけず、原因を順番に切り分けます。

WordPress.orgの公式サポートでも、変更が見えない原因として、ブラウザー・サーバー・キャッシュプラグインのキャッシュが挙げられています。

確認順 確認内容 見るポイント
1 保存 編集画面を開き直して変更が残っているか
2 編集対象 パターンとテンプレートパーツのどちらを編集したか
3 ブラウザーのキャッシュ 別のブラウザーでも古い表示のままか
4 キャッシュプラグイン プラグインのキャッシュを削除して変わるか
5 サーバーのキャッシュ ホスティング側のキャッシュ設定
6 Lazy Load・画像最適化 一時停止して表示が戻るか

表は、手軽に確かめられるものから順に並べています。

キャッシュ・編集対象・最適化機能のどれも原因になり得るため、上から1つずつ除外していきましょう。

フォーラムには、ヘッダーのパターンを編集しても新しい項目が公開ページに出なかった相談があり、編集対象とキャッシュの確認が勧められています。

ログアウト状態でだけ画像が出なかった例では、サーバー側の画像最適化や遅延読み込みの設定をオフにして改善したという報告があります。

プレビューでは見えるのに公開ページで画像が消えた例でも、古いLazy Loadプラグインを無効にすると表示が戻ったそうです。

ASPなどの広告バナーだけが表示されない場合は、通常の画像とは別の系統として、広告ブロックや追跡防止の影響も疑いましょう。

テーマのアフィリエイトタグ経由の広告がログイン中だけ見えなかったという報告もあり、ログイン・ログアウト状態や別ブラウザーで見比べると切り分けやすくなります。

外部から配信される広告画像の場合は、配信元の画像ホストも原因の候補になります。

大きく作り替える前は編集前のバックアップを残しておき、公開後はPCとスマホの両方で表示を確かめてください。

まとめ|WordPressのバナー編集は種類の見分けから始める

WordPressのバナー編集は、バナーの種類と使っているテーマを見分けると、開くべき画面がはっきりします。

  • 早見表と「外観→エディター」の有無で、編集場所を判定する
  • カバーブロックは「置換」で画像を変え、画像ブロックは差し替え後にリンク先も確認する
  • 公開後はスマホでの切れ方と、キャッシュなどによる反映漏れを順に確認する
よかったらシェアしてね!
  • URLをコピーしました!
目次