サイトの上部にお知らせバナーを表示する

サイトに通常掲載しているコンテンツとは別に、サイトの各ページの上部にお知らせバナーを表示することができます。サイトを閲覧されている方へのメッセージを表示したり、ボタンを追加して外部サイトへのリンクを表示することもできます。ここでは Google サイトで作成したサイトの上部にお知らせバナーを表示する手順について解説します。

(2022 年 05 月 03 日公開 / 2022 年 05 月 03 日更新)

お知らせバナーを表示する

Google サイトの上部にお知らせバナーを表示する方法です。対象のサイトの編集画面を表示してください。

お知らせバナーを表示する(1)

画面右上に表示された「設定」アイコンをクリックしてください。

お知らせバナーを表示する(2)

「設定」ダイアログが表示されます。画面左側の「お知らせバナー」をクリックしてください。

お知らせバナーを表示する(3)

「お知らせバナー」の設定画面が表示されます。

お知らせバナーを表示する(4)

「バナーを表示」の右にあるスイッチをクリックして有効にしてください。

お知らせバナーを表示する(5)

画面上部に表示されるバナーの背景色を選択してください。

お知らせバナーを表示する(6)

お知らせバナーに表示されるテキストを入力してください。最大 150 文字入力できます。

お知らせバナーを表示する(7)

下の方へスクロールして頂き、お知らせバナーをホームページだけに表示するかすべてのページに表示するかを選択してください。

お知らせバナーを表示する(8)

これで設定は完了です。ダイアログを閉じてください。すぐに編集画面上でもお知らせバナーが表示されます。

お知らせバナーを表示する(9)

画面左上の「公開」をクリックして変更内容を反映させたあとで、公開されたサイトをブラウザで表示してみます。すると次のようにお知らせバナーが表示されました。

お知らせバナーを表示する(10)

お知らせバナーにリンクを表示する

お知らせバナーにボタンを表示することで同じサイト内の別のページや外部サイトへのリンクを表示することができます。ボタンを表示するには「お知らせバナー」の設定画面を表示してください。

お知らせバナーにリンクを表示する(1)

ボタンに表示するテキストとボタンをクリックしたときのリンク先 URL をそれぞれ入力してください。またリンク先を新しいタブで開く場合は「新しいタブで開く」にチェックをしてください。

お知らせバナーにリンクを表示する(2)

これで設定は完了です。ダイアログを閉じてください。すぐに編集画面上でもお知らせバナーが表示されます。

お知らせバナーにリンクを表示する(3)

画面左上の「公開」をクリックして変更内容を反映させたあとで、公開されたサイトをブラウザで表示してみます。するとお知らせバナーにボタンが表示されました。

お知らせバナーにリンクを表示する(4)

ボタンをクリックすると、ボタンに設定されたリンク先のページが表示されました。

お知らせバナーにリンクを表示する(5)

お知らせバナーを非表示にする

お知らせバナーを非表示にするには、「お知らせバナー」の設定画面を表示してください。

お知らせバナーを非表示にする(1)

「バナーを表示」の右側にあるスイッチをクリックして無効にしてください。

お知らせバナーを非表示にする(2)

お知らせバナーが非表示になりました。ダイアログを閉じると、編集画面でもお知らせバナーが表示されなくなっています。

お知らせバナーを非表示にする(3)

-- --

Google サイトで作成したサイトの上部にお知らせバナーを表示する手順について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

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