ヘッダー・フッターを編集する際の注意点
ヘッダー(ページ上部)とフッター(ページ下部)は、サイト内のほぼすべてのページに共通して表示される、いわばサイトの「顔」と「土台」にあたる部分です。メニューの追加、電話番号の変更、バナーの差し替え、コピーライトの年号更新など、運用中に編集する機会も多い箇所でしょう。
ただし、ヘッダー・フッターは1か所の変更がサイト全体に影響するため、通常の記事編集とは異なる注意が必要です。この記事では、サイト運用担当者の方に向けて、ヘッダー・フッターを安全に編集するための注意点を解説します。
なぜヘッダー・フッターの編集は慎重に行うべきなのか
通常の記事や固定ページの編集であれば、影響範囲は基本的にそのページだけです。一方、ヘッダー・フッターは全ページで共通して読み込まれているため、次のようなリスクがあります。
- 誤った編集をすると、サイト全体の表示が崩れる
- リンクの設定ミスがあると、全ページで同じ誤りが表示され続ける
- 編集内容によっては、サイト全体の表示速度や検索エンジンからの評価に影響が出る
影響範囲が広いからこそ、編集前の準備と、編集後の確認が欠かせません。
ヘッダー・フッターの編集方法は、テーマによって異なる
まず押さえておきたいのは、ヘッダー・フッターの編集方法は、使用しているテーマによって大きく異なるという点です。主に次のようなパターンがあります。
| 編集方法 | 特徴 |
|---|---|
| 「外観」→「カスタマイズ」から編集 | 従来型のテーマでよく見られる方式。プレビューを見ながら編集できる |
| 「外観」→「エディター」(サイトエディター)から編集 | ブロックテーマで採用されている方式。ブロックエディタと同じ操作でヘッダー・フッターを編集できる |
| 「外観」→「ウィジェット」「メニュー」から編集 | フッターのウィジェット領域やナビゲーションメニューを個別に編集する方式 |
テーマのファイル(header.php、footer.phpなど)を直接編集 | プログラムの知識が必要。誤るとサイト全体が表示されなくなる可能性がある |
自社サイトがどの方式で作られているかが分からない場合は、むやみに触らず、まず制作会社に確認することをおすすめします。
編集前に必ずやっておきたいこと
1. バックアップを取得する
ヘッダー・フッターの編集は、サイト全体に影響する可能性があるため、作業前にファイル・データベースの両方のバックアップを取得しておきましょう。万が一、編集後に表示が崩れた場合も、バックアップがあれば元の状態に戻せます。
2. 変更前の内容を控えておく
「どこを、どう変更したか」が後から分からなくなると、不具合が起きた際に原因を特定しづらくなります。変更前の内容(文章、リンク先、設定値など)を、メモやスクリーンショットで控えておくと、元に戻す際にも役立ちます。
3. 可能であればテスト環境で確認する
本番サイトで直接編集するのではなく、テスト環境(ステージング環境)で先に動作確認を行うのが理想的です。テスト環境がない場合でも、アクセスが少ない時間帯を選んで作業するなど、影響を最小限に抑える工夫をしましょう。
ヘッダーを編集する際の注意点
メニューの変更は、リンク切れに注意する
ナビゲーションメニューの項目を追加・変更する際は、リンク先のURLが正しいかを必ず確認しましょう。ヘッダーのメニューはすべてのページに表示されるため、1か所の誤りが全ページで発生します。変更後は、実際に各メニュー項目をクリックして、正しいページに移動するかを確認してください。
ロゴ画像を差し替える際は、サイズと比率に気をつける
ロゴ画像を差し替える際、元の画像と縦横比やサイズが大きく異なると、レイアウトが崩れたり、ロゴが小さすぎたり大きすぎたりすることがあります。元の画像と同じサイズ・比率で用意するか、差し替え後のレイアウトを必ず確認しましょう。
スマートフォン表示のメニューも確認する
パソコンで見たときには問題がなくても、スマートフォンで表示した場合のメニュー(ハンバーガーメニューなど)で、項目が崩れていたり、押しにくくなっていたりすることがあります。ヘッダーを編集した後は、必ずスマートフォンの表示でも確認しましょう。
固定表示(スクロール追従)するヘッダーは特に注意する
スクロールしても画面上部に固定されて表示されるヘッダーの場合、高さが大きくなりすぎると、コンテンツの表示領域を圧迫してしまいます。バナーや案内文を追加する際は、ヘッダー全体の高さに影響しないかを確認しましょう。
フッターを編集する際の注意点
会社情報・連絡先を変更する際は、他の掲載箇所との整合性をとる
フッターには、会社名、住所、電話番号、コピーライト表記など、会社情報が掲載されていることが多くあります。これらを変更する場合は、サイト内の他のページ(会社概要、お問い合わせページなど)に掲載されている情報とも整合性が取れているかを確認しましょう。フッターだけ更新して、他のページが古い情報のままになっている、というミスは意外とよくあります。
コピーライトの年号は定期的に更新する
コピーライト表記(「© 2024 〇〇株式会社」など)の年号が古いままになっていると、サイトが更新されていない印象を与えてしまいます。毎年の年号更新を、運用ルールとして決めておくとよいでしょう。年号を自動的に更新する仕組みをあらかじめ組み込んでおくことも可能なため、必要に応じて制作会社に相談してみてください。
プライバシーポリシーなど、必須のリンクが抜けていないか確認する
フッターには、プライバシーポリシーや特定商取引法に基づく表記など、法令上または信頼性の観点から掲載しておきたいリンクを配置することが一般的です。編集の際に、これらのリンクを誤って削除してしまっていないかを確認しましょう。
外部サービスのコード(アクセス解析など)を誤って消さない
フッターには、アクセス解析ツールや広告関連のコードが、目に見えない形で埋め込まれていることがあります。フッターを編集する際に、こうしたコードを誤って消してしまうと、データの計測が止まってしまう可能性があります。内容が分からないコードは、むやみに削除・変更しないようにしましょう。
編集後の確認チェックリスト
ヘッダー・フッターの編集後は、次のような点を確認しましょう。
- トップページ・主要な下層ページで、ヘッダー・フッターが正しく表示されているか
- メニューやフッターのリンクが、すべて正しいページに移動するか
- スマートフォンで表示した場合も、レイアウトが崩れていないか
- 会社情報(住所・電話番号など)が、他のページの掲載内容と一致しているか
- アクセス解析などの計測が、これまで通り機能しているか
トラブルが起きた場合の対応
編集後に表示が崩れたり、サイトが正常に表示されなくなったりした場合は、次のように対応しましょう。
- 直前に変更した内容を元に戻す
- 変更前の内容を控えている場合は、その内容を再入力する
- 元に戻せない場合は、取得しておいたバックアップから復元する
- 原因が分からない場合は、無理に作業を続けず、制作会社に相談する
まとめ
ヘッダー・フッターは、全ページに表示される重要な部分だからこそ、編集前の準備と、編集後の丁寧な確認が欠かせません。
- 使用しているテーマによって、編集方法が異なることを理解しておく
- 編集前には、バックアップの取得と変更前の内容の記録を行う
- ヘッダーは、メニューのリンク切れ・ロゴ画像・スマートフォン表示を確認する
- フッターは、会社情報の整合性・コピーライト・必須リンク・外部コードに注意する
- 編集後は、複数のページ・端末で表示を確認する
「少し直すだけ」のつもりでも、サイト全体に影響する可能性があることを意識して、慎重に作業を進めることが、トラブルを防ぐ第一歩です。
「ヘッダー・フッターの変更を任せたい」「更新しやすい構成に見直したい」という場合は、お気軽にお問い合わせください。