ヘッダーとフッターの表示・非表示を切り替える

サイトでヘッダーとフッターを表示するようにすると、サイトに含まれる複数のページで共通して表示されます。ヘッダーとフッターはそれぞれ表示するかどうかを選択することができ、またフッターについてはページ単位で非表示にすることもできます。ここでは Google サイトでヘッダーとフッターの表示・非表示を切り替える方法について解説します。

(2022 年 04 月 21 日公開 / 2022 年 04 月 21 日更新)

ヘッダーの表示と非表示を切り替える

サイトのヘッダーの表示と非表示を切り替える方法です。ヘッダーはデフォルトで表示されるように設定されています。次の部分がヘッダーです。

ヘッダーの表示と非表示を切り替える(1)

ヘッダーの上に表示されているのはナビゲーションになります。ナビゲーションはヘッダーが表示されている場合はヘッダー上に表示され、ヘッダーが表示されていなければ画面上部に表示されます。

ヘッダーを非表示にする

表示されているヘッダーを非表示にするには、いずれかのページの編集画面でヘッダーにマウスを合わせてください。するとヘッダーの左側に「ヘッダーを削除」アイコンが表示されるのでクリックしてください。

ヘッダーの表示と非表示を切り替える(2)

ヘッダーが削除されて表示されなくなりました。

ヘッダーの表示と非表示を切り替える(3)

ヘッダーを表示する

ヘッダーが表示されない状態からヘッダーを表示するには、いずれかのページの編集画面でナビゲーション部分にマウスを合わせてください。するとナビゲーションの中央下に「ヘッダーを追加」と表示されるのでクリックしてください。

ヘッダーの表示と非表示を切り替える(4)

ヘッダーが表示されました。

ヘッダーの表示と非表示を切り替える(5)

このようにヘッダーの表示と非表示を切り替えることができます。なおヘッダーについてはすべてのページで設定が共通なので、どこかのページだけヘッダーを非表示にするといったことはできません。

フッターの表示と非表示を切り替える

サイトのフッターの表示と非表示を切り替える方法です。フッターはデフォルトでは表示されていないので、表示するには最初に追加する必要があります。

フッターを表示する

フッターを表示するにはいずれかのページの編集画面で、画面下部にマウスを合わせてください。すると画面下部に「フッターを追加」と表示されるのでクリックしてください。

フッターの表示と非表示を切り替える(1)

フッターが追加されてフッターの編集画面が表示されます。編集はあとからでもできますが、今回はテキストを入力し、中央揃えに設定しました。

フッターの表示と非表示を切り替える(2)

フッターの表示と非表示を切り替える(3)

フッターの追加が完了しました。

フッターの表示と非表示を切り替える(4)

ヘッダーと同じくフッターも各ページで共通して表示されます。表示される位置は画面最下部です。(確認するときは、編集画面右上の「公開」をクリックして変更内容をサイトに反映させてください)。

フッターの表示と非表示を切り替える(5)

フッターを非表示にする

表示されているフッターを非表示にするには、いずれかのページの編集画面でフッター部分にマウスを合わせると「フッターを編集」と表示されるのでクリックしてください。

フッターの表示と非表示を切り替える(6)

フッターの左側に「セクションを削除」アイコンが表示されるのでクリックしてください。

フッターの表示と非表示を切り替える(7)

フッターが削除されて表示されなくなりました。

フッターの表示と非表示を切り替える(8)

フッターを削除した場合は、すべてのページでフッターが表示されなくなります。

特定のページでフッターを非表示にする

フッターを表示している場合、特定のページでだけフッターを非表示にすることができます。フッターが表示されている状態で、非表示にしたいページの編集画面を表示してください。

特定のページでフッターを非表示にする(1)

フッター部分にマウスをあわせると、左下に次のようなアイコンが表示されるのでクリックしてください。

特定のページでフッターを非表示にする(2)

このページではフッターが非表示になりました。

特定のページでフッターを非表示にする(3)

実際にサイトを表示して確認してみると、外のページではフッターは表示されていますが、先ほど非表示にしたページではフッターが表示されていません。

特定のページでフッターを非表示にする(4)

特定のページでフッターを非表示にする(5)

なお非表示にしたフッターを再度表示するには、表示させたいページの編集画面でフッターの位置にマウスを合わせ、画面左下に表示される次のアイコンをクリックしてください。

特定のページでフッターを非表示にする(6)

フッターが表示されます。

特定のページでフッターを非表示にする(7)

-- --

Google サイトでヘッダーとフッターの表示・非表示を切り替える方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。