SANGOでヘッダーアイキャッチを表示する方法|初心者向けマニュアル
SANGOでヘッダーアイキャッチを表示する方法|初心者向けマニュアル

SANGOでは、トップページに下記のようなヘッダーアイキャッチを設定することができます。

SANGO ヘッダーアイキャッチ

SANGO ヘッダーアイキャッチ

SANGO 2分割ヘッダーアイキャッチ

SANGO 2分割ヘッダーアイキャッチ

今回はこのヘッダーアイキャッチの設定方法を解説します。

ヘッダーアイキャッチの設定方法

WordPressの管理画面を開きます。

サイドメニューから『外観カスタマイズ』という順にクリックして進みましょう。

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

サイドメニューから『外観→カスタマイズ』という順にクリックして進む

SANGOのカスタマイズページが開きます。

ここでは、下記2種類のヘッダーアイキャッチを設定することができます。

  • ヘッダーアイキャッチ画像
  • 2分割ヘッダーアイキャッチ

ヘッダーアイキャッチ画像

カスタマイズページ左メニューの『ヘッダーアイキャッチ画像』をクリックしましょう。

『ヘッダーアイキャッチ画像』をクリック

『ヘッダーアイキャッチ画像』をクリック

ヘッダーアイキャッチの設定メニューが開きます。

ヘッダーアイキャッチを表示させる場合は、必ず『ヘッダーアイキャッチ画像を表示』のチェックボックスにチェックを入れましょう。

『ヘッダーアイキャッチ画像を表示』のチェックボックスにチェックを入れる

『ヘッダーアイキャッチ画像を表示』のチェックボックスにチェックを入れる

次に、「画像をアップロード」の『画像を選択』をクリックし、ヘッダーアイキャッチとして表示させる画像をアップロードするか、メディアライブラリから選択します。

『画像を選択』をクリック

『画像を選択』をクリック

最後に『公開』ボタンをクリックしましょう。

『公開』ボタンをクリック

『公開』ボタンをクリック

これで、トップページにヘッダーアイキャッチが表示されます。

SANGO ヘッダーアイキャッチ

SANGO ヘッダーアイキャッチ

画像上に文字やボタンを表示させる

下記の各項目を設定することで、ヘッダーアイキャッチ上に文字やリンクボタンを表示させることができます。

見出し

入力したテキストが見出しとして画像上に表示されます。

説明文

入力したテキストが画像上に小さめのサイズで表示されます。

ボタンテキスト(挿入する場合)

入力したテキストがリンクボタン内に表示されます。

ボタンURL

リンクボタンのリンク先を設定できます。

ボタン色

リンクボタンの背景色を変更できます。

例えば、上記全てを設定すると、下記のようにヘッダーアイキャッチ上に表示されます。

SANGO ヘッダーアイキャッチ

SANGO ヘッダーアイキャッチ

画像の最大横幅に制限を設ける

ヘッダーアイキャッチはデフォルトのままだと、下記のように画面の横幅いっぱいに表示されます。

デフォルトのヘッダーアイキャッチ

デフォルトのヘッダーアイキャッチ

画像の最大横幅に制限を設ける(推奨)』のチェックボックスにチェックを入れると、サイズの大きな画面で見た時にも、一定のサイズから画像が横に広がらないよう制限を設けることができます。

最大横幅を制限したヘッダーアイキャッチ

最大横幅を制限したヘッダーアイキャッチ

文字やボタンを表示しない

文字やボタンを表示しない(画像のみ表示)』のチェックボックスにチェックを入れると、画像のみが切り抜かれずに表示されます。

画像のみのヘッダーアイキャッチ

画像のみのヘッダーアイキャッチ

 チェックを入れていない場合、文字やボタンが画像からはみ出ないように、画像サイズが自動調整されます。

2分割ヘッダーアイキャッチ

カスタマイズページ左メニューの『2分割ヘッダーアイキャッチ』をクリックしましょう。

『2分割ヘッダーアイキャッチ』をクリック

『2分割ヘッダーアイキャッチ』をクリック

2分割ヘッダーアイキャッチの設定メニューが開きます。

2分割ヘッダーアイキャッチを表示させる場合は、必ず『2分割ヘッダーアイキャッチを表示』のチェックボックスにチェックを入れましょう。

『2分割ヘッダーアイキャッチを表示』のチェックボックスにチェックを入れる

『2分割ヘッダーアイキャッチを表示』のチェックボックスにチェックを入れる

次に、「画像をアップロード」の『画像を選択』をクリックし、2分割ヘッダーアイキャッチとして表示させる画像をアップロードするか、メディアライブラリから選択します。

『画像を選択』をクリック

『画像を選択』をクリック

画像上に表示させる文字やボタンを設定します。 下記の各項目を設定しましょう。

見出し

入力したテキストが見出しとして表示されます。

説明文

入力したテキストが小さめのサイズで表示されます。

ボタンテキスト(挿入する場合)

入力したテキストがリンクボタン内に表示されます。

ボタンURL

リンクボタンのリンク先を設定できます。

ボタン色

リンクボタンの背景色を変更できます。

テキスト部分の背景色

画像と分割して表示されるテキスト部分の背景色を変更できます。

見出しカラー

見出しの色を変更できます。

説明文カラー

説明文の色を変更できます。

最後に『公開』ボタンをクリックしましょう。

『公開』ボタンをクリック

『公開』ボタンをクリック

これで、トップページに2分割ヘッダーアイキャッチが表示されます。

SANGO 2分割ヘッダーアイキャッチ

SANGO 2分割ヘッダーアイキャッチ

スマホ・タブレット(ブラウザ幅767px以下)では、下記のように画像とテキストが縦並びに表示されます。

スマホ・タブレット版 2分割ヘッダーアイキャッチ

スマホ・タブレット版 2分割ヘッダーアイキャッチ

まとめ

今回は、SANGOでヘッダーアイキャッチを表示する方法を解説しました。

ユーザーに伝えたいメッセージなどを画像と一緒に表示させれば、サイトを開いた時のインパクトも増し、ユーザーに覚えてもらいやすくなるほか、リンクボタンを設置すれば、自分が一番に見てもらいたいページにユーザーを誘導しやすくなります。

非常に便利な機能なので、ぜひ設定してみてください。

スポンサーリンク

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事