見出しで使われる画像と見出しのタイプを変更する

Google サイトのヘッダーに表示される見出しでは画像の上にタイトルのテキストを表示するようになっていますが、デフォルトで使用されている画像とは別の画像を指定することができます。また見出しにタイプとして画像を使用しなかったり、逆に最初にサイトを表示したときに全画面に見出しが表示されるよう設定することもできます。ここでは Google サイトで見出しで使われる画像と見出しのタイプを変更する方法について解説します。

(Last modified: 2023年07月10日)

見出しの画像を変更する

Google サイトではヘッダーの部分に表示される見出しで画像が表示され、その上にタイトルがテキストで表示されます。

使用される画像は選択されているテーマによって異なりますが、画像を別の画像に変更することができます。画像を変更するには対象のサイトの編集画面を表示してください。

見出しの部分にマウスを合わせると見出しの左下に「画像を変更」と表示されるのでクリックしてください。

画像の選択方法として「アップロード」と「画像を選択」のどちらかをクリックします。「アップロードは」はローカルに保存されている画像をアップロードする場合、「画像を選択」はあらかじめ用意されている画像から選ぶか、 Google ドライブなどに既に保存されている画像から選ぶ場合です。最初に「画像を選択」をクリックしてみました。

画像の選択画面が表示されます。「ギャラリー」には使用できるサンプルの画像が表示されています。「URL」はインターネットで公開されている画像の URL を指定する場合に使用します。「検索」ではキーワードを入力して画像を検索できます。「アルバム」や「Google ドライブ」には自分が既にアップロードしている画像を選択できます。

今回は「ギャラリー」の中の画像をクリックして選択しました。選択が終わりましたら左下の「選択」をクリックしてください。

選択した画像が見出しの背景画像として設定されました。

次に画像をアップロードして設定してみます。「画像を変更」をクリックしたあとで「アップロード」をクリックしてください。

ファイル選択ダイアログが表示されるので、アップロードする画像を選択してください。選択が終わると画像がアップロードされて見出しの背景画像として設定されます。

画像の位置を調整する

使用した画像は必要であれば拡大縮小して表示されますが、デフォルトでは画像の中央が見出しの中央に表示されるように位置が調整されます。もし使用した画像の左上や右下など中央以外の部分を使用したい場合には、位置を変更することができます。

位置を変更するには見出しにマウスをあわせたときに右下に表示される「画像を固定」アイコンをクリックしてください。

次のような画像の位置を調整する画面が表示されます。

あまり細かい位置の調整はできないのですが、例えば左下の矢印をクリックするとアップロードした画像の左上の部分が使用されるように変更されます。

必要であれば画像の位置を調整されてください。

色調整を行わずに画像本来の色で表示する

画像をデフォルトのものから変更した場合、その画像がそのまま使用されるのではなく画像の上に表示されるタイトルが見やすくなるように画像の色が調整されて表示されます。この調整をリセットして元々の画像の色をそのまま表示したい場合には、見出しにマウスをあわせたときに右下に表示される次のアイコンをクリックしてください。

画像が元々の色で表示されます。

あらためて文字が読みやすくなるように画像の色を調整したい場合は同じアイコンをクリックしてください。

リセットしてデフォルトの画像に戻す

画像をリセットしてデフォルトの画像に戻すには、見出しにマウスをあわせたときに左下に表示さえる「リセット」をクリックしてください。

デフォルトの画像に戻りました。

見出しのタイプを変更する

見出しはデフォルトでは画像の上にタイトルが表示されますが、画像を使用しないようにしたり画像のサイズを大きくすることもできます。見出しのタイプを変更するには、見出しにマウスをあわせたときに表示される「見出しのタイプ」をクリックしてください。

見出しのタイプとして「カバー」「バナー（大）」「バナー」「タイトルのみ」から選択できます。デフォルトの設定は「バナー」です。

例えば「タイトルのみ」をクリックすると、画像が使用されずにタイトルだけが表示されます。

「バナー（大）」をクリックすると、「バナー」よりも使用される画像が大きくなります。

「カバー」をクリックすると、サイトを表示したときに画面全体に見出しが表示されりょうに画像が表示されます。

-- --

Google サイトで見出しで使われる画像と見出しのタイプを変更する方法について解説しました。