STORK19の購入ページはこちら

【実践編】STORK19のトップページヘッダー(ヘッダーアイキャッチ)の設定

ストーク19のヘッダーアイキャッチ(トップページヘッダー)について、設定内容によってどのように表示されるのか実例を交えて解説します。

ヘッダーアイキャッチの仕様について

まずはストーク19のヘッダーアイキャッチの基本的な仕様について説明しておきます。

ヘッダーアイキャッチには大きく以下の2つの表示方法があります。

画像だけの表示

管理画面の【外観 > トップページ設定 > ヘッダーアイキャッチ】で「ヘッダー背景画像」を設定しますが、ここで「英語表示テキスト(大テキスト)」または「日本語表示テキスト(小テキスト)」いずれも未入力の状態で画像全体が表示されます。

あらかじめキャッチコピーや説明文などをレイアウトしているような、デザインを作り込んだ画像を表示する場合は、こちらの表示方法が適しています。

画像+テキスト(ボタン)の表示

「ヘッダー背景画像」を設定して「英語表示テキスト(大テキスト)」または「日本語表示テキスト(小テキスト)」のいずれかを入力するとテキストの背景に画像が表示されます。

ブラウザウィンドウの大きさ(横幅)に応じてヘッダー背景画像も拡大・縮小しますが、ヘッダーアイキャッチの枠内ピッタリに画像全体は収まりません。またテキストの文章量やリンクボタンの有無によってトップページヘッダーの高さと背景画像の表示域も変わります。

※参考までにストーク19デモサイトには、こちらの画像を設定しています。(画像サイズ:2400×1400px)

ヘッダーアイキャッチの表示実例

それでは実例を見ていきましょう。ここでは2種類のサンプル画像を例に、設定パターンによってどのように表示されるのかをご紹介します。

その1:横長の画像

まずはこのような横長の画像を設定した場合の例です。(画像サイズ:2400×1260px)

画像のみの場合

「ヘッダー背景画像」のみを設定すると画像全体がそのまま表示されます。

テキストを表示した場合

「英語表示テキスト(大テキスト)」または「日本語表示テキスト(小テキスト)」を入力するとテキストの背景に表示されます。ヘッダーアイキャッチの枠内に画像全体は収まりません。

テキストとボタンを表示した場合

テキストの下にボタンが表示された分、ヘッダーアイキャッチの枠も高くなるのに伴い画像の表示域も変わります。

テキストが複数行になる場合

テキストが複数行に増えると、さらにヘッダーアイキャッチの枠も高くなり画像の表示域もさらに広がります。

その2:正方形の画像

次はこのような正方形の画像を設定した場合の例です。(画像サイズ:1600×1600px)

画像のみの場合

そのまま正方形の状態で表示されます。思ったよりも縦に長くなるので、ブラウザのファーストビューには収まらないと思います。

テキストを表示した場合

画像の上下が大きく切れて横長で表示されます。一般的に正方形や縦長のものはヘッダーアイキャッチとしては向いていないかも知れません。

【カスタマイズ】ヘッダーアイキャッチのサイズを変更

ヘッダーアイキャッチのサイズ(枠の高さ)はCSSで調整することができます。

下記のようなコードを【子テーマのstyle.css】や【外観 > カスタマイズ > 追加CSS】などに記述して適用します。

#custom_header .wrap {
    padding-top: 10%;
    padding-bottom: 10%;
}

padding-toppadding-bottomの数値(%)を変更して、上下余白の空き具合を調整します。

下記はデモサイトで試した例ですが、ヘッダーアイキャッチの高さが変わっているのがわかるかと思います。

【外観 > カスタマイズ > 追加CSS】に入力する場合

逆に数値(%)を大きくして高くすることもできますので、ヘッダーアイキャッチの内容に応じて調整してみてください。

CTAを設置しよう!

ここにリンクさせたい自分の商品やアフィリエイトリンクなどを表示させることが可能です。記事下のCTAは収益化においてかなり重要となるので効果的に使いたいところです。タグを追加してあげれば画像なども表示させることが可能!簡単にサイトの収益化の仕組みを導入することができます。