【ConoHa WING】当ブログ限定!5,000円割引あり!キャンペーンとの併用もOK!

SANGOトップページにメイン画像(ヘッダーアイキャッチ)を設定する方法!

SANGOでトップページのメイン写真(ヘッダーアイキャッチ)を設定する方法!

※当記事内には、商品プロモーションを含む場合があります

こちらの記事では、WordPressの人気テーマ「SANGO(サンゴ)」で構築したサイトのトップページにメイン画像(ヘッダーアイキャッチ)を設定する方法を説明します。

トップページのメイン画像はサイト訪問者が初めに目にする部分で、インパクトのある画像を設定することでグッとサイトへの興味を引き付けることもできます。

SANGOではヘッダーアイキャッチと呼ばれていて、画像の上にボタンやテキストを表示させることもできます。

設定は簡単なので、トップページにメイン画像を表示させたい方は挑戦してみましょう。

SANGOのトップページでメイン画像を設定する方法!

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

トップページのメイン画像設定は、管理画面左カラムにある「外観」→「ヘッダーアイキャッチ」から行います。

SANGOでは、通常のヘッダーアイキャッチ画像2分割ヘッダーアイキャッチ画像の2パターンが用意されています。

まずは、通常の「ヘッダーアイキャッチ画像」について説明していきます。

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

ヘッダーアイキャッチの設定画面

各設定項目の説明はこちらになります。

■ヘッダーアイキャッチ画像を表示
→ヘッダーにメイン画像を挿入する場合には必ずチェックを入れてください。
 
■画像をアップロード
→ヘッダーに表示させるメイン画像をアップロードしてください。
 
■画像の最大横幅に制限を設ける
→横幅に制限を設けたい場合にはチェックを入れておきましょう。
 もし、メイン画像をブラウザの横幅いっぱいに表示させる場合にはチェックを外してください。
 
■文字やボタンを表示しない
→メイン画像の上にテキストやボタンを表示させない場合にはチェックを入れてください。
 
■見出し
→メイン画像の上に表示される見出しテキストです。
 例えば、サイトのタイトルなどを入力しましょう。
 
■説明文(画像上に表示される小さめのテキスト)
→メイン画像の上に表示される説明文です。
 サイトの説明文を分かりやすく簡潔に入力しましょう。
 
■ボタンテキスト
→ボタンに表示させるテキストを入力します。
 
■ボタンURL
→ボタンにリンクさせるURLを入力します。
 
■ボタン色
→ボタンの色を設定します。

例えば、このように設定してみます。
ヘッダーアイキャッチの設定サンプル

ヘッダーアイキャッチの設定サンプル

すると、ユーザー側にはこのように表示されます。
ヘッダーアイキャッチの設定サンプル

 

また、「画像の最大横幅に制限を設ける」のチェックを外すと、このようにメイン画像が横幅いっぱいに広がります。
ヘッダーアイキャッチの設定サンプル

SANGOでは「画像の最大横幅に制限を設ける」にチェックを入れるのを推奨されているようです。

ですが、この辺は好みの問題にもなるので、各自の好きなように設定するようにしましょう。

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

「2分割ヘッダーアイキャッチ画像」の設定画面はこのようになっています。
2分割ヘッダーアイキャッチ画像

「2分割ヘッダーアイキャッチ画像」とは、そのままですがヘッダーのメイン画像を左右2分割にして表示する設定になります。

例えば、このような表示のヘッダーになります。

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

例えば、左側に文字の入った画像を表示させて、右側に見出しや説明文を入れたい場合に便利な設定ですね。

最後に

トップページへのメイン画像(ヘッダーアイキャッチ)の設定は必須ではないです。
こちらのブログでも設定を行っていません。
※今後、どこかのタイミングで設定する予定です。

ですが、この部分はファーストビューとも呼ばれて、サイトへ訪問してきたユーザーが最初に目にする場所です。
その為、インパクトのある設定を行っておくことでユーザーをサイトへ一気に引き込むこともできます。

興味のある方は、一度設定に挑戦してみましょう。

ただ、やはりインパクトのあるヘッダー写真となると個人で作成するのは大変です。

そのような場合には、プロの力を借りるということも大切です。

もし、インパクトのあるヘッダー画像を作りたいという方は、ココナラで発注してみるのもおすすめです。
ココナラに興味のある方は、まずは無料会員登録して好みのイラストレーターを探してみましょう!
   ココナラでイラストレーターを探す   

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です