WordPressサイトを整えようとして、最初に気になりやすいのがヘッダーとフッターです。ヘッダーはページ上部でサイト名や主要な案内を伝え、フッターはページ下部で補足情報や運営情報への導線をまとめます。どちらも多くのページに共通して表示されるため、少し変更しただけでもサイト全体の印象や使いやすさに影響します。
ただし、WordPressでは使用中のテーマによって編集画面が異なります。ブロックテーマではサイトエディターからヘッダーやフッターの「テンプレートパーツ」を編集するのが基本です。クラシックテーマではカスタマイザー、ウィジェット、メニュー、テーマ独自の設定画面などを使います。まず編集方式を見分け、変更前の状態を残し、小さく直して確認することが失敗を防ぐ近道です。
この記事では、初心者がヘッダーとフッターを安全に整えるための考え方と手順を、ブロックテーマとクラシックテーマに分けて解説します。テーマファイルを直接編集する方法ではなく、管理画面からできる範囲を中心に扱います。
ヘッダーとフッターの役割を先に整理する
見た目を変える前に、それぞれの役割を決めておくと、必要な要素と不要な要素を判断しやすくなります。装飾を増やすことよりも、訪問者が迷わず情報へ移動できることを優先しましょう。
ヘッダーは現在地と主要な移動先を伝える
ヘッダーには、サイト名またはロゴ、主要メニュー、必要に応じて問い合わせなどの重要な導線を置きます。最初に目に入りやすい場所ですが、すべてのリンクを詰め込む場所ではありません。項目が多すぎると、かえって重要な導線が見つかりにくくなります。
まずは「このサイトは何についてのサイトか」「初めて来た人に次に見てほしいページはどこか」を基準に要素を選びます。ブログなら記事カテゴリーやプロフィール、事業サイトならサービス概要や実績など、サイトの目的によって優先順位は変わります。
フッターは補足情報と安心材料をまとめる
フッターは、ページを読み終えた人が次に確認したい情報をまとめる場所です。運営者情報、プライバシーポリシー、サイト内の主要ページ、著作権表記などが候補になります。ヘッダーと同じリンクをすべて繰り返す必要はありません。
ヘッダーを簡潔に保ち、利用頻度が低いものの必要な情報をフッターへ回すと、役割を分けやすくなります。ただし、実際に存在しないページや準備中のページへのリンクは置かないようにします。
変更前に確認しておきたいこと
ヘッダーとフッターは複数ページで共通利用されることが多いため、編集の影響範囲が広くなります。作業を始める前に、現在の状態と戻し方を確認しましょう。
使用中のテーマを確認する
管理画面の「外観」から、使用中のテーマ名を確認します。そのうえで「外観」に「エディター」が表示されるかを見ます。WordPress公式ドキュメントによると、サイトエディターはブロックテーマを有効化している場合に利用できます。エディターがある場合はブロックテーマの可能性が高く、ヘッダーとフッターはテンプレートパーツとして編集するのが基本です。
一方、「外観」に「カスタマイズ」や「ウィジェット」があり、サイトエディターがない場合は、クラシックテーマの操作方法を確認します。テーマによっては独自メニューが追加されているため、一般的な手順と画面が一致しないこともあります。
現在の状態を記録する
変更前にパソコン表示とスマートフォン表示のスクリーンショットを撮ります。ヘッダーの高さ、ロゴの大きさ、メニューの並び、フッターの列数やリンクを記録しておくと、変更後の比較や復旧がしやすくなります。
ブロックテーマでは、保存時に変更対象となるテンプレートやテンプレートパーツが表示されます。複数の箇所を同時に編集した場合は、意図したものだけが保存対象になっているか確認してください。
バックアップと作業時間を確保する
小さな見た目の変更でも、サイト全体に反映される可能性があります。テーマや設定のバックアップ方法を確認し、アクセスが比較的少ない時間に作業すると安心です。大幅な変更は、可能であればステージング環境や複製環境で試してから本番へ反映します。
最初に完成イメージを簡単に決める
編集画面を開いてから考え始めると、色や余白を何度も変えて作業が長引きます。紙やメモに、必要な要素と並び順だけを書き出しておきましょう。
ヘッダーは、左側にサイト名、右側に主要メニューという基本形から始めると整理しやすくなります。フッターは、サイト情報、補助リンク、運営情報など、役割の近い項目をまとめます。スマートフォンでは横幅が狭くなるため、横並びを前提にしすぎないことも重要です。
色はサイト全体で使っている基本色とアクセント色を中心にし、ヘッダーとフッターだけが別のサイトのように見えないようにします。文字の大きさや余白も、本文やボタンとの統一感を意識します。
ブロックテーマでヘッダーを整える手順
ブロックテーマでは、管理画面の「外観」から「エディター」を開きます。公式ドキュメントでは、テンプレートパーツはヘッダーやフッターなど、サイト内で繰り返し使う領域を管理するための仕組みと説明されています。テンプレートパーツ内の変更は、それを使用する各テンプレートへ反映されます。
ヘッダーのテンプレートパーツを開く
サイトエディターを開き、「パターン」から「テンプレートパーツ」へ進み、ヘッダーを選択します。テーマやWordPressのバージョンによって項目名や配置が少し異なる場合があります。ホーム画面のプレビューからヘッダー部分を選び、編集画面へ進めるテーマもあります。
編集対象をクリックしにくいときは、リスト表示を使います。グループ、行、サイトタイトル、ナビゲーションなどの階層が見えるため、親のグループと中の要素を区別しやすくなります。
サイト名やロゴを確認する
サイトタイトルブロックまたはサイトロゴブロックを選び、表示内容、リンク、サイズを確認します。ロゴ画像を大きくしすぎるとヘッダーが高くなり、スマートフォンで本文が見え始める位置が下がります。まずは読み取れる最小限の大きさから調整します。
ロゴ画像にサイト名が含まれている場合、隣に同じサイト名を重ねて表示すると情報が重複します。ブランド名を文字でも残す必要があるか、視覚的なバランスとアクセシビリティの両方から判断します。
ナビゲーションを必要な項目に絞る
ナビゲーションブロックを選び、現在のリンクを確認します。重要度の高いページを先にし、名称を短く統一します。「こちら」「詳しく」など内容が分からない名前ではなく、移動先が想像できる表現にします。
階層を深くしすぎると、スマートフォンのメニューが操作しにくくなります。最初は一段階のメニューを基本にし、本当に必要な場合だけサブメニューを使います。メニュー構成そのものを大きく変更する場合は、今回のヘッダー調整とは分けて確認すると原因を追いやすくなります。
配置と余白を調整する
ヘッダー全体を囲むグループまたは行ブロックを選び、配置、内側余白、ブロック間隔を調整します。個々のブロックだけを動かすより、親ブロックのレイアウト設定を確認するほうが整いやすい場合があります。
左右に要素を分けたい場合は、両端揃えに相当する配置を使います。狭い画面で無理に横並びを維持せず、ナビゲーションがメニューボタンへ切り替わる状態もプレビューで確認します。
ブロックテーマでフッターを整える手順
サイトエディターの「パターン」から「テンプレートパーツ」を開き、フッターを選択します。テーマが複数のフッターパターンを用意している場合、既存パターンへ置き換えられることがあります。ただし、置き換える前に現在のリンクや文章を記録しておきましょう。
情報を役割ごとにまとめる
フッター内のブロックをリスト表示で確認し、同じ役割の情報をグループ化します。サイト名と短い説明、主要リンク、運営に必要なリンク、著作権表記などに分けると見通しが良くなります。
リンクを増やしすぎると、フッターが長くなり、重要な項目が埋もれます。ページが存在し、訪問者が実際に使う可能性があるリンクだけを残します。ヘッダーと完全に同じ一覧を複製するより、補助的な導線として整理するほうが役割が明確です。
列と余白を整える
カラムまたはグループブロックを使っている場合、列ごとの内容量が大きく偏っていないか確認します。短いリンク一覧と長い説明文を同じ幅で並べると、不自然な空白が生じることがあります。内容量に応じて列数を減らすことも選択肢です。
フッターの上下余白は、本文との区切りが分かる程度に確保します。背景色を濃くする場合は、文字とリンクのコントラストを保ちます。リンクを色だけで区別しにくいときは、下線や十分な間隔も検討します。
著作権表記を簡潔にする
著作権表記は短く、サイト名との関係が分かる形にします。年の自動更新機能はテーマやブロックによって異なるため、無理にコードを追加せず、管理できる方法を選びます。更新が必要な形式にする場合は、年始の運用項目として記録しておきます。
クラシックテーマで整える手順
クラシックテーマでは、ヘッダーとフッターの編集場所がテーマごとに異なります。まず「外観」の「カスタマイズ」「ウィジェット」「メニュー」を確認し、テーマ独自の設定項目があれば公式マニュアルも参照します。
カスタマイザーで変更箇所を探す
「外観」から「カスタマイズ」を開き、サイト基本情報、ヘッダー、メニュー、ウィジェット、フッターなどの項目を確認します。WordPress公式ドキュメントでは、カスタマイザーはテーマが対応している範囲で変更をプレビューしてから公開できる仕組みとされています。
すべてのテーマに同じ項目があるわけではありません。設定が見つからないからといって、すぐにテーマファイルを編集するのは避けます。テーマ独自の管理画面やマニュアルに該当機能がないか確認してください。
ヘッダーのメニュー位置を確認する
「外観」の「メニュー」またはカスタマイザー内のメニュー設定で、表示位置を確認します。テーマによってはメインメニュー、ヘッダーメニュー、フッターメニューなど複数の位置があります。編集したメニューが正しい表示位置へ割り当てられているか確認します。
メニュー項目を並べ替えたら保存し、パソコンとスマートフォンの両方で開閉を試します。リンク先が正しいことも一件ずつ確認します。
フッターウィジェットを整理する
「外観」の「ウィジェット」またはカスタマイザー内のウィジェット設定から、フッター用の領域を探します。テーマによってはフッターが複数列に分かれ、それぞれ別のウィジェットエリアになっています。
使っていないウィジェット、古いリンク、重複する説明を整理し、保存後に表示を確認します。何も入れていない列が余白として残る場合は、テーマの列数設定やウィジェット配置を見直します。
見やすいヘッダーにする改善ポイント
高さを抑えて本文を早く見せる
ヘッダーが高すぎると、スマートフォンで本文がほとんど見えない状態になります。ロゴ、上下余白、メニューの高さを順に確認し、必要以上に大きな要素を減らします。固定表示を使っている場合は、スクロール中に画面を覆いすぎないかも確認します。
主要な導線を限定する
すべての固定ページやカテゴリーをヘッダーに並べる必要はありません。初めての訪問者がよく使う移動先を優先し、補足的なリンクはフッターやページ本文へ移します。表記の長さと語尾をそろえるだけでも見た目が整います。
現在地を見失わせない
サイト名やロゴからトップページへ戻れること、メニュー名と移動先の内容が一致することを確認します。ロゴだけではサイト名が伝わりにくい場合は、周辺の説明やページタイトルとの組み合わせも見直します。
使いやすいフッターにする改善ポイント
読み終えた後の行動を想定する
記事を読み終えた人が、別の記事を探したいのか、運営者を確認したいのか、利用条件を確認したいのかを考えます。そのうえで必要な導線だけを残します。ページ最下部に到達した人へ多数の選択肢を見せるより、整理された少数の導線を用意するほうが迷いにくくなります。
古い情報を残さない
フッターは全ページに表示されるため、古い営業時間、使っていないSNS、存在しないページなどが残ると影響が広がります。定期的にリンク切れと表示内容を点検します。
スマートフォンで押しやすくする
リンク同士が近すぎると、意図しない項目をタップしやすくなります。文字を小さくしすぎず、行間と項目間の余白を確保します。複数列のフッターがスマートフォンで一列になる場合、並び順が自然かも確認してください。
保存前後に確認するチェック項目
編集画面のプレビューだけで作業を終えず、実際のサイトを別タブや別端末で確認します。ログイン中だけ表示が違う場合もあるため、可能ならシークレットウィンドウでも確認します。
- トップページ、投稿、固定ページでヘッダーとフッターが表示される
- サイト名またはロゴからトップページへ戻れる
- メニューとフッターのリンク先が正しい
- パソコンとスマートフォンで文字や要素が重ならない
- スマートフォンのメニューボタンが開閉できる
- 長いページをスクロールしても固定ヘッダーが邪魔にならない
- フッターの文字と背景に十分な見分けやすさがある
- 準備中や未公開のページへのリンクがない
- 保存対象に意図しないテンプレートやパーツが含まれていない
変更が反映されないときの確認順
保存できているか確認する
最初に編集画面へ戻り、変更が保存済みになっているか確認します。ブロックテーマでは、ヘッダーやフッターだけでなく、ナビゲーションやスタイルが別の保存対象として表示される場合があります。必要な対象を選択せずに保存すると、一部だけ反映されないことがあります。
別のテンプレートパーツを編集していないか確認する
テーマによっては複数のヘッダーやフッターが用意され、ページごとに異なるパーツを使っていることがあります。トップページでは変わったのに投稿ページでは変わらない場合、各テンプレートがどのテンプレートパーツを参照しているか確認します。
キャッシュの影響を切り分ける
ブラウザー、キャッシュ機能、サーバー側のキャッシュなどに古い表示が残ることがあります。まず強制再読み込みやシークレットウィンドウで確認し、それでも変わらない場合にキャッシュ機能の手順を確認します。複数のキャッシュを一度に削除すると原因が分からなくなるため、一つずつ試します。
テーマ独自設定との競合を確認する
テーマ独自のヘッダー設定やフッター設定が優先されることがあります。カスタマイザー、テーマ設定、ウィジェット、テンプレートパーツのどこが実際の表示を管理しているかを確認します。同じ内容を複数箇所へ設定しないことが大切です。
表示が崩れたときの戻し方
崩れた状態で次々と設定を変えると、原因が増えてしまいます。直前に変更した一つの項目を戻し、表示を確認します。ブロックテーマではスタイルのリビジョンやテンプレートのカスタマイズ解除が利用できる場合があります。クラシックテーマではカスタマイザーの変更内容やウィジェット配置を記録と照らし合わせます。
テーマファイルや追加CSSを変更していないのに戻せない場合は、キャッシュを確認し、別端末でも同じかを切り分けます。管理画面へ入れない、画面が真っ白になる、エラーが表示されるなど、単なるレイアウト調整を超える問題が起きた場合は、それ以上変更を重ねず、バックアップと作業記録を用意して管理者や制作担当者へ相談します。
初心者が避けたい編集方法
管理画面の設定だけで実現できる内容に対して、いきなりテーマファイルを直接書き換えるのは避けましょう。テーマ更新で変更が消えることがあり、記述ミスでサイトが表示されなくなる可能性もあります。
インターネット上のコードを意味を理解せずに貼り付けることも危険です。追加CSSで調整する場合も、対象を限定し、元の記述と変更理由を記録します。まずブロック、テーマ設定、余白、配置などの標準機能で解決できないか確認してください。
少ない変更で整える進め方
最初の改善では、ヘッダーの要素を整理し、メニュー名と並びをそろえ、フッターの不要なリンクを減らすだけでも十分です。その後、余白、色、スマートフォン表示の順に調整します。
一度に完成させようとせず、「要素を決める」「並びを整える」「余白を整える」「端末別に確認する」という単位で保存と確認を繰り返します。どの変更がどの結果につながったか分かるため、問題が起きても戻しやすくなります。
ヘッダーとフッターを整えるときのまとめ
WordPressのヘッダーとフッターは、テーマによって編集方法が異なります。ブロックテーマではサイトエディターのテンプレートパーツ、クラシックテーマではカスタマイザー、メニュー、ウィジェット、テーマ独自設定を確認するのが基本です。
変更前の記録を残し、必要な要素を絞り、小さく変更してパソコンとスマートフォンで確認しましょう。ヘッダーは主要な案内、フッターは補足情報という役割を分けると、見た目だけでなく使いやすさも整います。反映されないときは保存対象、使用中のテンプレートパーツ、キャッシュ、テーマ独自設定の順に切り分けると原因を探しやすくなります。
よくある疑問
外観にエディターが表示されません
サイトエディターは、基本的にブロックテーマを有効化している場合に表示されます。表示されないこと自体が故障とは限りません。クラシックテーマを使用している場合は、「外観」の「カスタマイズ」「メニュー」「ウィジェット」と、テーマ独自の設定画面を確認してください。
サイトエディターを使うためだけにテーマを変更すると、ヘッダーとフッター以外のデザインやウィジェット配置にも影響します。現在のテーマで必要な変更ができるなら、無理にテーマを切り替える必要はありません。
ヘッダーを編集したら全ページが変わりますか
共通のヘッダーテンプレートパーツやテーマの共通ヘッダー設定を編集した場合、多くのページへ反映されます。ただし、テーマに複数のヘッダーがあり、ページごとに別のテンプレートを使っていると、一部のページだけ変わらないことがあります。
保存前の確認画面で変更対象を見て、保存後はトップページだけでなく、投稿、固定ページ、カテゴリー一覧など複数の種類のページを確認します。
ヘッダーに問い合わせボタンは必要ですか
必ずしも必要ではありません。訪問者が頻繁に利用する導線で、リンク先のページが公開され、内容が整っている場合に検討します。ブログ中心のサイトなら、記事やカテゴリーへの移動を優先したほうが自然な場合もあります。
ボタンを置く場合も、ヘッダー内のすべてを強調しないようにします。重要な行動を一つに絞り、他のメニュー項目との違いが分かる程度の色や形にすると、視線を誘導しやすくなります。
フッターには何列必要ですか
必要な列数は情報量で決まります。項目が少ないのに三列や四列へ分けると空白が目立ちます。サイト情報、主要リンク、運営情報など、意味のあるまとまりの数を基準にしてください。
スマートフォンでは複数列が縦に積み重なることが多いため、パソコンで整っていてもフッターが長くなりすぎることがあります。列数だけでなく、各列に含めるリンク数も見直します。
テーマの著作権表記を消してもよいですか
テーマやサービスの利用条件によって異なります。管理画面に変更機能があっても、削除や変更が許可されているとは限りません。テーマの公式マニュアルと利用規約を確認し、判断できない場合は提供元へ確認してください。
インターネット上のコードで強制的に非表示にする前に、正規の設定項目や有料版の機能として用意されていないか確認します。
ヘッダーやフッターだけ元に戻せますか
ブロックテーマでは、テンプレートやテンプレートパーツのカスタマイズをリセットできる場合があります。ただし、リセットすると、そのパーツに加えた変更がまとめて失われる可能性があります。実行前に現在の内容を記録してください。
クラシックテーマでは、カスタマイザーやウィジェットの変更履歴が同じように残らない場合があります。変更前のスクリーンショット、設定値のメモ、バックアップが戻すための手掛かりになります。
定期点検で確認したいこと
ヘッダーとフッターは一度整えたら終わりではありません。新しい固定ページを公開したとき、サイトの目的が変わったとき、テーマを更新または変更したときに見直します。リンク先を削除したのにメニューだけ残ることもあるため、公開ページと導線をセットで管理します。
スマートフォンの機種やブラウザーによって折り返し方が変わることがあります。少なくとも一般的なパソコン幅とスマートフォン幅で、ロゴ、メニュー、リンク、余白を確認します。アクセス解析でよく使われている端末が分かる場合は、その環境を優先すると実態に合った点検ができます。
テーマやWordPress本体の更新後は、見た目だけでなくメニューボタンの開閉やリンク操作も試します。問題がなければ、確認日と変更内容を簡単に記録しておくと、次回の点検や担当者への引き継ぎがしやすくなります。
