WordPressヘッダーの編集方法｜画像・メニュー・ロゴ変更から固定表示まで初心者向けに解説

はじめに

WordPressのヘッダーは、サイトを開いたときに最初に目に入りやすい重要なパーツです。ロゴ、メニュー、ヘッダー画像、問い合わせボタンなどが配置されることが多く、サイト全体の印象や使いやすさに大きく関わります。

しかし、WordPressでヘッダーを編集しようとすると、「どこから変更すればいいのかわからない」「画像やロゴを変えたのに反映されない」「スマホ表示だけ崩れてしまう」といった悩みが出やすいです。特にWordPressは使用しているテーマによって編集画面や操作方法が異なるため、初心者にとっては少しわかりにくく感じるかもしれません。

この記事では、WordPressヘッダーの基本から、画像・ロゴ・メニューの変更方法、デザイン調整、固定表示、プラグインやコードを使った編集方法まで、初心者向けにわかりやすく解説します。

1. WordPressヘッダーとは？編集できる主な要素

WordPressのヘッダーとは、サイト上部に表示される共通エリアのことです。多くのサイトでは全ページに表示され、ユーザーがサイト内を移動するための案内役として機能します。

1-1. ヘッダーが表示される場所と役割

ヘッダーは、通常サイトの一番上に表示されます。トップページだけでなく、固定ページ、投稿ページ、カテゴリー一覧ページなど、サイト内のさまざまなページに共通して表示されることが一般的です。

ヘッダーの主な役割は、ユーザーにサイトの内容をすぐ理解してもらい、目的のページへ移動しやすくすることです。ロゴでサイト名やブランドを伝え、メニューで主要ページへ誘導し、必要に応じて問い合わせや資料請求などのCTAボタンを配置します。

たとえば企業サイトなら「サービス」「料金」「導入事例」「お問い合わせ」、ブログなら「プロフィール」「カテゴリー」「人気記事」などをヘッダーに配置することで、ユーザーが迷わず情報を探せるようになります。

1-2. ヘッダーで変更できる内容一覧

WordPressのヘッダーでは、主に以下のような要素を変更できます。

ロゴ画像、サイトタイトル、キャッチフレーズ、ヘッダー画像、グローバルメニュー、背景色、文字色、フォント、余白、高さ、ボタン、検索フォーム、SNSアイコンなどです。

テーマによっては、管理画面から簡単に変更できる項目もあります。一方で、細かな配置変更や独自デザインを反映したい場合は、追加CSSやテンプレートファイルの編集が必要になることもあります。

まずは自分が変更したい箇所が「テーマ設定で変更できるのか」「カスタマイザーで変更できるのか」「サイトエディターで変更できるのか」「コード編集が必要なのか」を確認することが大切です。

1-3. テーマによって編集方法が異なる理由

WordPressのヘッダー編集方法は、使用しているテーマによって大きく異なります。これは、テーマごとにヘッダーの作り方や設定項目が違うためです。

従来型のクラシックテーマでは、「外観」から「カスタマイズ」や「メニュー」を開いて編集するケースが多くあります。一方、ブロックテーマでは「外観」から「エディター」を開き、サイトエディター上でヘッダーをブロックとして編集する形式が中心です。

また、有料テーマや高機能テーマでは、独自のテーマ設定画面が用意されている場合もあります。たとえばロゴ位置、ヘッダー固定、スマホメニュー、CTAボタンなどを、CSSを書かずに管理画面から設定できるテーマもあります。

そのため、WordPressヘッダーを編集する際は、まず自分のテーマがどのタイプなのかを確認しましょう。

1-4. 初心者が編集前に確認すべき注意点

ヘッダーはサイト全体に影響するパーツです。少し変更しただけでも、全ページの見た目や操作性が変わることがあります。

初心者が編集前に確認すべきポイントは、バックアップを取ること、現在のヘッダー設定をメモしておくこと、スマホ表示も必ず確認することです。また、テーマファイルを直接編集する場合は、親テーマではなく子テーマを使うのが安全です。

特にheader.phpやstyle.cssを直接編集すると、記述ミスによって画面が真っ白になったり、レイアウトが崩れたりする可能性があります。最初はカスタマイザーやサイトエディター、追加CSSなど、比較的安全に戻せる方法から試すのがおすすめです。

2. WordPressヘッダーを編集する前の準備

WordPressヘッダーを編集する前に、いくつか準備しておくと安心です。準備をせずに作業を始めると、変更前の状態に戻せなくなったり、サイト表示に不具合が出たりすることがあります。

2-1. バックアップを取ってから作業する

ヘッダー編集を行う前に、必ずバックアップを取っておきましょう。特にテーマファイルやCSSを編集する場合は、バックアップがあるかどうかでトラブル時の対応が大きく変わります。

バックアップ対象は、WordPress本体、テーマファイル、プラグイン、画像ファイル、データベースです。プラグインを使えば、初心者でも比較的簡単にバックアップを作成できます。

ロゴやヘッダー画像を差し替えるだけなら大きなトラブルは少ないですが、既存デザインに戻したい場面もあります。変更前のスクリーンショットを撮っておくと、見た目を戻すときに役立ちます。

2-2. 使用中テーマの種類を確認する

次に、使用中のテーマを確認しましょう。WordPress管理画面の「外観」から「テーマ」を開くと、現在有効化されているテーマを確認できます。

テーマによっては、ヘッダー編集が「カスタマイズ」から行える場合もあれば、「エディター」から行う場合もあります。また、テーマ独自の設定画面がある場合は、そこからロゴやメニュー、ヘッダー固定などを設定できることもあります。

ブロックテーマを使っている場合は、サイトエディターでヘッダー全体をブロックとして編集できます。クラシックテーマを使っている場合は、カスタマイザーやメニュー設定を使うことが多いです。

2-3. カスタマイザー・サイトエディター・ウィジェットの違い

WordPressのヘッダー編集でよく使う機能に、カスタマイザー、サイトエディター、ウィジェットがあります。それぞれ役割が異なります。

カスタマイザーは、従来型テーマでよく使われる編集画面です。「外観」から「カスタマイズ」を開き、ロゴ、サイト基本情報、色、メニュー、ヘッダー画像などを編集できます。

サイトエディターは、ブロックテーマで使われる編集画面です。「外観」から「エディター」を開き、ヘッダー、フッター、テンプレートなどをブロック単位で編集できます。

ウィジェットは、サイドバーやフッター、テーマによってはヘッダー内の特定エリアにパーツを追加する機能です。検索フォーム、カテゴリー一覧、カスタムHTMLなどを追加できます。

どの機能を使うかは、テーマの種類と編集したい内容によって変わります。

2-4. 子テーマや追加CSSを使うべきケース

デザインを少し変えたいだけなら、追加CSSを使うのがおすすめです。追加CSSは、管理画面から入力できるため、テーマファイルを直接編集するよりも安全です。

一方で、ヘッダーのHTML構造を大きく変えたい場合や、header.phpを編集したい場合は、子テーマを使うべきです。親テーマを直接編集すると、テーマ更新時に変更内容が上書きされて消える可能性があります。

子テーマを使えば、親テーマの機能を引き継ぎながら、必要な部分だけを安全にカスタマイズできます。初心者の場合、まずはテーマ設定や追加CSSで対応し、それでも難しい場合に子テーマやコード編集を検討するとよいでしょう。

3. WordPressヘッダー画像を変更・設定する方法

ヘッダー画像は、サイト上部に大きく表示される画像です。サイトの雰囲気を伝えやすいため、ブログ、店舗サイト、企業サイトなどでよく使われます。

3-1. カスタマイザーからヘッダー画像を変更する手順

クラシックテーマの場合、ヘッダー画像はカスタマイザーから変更できることが多いです。

管理画面にログインし、「外観」から「カスタマイズ」を開きます。次に「ヘッダー画像」または「サイト基本情報」「ヘッダー設定」などの項目を探します。テーマによって名称は異なりますが、ヘッダー画像に関する設定項目が用意されている場合があります。

「新規画像を追加」または「画像を変更」をクリックし、メディアライブラリから画像を選択するか、新しい画像をアップロードします。必要に応じてトリミングを行い、公開ボタンを押せば変更が反映されます。

変更後は、トップページだけでなく投稿ページや固定ページでも表示を確認しましょう。

3-2. サイトエディターでヘッダー画像を編集する手順

ブロックテーマを使っている場合は、サイトエディターからヘッダー画像を編集します。

管理画面の「外観」から「エディター」を開きます。テンプレートまたはパターンの中からヘッダー部分を選び、画像ブロックやカバーブロックを追加・変更します。

すでにヘッダー内に画像が入っている場合は、その画像をクリックして「置換」を選択し、新しい画像に差し替えます。画像の配置、サイズ、オーバーレイ、余白などもブロック設定から調整できます。

サイトエディターで編集した内容は、保存しないと反映されません。変更後は右上の保存ボタンを押し、対象がヘッダーテンプレートであることを確認して保存しましょう。

3-3. ヘッダー画像の推奨サイズと形式

ヘッダー画像の推奨サイズはテーマによって異なります。一般的には、横幅が大きく、縦幅は控えめな画像が使われます。

目安としては、横幅1200px〜1920px程度、縦幅300px〜600px程度の画像が使いやすいです。ただし、ファーストビュー全体に大きく表示する場合は、より縦長の画像が必要になることもあります。

画像形式は、写真ならJPEG、透過が必要な画像ならPNG、軽量化を重視するならWebPが向いています。表示速度を考えると、画像サイズはできるだけ圧縮しておくことが重要です。

高画質すぎる画像をそのままアップロードすると、ページの読み込みが遅くなる原因になります。見た目と表示速度のバランスを意識しましょう。

3-4. スマホ表示で画像が崩れるときの対処法

ヘッダー画像は、パソコンではきれいに見えても、スマホでは一部が切れたり、文字が見づらくなったりすることがあります。

原因として多いのは、画像の横幅が広すぎること、重要な文字や人物が端に配置されていること、背景画像として設定されていてトリミングされていることです。

対策として、重要な要素は画像の中央付近に配置しましょう。また、スマホ用に別画像を設定できるテーマであれば、スマホ専用のヘッダー画像を用意するのがおすすめです。

CSSで調整する場合は、background-sizeやbackground-positionを見直します。たとえばスマホでは中央表示にしたり、画像の高さを調整したりすることで崩れを防げます。

3-5. ヘッダー画像が表示されない原因と確認ポイント

ヘッダー画像が表示されない場合は、まず画像が正しく設定されているか確認しましょう。カスタマイザーやサイトエディターで画像を選んでも、保存や公開をしていないと反映されません。

次に、テーマがヘッダー画像に対応しているかを確認します。テーマによっては、ヘッダー画像機能がない場合や、特定のテンプレートでしか表示されない場合があります。

また、キャッシュが原因で古い表示が残っていることもあります。ブラウザキャッシュ、キャッシュ系プラグイン、サーバーキャッシュを削除してから再確認しましょう。

画像URLが無効になっている、画像ファイルを削除してしまった、CSSで非表示になっているといったケースもあります。変更直後に表示されない場合は、設定、保存、キャッシュ、テーマ仕様の順に確認するとスムーズです。

4. WordPressヘッダーのロゴを変更する方法

ロゴは、サイト名やブランドを印象づける大切な要素です。WordPressでは、テーマ設定やカスタマイザー、サイトエディターからロゴを変更できます。

4-1. サイトロゴを設定・差し替えする手順

クラシックテーマの場合は、「外観」から「カスタマイズ」を開き、「サイト基本情報」または「ヘッダー設定」を選びます。そこに「ロゴ」や「サイトロゴ」の項目があれば、画像をアップロードして設定できます。

ブロックテーマの場合は、「外観」から「エディター」を開き、ヘッダー部分にあるサイトロゴブロックを選択します。ロゴ画像を置換することで差し替えが可能です。

ロゴを設定した後は、サイトタイトルを表示するか非表示にするかも確認しましょう。テーマによっては、ロゴとサイトタイトルが同時に表示される場合があります。見た目が重複している場合は、どちらかを非表示にするとすっきりします。

4-2. ロゴ画像の適切なサイズと余白の考え方

ロゴ画像は、大きければよいわけではありません。ヘッダー内で見やすく、他のメニューやボタンとバランスが取れていることが重要です。

一般的には、横長ロゴなら横幅200px〜400px程度、高さ40px〜100px程度が使いやすいです。正方形に近いロゴの場合は、ヘッダーの高さに合わせて調整しましょう。

ロゴ画像には適度な余白も必要です。画像自体に余白が多すぎると、表示したときに小さく見えます。反対に余白がなさすぎると、ヘッダー内で窮屈に見えることがあります。

ロゴデータを作る段階で、上下左右の余白を整えておくと、WordPress上で調整しやすくなります。

4-3. ロゴがぼやける・大きすぎる場合の対処法

ロゴがぼやける場合は、画像サイズが小さすぎる可能性があります。表示サイズよりも少し大きめの画像を用意すると、きれいに表示されやすくなります。

特に高解像度ディスプレイでは、実際の表示サイズの2倍程度の画像を使うと、ぼやけにくくなります。たとえば横幅200pxで表示したい場合は、400px程度のロゴ画像を用意するイメージです。

ロゴが大きすぎる場合は、テーマ設定でロゴ幅を変更できないか確認しましょう。設定項目がない場合は、追加CSSで調整できます。

例として、以下のように指定できます。

CSS
.site-logo img {
  max-width: 220px;
  height: auto;
}

実際のクラス名はテーマによって異なるため、ブラウザの検証ツールで確認しながら調整しましょう。

4-4. ロゴをテキスト表示に戻す方法

ロゴ画像を使わず、サイトタイトルをテキストで表示したい場合は、設定したロゴ画像を削除します。

クラシックテーマでは、「外観」から「カスタマイズ」を開き、「サイト基本情報」でロゴを削除します。そのうえで、サイトタイトルの表示が有効になっているか確認しましょう。

ブロックテーマでは、サイトエディターでヘッダーを開き、サイトロゴブロックを削除して、サイトタイトルブロックを追加します。

テキスト表示に戻すと、画像読み込みが不要になるため表示速度の面では有利です。また、サイト名を変更したときも管理画面から簡単に反映できます。

5. WordPressヘッダーメニューを編集する方法

ヘッダーメニューは、ユーザーを主要ページへ案内する重要なナビゲーションです。わかりやすいメニューを設置することで、サイト内の回遊率や問い合わせ率の向上につながります。

5-1. メニュー項目を追加・削除・並び替えする手順

クラシックテーマの場合は、「外観」から「メニュー」を開きます。編集したいメニューを選択し、固定ページ、投稿、カテゴリー、カスタムリンクなどから追加したい項目を選びます。

追加後は、メニュー構造の中でドラッグして順番を並び替えます。不要な項目は開いて「削除」をクリックします。最後に「メニューを保存」を押すことで反映されます。

ブロックテーマの場合は、サイトエディターでヘッダー内のナビゲーションブロックを編集します。メニュー項目を追加したり、順番を入れ替えたりして保存します。

メニューは増やしすぎると見づらくなります。重要なページに絞って配置しましょう。

5-2. 固定ページ・投稿・カテゴリーをメニューに追加する方法

固定ページをメニューに追加する場合は、「外観」から「メニュー」を開き、左側の「固定ページ」から追加したいページにチェックを入れて「メニューに追加」をクリックします。

投稿を追加したい場合は、「投稿」タブから記事を選びます。ただし、個別記事をヘッダーに入れすぎるとメニューが複雑になるため、基本的には重要な記事やまとめ記事だけにするとよいでしょう。

カテゴリーを追加すると、そのカテゴリーに属する記事一覧へ誘導できます。ブログやメディアサイトでは、「WordPress」「SEO」「Web制作」などのカテゴリーをメニューに入れると便利です。

外部サイトや任意のURLへリンクしたい場合は、「カスタムリンク」を使います。URLとリンク文字列を入力して追加すれば、自由なリンクをメニューに設置できます。

5-3. ドロップダウンメニューを作成する方法

ドロップダウンメニューは、親メニューの下に子メニューを表示する形式です。メニュー項目が多い場合でも、階層化することで整理できます。

クラシックテーマでは、「外観」から「メニュー」を開き、子メニューにしたい項目を親メニューの少し右下へドラッグします。インデントされた状態になれば、親子関係が設定されています。

たとえば「サービス」を親メニューにして、その下に「Web制作」「SEO対策」「保守管理」を配置するような使い方ができます。

ただし、階層を深くしすぎるとスマホで操作しにくくなります。基本的には2階層までに抑えるのがおすすめです。

5-4. グローバルナビとフッターメニューの違い

グローバルナビとは、主にヘッダーに表示される主要メニューのことです。サイト内で特に重要なページへ誘導する役割があります。

一方、フッターメニューはページ下部に表示されるメニューです。会社概要、プライバシーポリシー、特定商取引法に基づく表記、利用規約など、補足的なページを配置することが多いです。

ヘッダーにはユーザーが頻繁に見るページ、フッターには必要に応じて確認するページを配置すると、サイト全体が使いやすくなります。

すべてのページをヘッダーに詰め込むのではなく、役割に応じて配置場所を分けることが大切です。

5-5. メニューが表示されないときの確認ポイント

メニューが表示されない場合は、まずメニューの表示位置が設定されているか確認しましょう。クラシックテーマでは、「外観」から「メニュー」を開き、「メニュー設定」で表示位置にチェックを入れる必要があります。

次に、テーマがそのメニュー位置に対応しているか確認します。テーマによっては、ヘッダー用メニュー、フッター用メニュー、スマホ用メニューなどが分かれていることがあります。

ブロックテーマの場合は、ヘッダー内にナビゲーションブロックが配置されているか確認します。ナビゲーションブロックが削除されていると、メニューは表示されません。

また、CSSで非表示になっている、キャッシュが残っている、プラグインが干渉しているといった原因も考えられます。

6. WordPressヘッダーのデザインをカスタマイズする方法

ヘッダーのデザインを整えると、サイト全体の印象が大きく変わります。色、余白、フォント、配置を見直すだけでも、見やすさや信頼感が向上します。

6-1. 背景色・文字色・フォントを変更する方法

ヘッダーの背景色や文字色は、テーマ設定やカスタマイザーから変更できる場合があります。「外観」から「カスタマイズ」を開き、「色」「ヘッダー設定」「デザイン設定」などの項目を確認しましょう。

ブロックテーマの場合は、サイトエディターでヘッダー部分を選択し、スタイル設定から背景色や文字色を変更できます。

フォントについても、テーマによっては管理画面から変更できます。日本語サイトでは、読みやすいゴシック体がよく使われます。装飾の強いフォントを使いすぎると、メニューが読みにくくなるため注意しましょう。

色を変更する際は、背景色と文字色のコントラストをしっかり確保することが大切です。見た目がおしゃれでも、文字が読みにくいとユーザーに負担を与えてしまいます。

6-2. ヘッダーの高さや余白を調整する方法

ヘッダーの高さや余白は、サイトの見やすさに大きく影響します。高さがありすぎると、ファーストビューのコンテンツが下に押し下げられます。反対に狭すぎると、ロゴやメニューが窮屈に見えます。

テーマ設定で「ヘッダーの高さ」「ロゴサイズ」「余白」などを変更できる場合は、まずそこから調整しましょう。

CSSで調整する場合は、paddingやheightを使います。

CSS
.site-header {
  padding-top: 16px;
  padding-bottom: 16px;
}

固定値でheightを指定すると、スマホ表示で崩れることがあります。できるだけpaddingで自然に高さを調整する方が扱いやすいです。

6-3. 追加CSSでデザインを変更する基本

追加CSSは、WordPress管理画面からCSSを追記できる機能です。「外観」から「カスタマイズ」を開き、「追加CSS」にコードを入力します。ブロックテーマでも、スタイル設定や追加CSS機能を使える場合があります。

追加CSSを使うと、ヘッダーの背景色、文字サイズ、余白、ロゴサイズ、固定表示などを調整できます。

たとえば、ヘッダーの背景色を変更したい場合は次のように書きます。

CSS
.site-header {
  background-color: #ffffff;
}

ただし、CSSのクラス名はテーマによって異なります。上記のコードがそのまま効くとは限りません。ブラウザの検証ツールで対象のクラス名を確認しながら調整しましょう。

6-4. テーマ設定でできる範囲とCSSが必要な範囲

初心者は、まずテーマ設定で変更できる範囲を確認するのがおすすめです。ロゴ、色、メニュー、ヘッダー固定、スマホメニューなどは、テーマによっては管理画面だけで設定できます。

一方で、細かな余白調整、特定のメニューだけ色を変える、スクロール後にヘッダーサイズを変える、独自のアニメーションを加えるといった変更は、CSSやJavaScriptが必要になることがあります。

無理にコード編集を行う前に、テーマの公式マニュアルや設定画面を確認しましょう。テーマ側に用意されている機能を使う方が、安全で更新にも強い場合が多いです。

6-5. デザイン変更後にスマホ表示を確認する方法

ヘッダーを編集したら、必ずスマホ表示を確認しましょう。パソコンではきれいに見えても、スマホではメニューが折り返したり、ロゴが大きすぎたりすることがあります。

確認方法としては、WordPressのカスタマイザーやサイトエディターにあるプレビュー切り替えを使う方法があります。パソコン、タブレット、スマホの表示を切り替えながら確認できます。

さらに、実際のスマートフォンでも確認するのがおすすめです。特にメニューの開閉、タップしやすさ、固定ヘッダーの高さ、ロゴの見え方は実機で確認すると問題に気づきやすくなります。

7. WordPressヘッダーを固定表示する方法

固定ヘッダーとは、ページを下にスクロールしてもヘッダーが画面上部に残る表示方法です。メニューへすぐアクセスできるため、ユーザーの利便性を高められます。

7-1. 固定ヘッダーとは？メリットとデメリット

固定ヘッダーのメリットは、どの位置を読んでいてもメニューや問い合わせボタンへすぐ移動できることです。特に長い記事やサービスページでは、ユーザーが迷わず次の行動を取りやすくなります。

一方で、デメリットもあります。ヘッダーが常に画面上に表示されるため、本文エリアが狭く感じられることがあります。スマホでは特に画面が小さいため、固定ヘッダーが大きすぎると読みづらくなります。

固定ヘッダーを使う場合は、高さを抑え、必要な要素だけを表示することが大切です。

7-2. テーマ機能でヘッダーを固定する方法

多くのWordPressテーマには、ヘッダーを固定する機能が用意されています。テーマ設定やカスタマイザー内に「固定ヘッダー」「追従ヘッダー」「Sticky Header」などの項目がないか確認しましょう。

設定項目がある場合は、有効化するだけで固定表示できます。テーマによっては、パソコンのみ固定、スマホのみ固定、スクロール時だけ表示、ロゴサイズを縮小するなど、細かな設定ができることもあります。

CSSを使う前に、まずはテーマ機能で対応できるか確認するのがおすすめです。テーマ機能を使う方が、レイアウト崩れやスマホ表示の問題が起きにくい場合があります。

7-3. CSSでヘッダーを固定表示する方法

テーマに固定ヘッダー機能がない場合は、CSSで設定できます。基本的には、ヘッダーにposition: fixedを指定します。

CSS
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

このコードにより、ヘッダーが画面上部に固定されます。ただし、テーマによってクラス名が異なるため、.site-headerの部分は使用中テーマに合わせて変更してください。

また、背景色を指定しないと、本文と重なって見づらくなることがあります。

CSS
.site-header {
  background-color: #ffffff;
}

固定表示を設定したら、パソコンとスマホの両方で表示を確認しましょう。

7-4. 固定ヘッダーで本文が隠れるときの対処法

固定ヘッダーを設定すると、本文の上部がヘッダーの下に隠れてしまうことがあります。これは、ヘッダーが通常のレイアウトの流れから外れて固定されるためです。

対処法として、本文側に上余白を追加します。

CSS
body {
  padding-top: 80px;
}

ヘッダーの高さが80pxなら、bodyに同じ程度のpadding-topを設定します。ただし、管理バーが表示されているログイン中と、一般ユーザーの表示では見え方が変わることがあります。

スマホではヘッダーの高さが変わる場合もあるため、メディアクエリを使って調整します。

CSS
@media screen and (max-width: 768px) {
  body {
    padding-top: 64px;
  }
}

実際のヘッダー高さに合わせて数値を調整しましょう。

7-5. スマホで固定ヘッダーを使う際の注意点

スマホで固定ヘッダーを使う場合は、画面を圧迫しないことが重要です。ロゴ、メニュー、ボタンをすべて表示すると、ヘッダーが高くなりすぎることがあります。

スマホでは、ロゴとハンバーガーメニューだけにする、CTAボタンは別の位置に配置する、スクロール時にヘッダーを小さくするなどの工夫が有効です。

また、固定ヘッダーがあると、ページ内リンクで移動したときに見出しが隠れることがあります。その場合は、scroll-margin-topを設定すると改善できます。

CSS
h2, h3 {
  scroll-margin-top: 90px;
}

スマホではユーザーの閲覧スペースを確保することを最優先に考えましょう。

8. WordPressヘッダーをプラグインで編集する方法

コードを書かずにヘッダーを編集したい場合は、プラグインを使う方法もあります。特に、独自デザインのヘッダーを作りたい場合や、テーマ機能だけでは足りない場合に便利です。

8-1. プラグインを使うべきケース

プラグインを使うべきケースは、テーマにヘッダー編集機能が少ない場合、コード編集に不安がある場合、デザイン性の高いヘッダーを作りたい場合です。

また、ページごとに異なるヘッダーを表示したい、CTAボタンや検索フォームを柔軟に配置したい、ドラッグ＆ドロップで編集したいといった場合にもプラグインが役立ちます。

ただし、プラグインを入れすぎると表示速度が遅くなったり、他のプラグインやテーマと競合したりすることがあります。必要な機能を明確にしたうえで導入しましょう。

8-2. ヘッダー編集に使える主なプラグイン

ヘッダー編集でよく使われるプラグインには、ページビルダー系、ヘッダー・フッター編集系、コード追加系があります。

ページビルダー系では、Elementorなどを使うことで、ドラッグ＆ドロップでヘッダーを作成できます。ロゴ、メニュー、ボタン、アイコンなどを自由に配置しやすいのが特徴です。

ヘッダー・フッター編集系のプラグインでは、テーマに直接コードを書かずに、ヘッダー内へタグやスクリプトを追加できます。アクセス解析タグや広告タグ、認証タグを追加したい場合に便利です。

ただし、デザイン編集用のプラグインとコード追加用のプラグインは目的が異なります。ヘッダーの見た目を変えたいのか、ヘッダー内にコードを追加したいのかを分けて考えましょう。

8-3. Elementorなどページビルダーで編集する方法

Elementorなどのページビルダーを使うと、ヘッダーを視覚的に編集できます。専用のテーマビルダー機能を使えば、ロゴ、ナビゲーション、ボタンなどを自由に配置したヘッダーを作成できます。

基本的な流れは、テンプレート作成画面でヘッダーを新規作成し、必要なウィジェットを配置します。ロゴ、メニュー、ボタン、検索フォームなどを追加し、表示条件を設定して保存します。

ページビルダーを使うメリットは、コードを書かずにデザインを作り込めることです。一方で、機能が多い分、表示速度や管理のしやすさに注意が必要です。

シンプルなヘッダーで十分な場合は、テーマ標準機能の方が軽くて扱いやすいこともあります。

8-4. プラグイン利用時の表示速度と互換性の注意点

プラグインでヘッダーを編集する場合は、表示速度への影響を確認しましょう。特にページビルダーは便利ですが、読み込むCSSやJavaScriptが増えることがあります。

また、テーマとの相性によっては、メニューが二重に表示されたり、スマホメニューが正常に動かなかったりすることがあります。導入後は、パソコンとスマホの両方で表示確認を行いましょう。

不要になったプラグインは停止するだけでなく、問題がなければ削除することも検討してください。使っていないプラグインを残しておくと、管理やセキュリティの面でリスクになります。

9. WordPressヘッダーをコードで編集する方法

より細かくヘッダーをカスタマイズしたい場合は、コード編集が必要になることがあります。ただし、コード編集はミスをするとサイト全体に影響するため、慎重に行いましょう。

9-1. header.phpを編集する前に知っておくべきこと

header.phpは、WordPressテーマのヘッダー部分を構成する重要なテンプレートファイルです。多くの場合、headタグ、ロゴ、ナビゲーション、ヘッダー周辺のHTMLが含まれています。

header.phpを直接編集すると、ヘッダーの構造を自由に変更できます。しかし、記述ミスがあるとサイトが表示されなくなったり、デザインが大きく崩れたりする可能性があります。

また、親テーマのheader.phpを直接編集すると、テーマ更新時に変更内容が消えることがあります。そのため、コード編集を行う場合は子テーマを使うのが基本です。

9-2. 子テーマでheader.phpを安全に編集する方法

子テーマでheader.phpを編集する場合は、親テーマのheader.phpを子テーマフォルダにコピーしてから編集します。WordPressは子テーマ内に同名のテンプレートファイルがある場合、そちらを優先して読み込みます。

作業前には必ずバックアップを取り、元のheader.phpの内容を保存しておきましょう。編集は一度に大きく変えるのではなく、少しずつ変更して表示確認するのが安全です。

管理画面のテーマファイルエディターから編集することもできますが、エラー時に復旧しづらい場合があります。可能であればFTPソフトやサーバーのファイルマネージャーを使い、元に戻せる状態で作業しましょう。

9-3. ヘッダーにHTML・CSS・JavaScriptを追加する方法

ヘッダーにHTMLを追加したい場合は、header.php内の適切な位置に記述します。たとえば、ロゴの横にボタンを追加したい場合は、ヘッダー内のナビゲーション付近にHTMLを追加します。

CSSは、style.cssや追加CSSに記述します。テーマファイルに直接styleタグを書くよりも、CSSファイルや追加CSSで管理する方が整理しやすいです。

JavaScriptを追加する場合は、header.phpに直接scriptタグを書く方法もありますが、WordPressではfunctions.phpから読み込む方法が推奨されます。アクセス解析タグや認証タグなどをhead内に追加するだけなら、専用プラグインを使う方が安全です。

コードを追加するときは、どの目的でどこに追加するのかを明確にしましょう。

9-4. テーマ更新で編集内容を消さないための対策

テーマ更新で編集内容を消さないためには、親テーマを直接編集しないことが重要です。子テーマを使えば、親テーマを更新しても子テーマ側の変更内容は残ります。

また、CSSだけの変更であれば、追加CSSに記述する方法もあります。追加CSSはテーマ更新の影響を受けにくいため、軽微なデザイン調整に向いています。

プラグインを使ってコードを追加している場合も、テーマ更新の影響を受けにくいです。特にアクセス解析タグや広告タグなどは、テーマファイルに直接書くよりも、コード管理プラグインを使った方が管理しやすくなります。

9-5. コード編集後にエラーが出た場合の戻し方

コード編集後にエラーが出た場合は、まず直前に編集した箇所を元に戻します。バックアップしておいたファイルに差し替えるのが最も確実です。

管理画面に入れない場合は、FTPソフトやサーバーのファイルマネージャーから該当ファイルを編集します。子テーマのheader.phpが原因であれば、一時的にファイル名を変更して読み込まれないようにする方法もあります。

CSSのミスでレイアウトが崩れた場合は、追加CSSの該当部分を削除します。JavaScriptのエラーでメニューが動かない場合は、追加したスクリプトを外して確認しましょう。

原因がわからない場合は、変更した箇所を一つずつ戻しながら確認するのが基本です。

10. WordPressヘッダー編集でよくあるトラブルと解決策

WordPressヘッダー編集では、画像が反映されない、メニューが崩れる、スマホだけ表示がおかしいなどのトラブルがよくあります。原因を順番に確認すれば、多くの場合は解決できます。

10-1. ヘッダー画像やロゴが反映されない

ヘッダー画像やロゴが反映されない場合は、まず保存や公開が完了しているか確認しましょう。カスタマイザーやサイトエディターでは、変更後に保存ボタンを押さないと公開されません。

次に、キャッシュを確認します。ブラウザキャッシュ、キャッシュ系プラグイン、サーバーキャッシュ、CDNキャッシュが残っていると、古い画像が表示されることがあります。

また、画像ファイル名が同じだと、ブラウザが古い画像を読み込んでしまうことがあります。新しいファイル名でアップロードするか、キャッシュを削除して確認しましょう。

10-2. メニューが表示されない・崩れる

メニューが表示されない場合は、メニューの表示位置が正しく設定されているか確認します。クラシックテーマでは、メニュー作成後に「ヘッダーメニュー」などの表示位置を指定する必要があります。

メニューが崩れる場合は、項目数が多すぎることがあります。ヘッダーの横幅に収まらないほどメニューを入れると、折り返しや重なりが発生します。

対策として、メニュー項目を減らす、短い名称にする、ドロップダウンで整理する、スマホ表示ではハンバーガーメニューにするなどが有効です。

10-3. スマホ表示だけレイアウトが崩れる

スマホ表示だけ崩れる場合は、レスポンシブ対応が不十分な可能性があります。ロゴ画像が大きすぎる、メニュー項目が多すぎる、固定幅のCSSを指定しているといった原因がよくあります。

CSSでwidthを固定している場合は、max-widthやwidth: 100%を使うと改善しやすくなります。画像にはheight: autoを指定すると、縦横比を保ったまま縮小されます。

CSS
.site-logo img {
  max-width: 180px;
  height: auto;
}

スマホ用のCSSは、メディアクエリで分けて指定します。

CSS
@media screen and (max-width: 768px) {
  .site-header {
    padding: 12px;
  }
}

10-4. 変更したのにキャッシュで反映されない

WordPressでは、変更した内容がすぐに反映されないことがあります。原因として多いのがキャッシュです。

まず、ブラウザの更新を行います。それでも反映されない場合は、ブラウザキャッシュを削除するか、シークレットウィンドウで確認します。

次に、キャッシュ系プラグインを使っている場合は、プラグインのキャッシュを削除します。サーバー側にキャッシュ機能がある場合は、サーバー管理画面から削除が必要なこともあります。

CDNを使っている場合は、CDN側のキャッシュも確認しましょう。複数のキャッシュが重なっていると、反映までに時間がかかることがあります。

10-5. テーマ変更後にヘッダー設定が消えた

テーマを変更すると、以前のテーマで設定していたヘッダー内容が引き継がれないことがあります。これは、テーマごとにヘッダー設定やメニュー位置、ロゴ表示の仕組みが異なるためです。

テーマ変更後は、ロゴ、ヘッダー画像、メニュー表示位置、ウィジェット、追加CSSを再確認しましょう。メニュー自体は残っていても、新しいテーマの表示位置に割り当てられていない場合があります。

また、前のテーマ独自の機能で設定していた内容は、新しいテーマでは使えないことがあります。テーマ変更前には、ヘッダーのスクリーンショットや設定内容を控えておくと安心です。

11. WordPressヘッダーを見やすくするコツ

ヘッダーは、ただ情報を詰め込めばよいわけではありません。ユーザーが迷わず目的のページへ進めるように、シンプルでわかりやすい設計にすることが大切です。

11-1. ユーザーが迷わないメニュー数に絞る

ヘッダーメニューは、多すぎると逆に使いにくくなります。重要なページに絞って、5〜7項目程度にまとめると見やすくなります。

企業サイトなら「サービス」「料金」「事例」「会社情報」「お問い合わせ」など、ユーザーが知りたい情報を優先します。ブログなら「カテゴリー」「プロフィール」「おすすめ記事」などを配置するとよいでしょう。

すべてのページをヘッダーに入れる必要はありません。補足的なページはフッターに配置し、ヘッダーは主要導線に絞るのが基本です。

11-2. ロゴ・メニュー・CTAボタンの配置を整える

ヘッダーでは、ロゴ、メニュー、CTAボタンの配置バランスが重要です。一般的には、左にロゴ、中央または右にメニュー、右端に問い合わせボタンを配置するパターンが多く使われます。

CTAボタンとは、「お問い合わせ」「無料相談」「資料請求」など、ユーザーに行動してもらうためのボタンです。ビジネスサイトでは、ヘッダーにCTAボタンを設置することでコンバージョンにつながりやすくなります。

ただし、ボタンを目立たせすぎると圧迫感が出ることもあります。サイト全体のデザインに合わせて、自然に目に入る配置にしましょう。

11-3. ファーストビューを邪魔しない高さにする

ヘッダーが高すぎると、ページを開いたときに本文やメインビジュアルが見えにくくなります。特にスマホでは画面の縦幅が限られているため、ヘッダーの高さに注意が必要です。

ロゴを大きくしすぎない、上下の余白を取りすぎない、メニューを詰め込みすぎないことがポイントです。

固定ヘッダーにする場合は、さらに高さを抑えましょう。常に画面に表示されるため、少しの高さの違いでも読みやすさに影響します。

11-4. サイトの目的に合わせてヘッダーを設計する

ヘッダーの設計は、サイトの目的に合わせて考える必要があります。

ブログであれば、カテゴリーや人気記事へ誘導するメニューが重要です。企業サイトであれば、サービス内容、実績、問い合わせへの導線が重要になります。ECサイトであれば、商品カテゴリー、検索、カート、ログインなどが必要です。

ユーザーにどの行動を取ってほしいのかを明確にし、その行動につながるメニューやボタンを配置しましょう。

なんとなく見た目だけで決めるのではなく、サイトの目的から逆算してヘッダーを作ることが大切です。

11-5. 表示速度を落とさない画像設定を行う

ヘッダーに大きな画像や重いロゴを使うと、ページの表示速度が遅くなることがあります。特にヘッダーはページ上部に表示されるため、読み込みの遅さがユーザー体験に直結します。

画像は適切なサイズにリサイズし、圧縮してからアップロードしましょう。必要以上に大きな画像を使わないことが重要です。

ロゴはシンプルな画像にし、可能であればWebPなど軽量な形式も検討します。ヘッダー画像を使う場合は、画質を保ちながらファイルサイズを小さくすることを意識しましょう。

12. WordPressヘッダー編集に関するよくある質問

ここでは、WordPressヘッダー編集に関するよくある質問をまとめます。

12-1. WordPressのヘッダーはどこから編集できますか？

WordPressのヘッダーは、使用しているテーマによって編集場所が異なります。クラシックテーマでは「外観」から「カスタマイズ」や「メニュー」を開いて編集することが多いです。

ブロックテーマでは、「外観」から「エディター」を開き、サイトエディターでヘッダーを編集します。

また、有料テーマや高機能テーマでは、独自のテーマ設定画面からヘッダーを編集できる場合もあります。まずは「外観」メニュー内にある項目を確認しましょう。

12-2. ヘッダー画像の推奨サイズはありますか？

ヘッダー画像の推奨サイズはテーマによって異なります。一般的には、横幅1200px〜1920px程度、縦幅300px〜600px程度が目安です。

ただし、メインビジュアルのように大きく表示する場合や、スマホ用に別画像を用意する場合は、適切なサイズが変わります。

画像は大きすぎると表示速度が遅くなるため、実際の表示サイズに合わせてリサイズし、圧縮してから使いましょう。

12-3. ヘッダーを固定表示するにはどうすればいいですか？

ヘッダーを固定表示するには、テーマ機能を使う方法、プラグインを使う方法、CSSで設定する方法があります。

まずはテーマ設定に「固定ヘッダー」や「追従ヘッダー」の項目がないか確認しましょう。テーマ機能で対応できる場合は、それが最も簡単です。

CSSで設定する場合は、ヘッダーにposition: fixedを指定します。ただし、本文が隠れる場合があるため、bodyに上余白を追加するなどの調整が必要です。

12-4. スマホだけヘッダーを変えることはできますか？

スマホだけヘッダーを変えることは可能です。テーマによっては、スマホ用ロゴ、スマホメニュー、モバイルヘッダーの設定が用意されています。

CSSを使う場合は、メディアクエリを使ってスマホ表示だけデザインを変更できます。

CSS
@media screen and (max-width: 768px) {
  .site-header {
    padding: 10px;
  }
}

スマホでは、メニュー項目を減らしたり、ハンバーガーメニューにしたりして、操作しやすいヘッダーにすることが大切です。

12-5. ヘッダー編集にはプラグインとCSSのどちらがおすすめですか？

簡単にデザインを変更したい場合や、コードに不安がある場合はプラグインが便利です。特にドラッグ＆ドロップで編集したい場合は、ページビルダー系プラグインが役立ちます。

一方で、背景色、余白、ロゴサイズなどの軽微な調整であれば、追加CSSの方がシンプルです。プラグインを増やさずに済むため、表示速度や管理面でも有利な場合があります。

初心者は、まずテーマ設定でできる範囲を確認し、次に追加CSS、必要に応じてプラグインを検討する流れがおすすめです。

まとめ

WordPressヘッダーは、サイトの第一印象と使いやすさを左右する重要なパーツです。ロゴ、ヘッダー画像、メニュー、背景色、固定表示などを適切に編集することで、ユーザーが目的の情報へたどり着きやすいサイトになります。

編集方法は、使用しているテーマによって異なります。クラシックテーマではカスタマイザーやメニュー設定、ブロックテーマではサイトエディターを使うのが基本です。細かなデザイン調整には追加CSS、より自由な編集にはプラグインやコード編集を使う方法もあります。

ただし、ヘッダーは全ページに影響するため、作業前にはバックアップを取り、変更後はパソコンとスマホの両方で表示を確認しましょう。特にスマホ表示、メニューの操作性、画像の読み込み速度、固定ヘッダーの高さには注意が必要です。

WordPressヘッダーを編集するときは、見た目だけでなく、ユーザーが迷わず行動できるかを意識することが大切です。サイトの目的に合わせて、シンプルでわかりやすいヘッダーを作成しましょう。