STORK19の購入ページはこちら

トップページヘッダー(ヘッダーアイキャッチ画像・動画背景)の設定

アニメーションテキストとリンクボタンを設置可能な、トップページヘッダー(ヘッダーアイキャッチ画像)の設定ができます。

美しいデザインと、動きのあるテキストの表示でトップページの第一印象を高めることができます。

STORK19のver1.12〜動画背景をサポートしました。以前(〜ver1.11まで)の設定方法はこちら

設定場所

【外観 > カスタマイズ > トップページ設定 > ヘッダーアイキャッチの設定】より設定可能です。

ヘッダーアイキャッチの基本設定

仕上がりイメージ

1. イメージの登録

まずは、ヘッダーアイキャッチの背景に使う画像または動画を登録します。

「アイキャッチイメージ」の設定

アイキャッチイメージの「画像」または「動画背景」を設定します。

動画を設定した場合は、画像は表示されず、動画のみが表示されるようになります。

動画背景を設定した場合
動画背景を利用する場合のポイント

動画と画像の両方を設定した場合、設定した画像はvideoタグのposter要素として登録されます。

動画が通信回線や何らかのエラーなどの要因で表示されなかった場合、設定した画像が表示されるようになります。

ですので、動画背景を利用する場合は、動画と画像両方を設定することをおすすめします。


「アイキャッチイメージ(スマートフォン用)」の設定

アイキャッチイメージ(スマートフォン用)は必須項目ではありませんが、設定した場合はスマートフォンではこちらが優先されます。

スマートフォンでは容量を落として表示したい場合や、動画ではなく画像を表示したい場合には、別途こちらも設定すると良いかと思います。

2. テキストの登録

基本のテキストを入力

次に、画像の上に表示するテキストを入力します。テキストカラーもここで変更可能です。

こちらの設定は必須ではありません。
また、テキストはどちらか1つだけの入力でも大丈夫です。

オーバーレイカラー

文字が読みにくい場合や、デザイン的に背景に色を設定したい場合に利用します。

画像の上に薄く色が入るので文字の読みやすさが向上します。

オーバーレイの透明度をスライドにて変更することで、濃さを変更可能です。

3. サイズ(高さ)の設定

画像のサイズを調整することができます。

スマートフォンとそれ以外で高さを細かく設定できるので、パソコン・スマートフォンのどちらかでデザインが崩れてしまうということはありません。

vhという単位で指定します。
例えば、100vhと指定した場合は、表示したデバイス(端末)の画面サイズと同じ高さで表示されます。

4. ボタンの登録

リンクさせたいURLとボタンの文字も入力しましょう。ボタンの色もここで変更します。

ボタンの色は背景カラーを2種類設定することでグラデーション表示が可能です。

できあがり

仕上がりイメージ

ここまで登録できたら、デモサイトのような表示となります。

番外編の表示例

ちなみに①...

テキストを設定しなかった場合は、画像 or 動画のみが表示されるようになります。

ちなみに②...

画像を設定しなかった場合は、テキストとボタンのみが表示されます。

ver1.11より前バージョンの設定方法はこちら

ver1.12.1〜導入された動画背景の設定により、以前の設定方法とかなり変更がありました。

ver1.11より前のバージョンでの設定方法をこちらに残しておきます。

まずは、ヘッダーアイキャッチの背景に使う画像を登録します。

「ヘッダー背景画像」に画像をアップロードします。

「ヘッダー背景画像(SP用)」も登録することで、スマートフォン用の背景画像と切り分けることができます。

次に、画像の上に表示するテキストを入力します。テキストカラーもここで変更可能です。

ちなみに、どちらか1つだけの入力でも大丈夫です。

リンクさせたいURLとボタンの文字も入力しましょう。ボタンの色もここで変更します。

ボタンの色は背景カラーを2種類設定することでグラデーション表示が可能です。

画像のどのあたりにテキストを表示するかを選択します。

※スマートフォンではどれを選んでも中央寄せになります。

仕上がりイメージ

ここまで登録できたら、デモサイトのような表示となります。

CTAを設置しよう!

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