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

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

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

サイトロゴを重ねて表示（背景を透過させる）設定はこちら。

ver3.0〜 サイトロゴをオーバーレイ表示する設定を追加

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

1. イメージの登録

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

memo デモサイトと同じ背景画像を使いたい方はこちらをお使いください。

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

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

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

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

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

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

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

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

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

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

実際の画像サイズなどの考え方については、以下の記事も参考になります。

関連記事【実践編】STORK19のトップページヘッダー（ヘッダーアイキャッチ）の設定のポイント

2022.05.25

2. テキストの登録

基本のテキストを入力

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

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

オーバーレイカラー

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

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

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

3. サイズ（高さ）の設定

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

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

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

4. ボタンの登録

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

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

できあがり

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

番外編の表示例

ヘッダーを透明にして重ねる

2022年3月に公開されたver3.0~よりサイトロゴやグローバルナビを、ヘッダーアイキャッチに重ねて表示可能になりました。

「ヘッダー背景を透過する」オプションを有効にすることで、ヘッダーアイキャッチの上にロゴを重ねて表示することが可能となります。

また、状況に合わせて文字色を変更したり、透過用のロゴを設定することも可能です。

• このオプションはトップページでのみ有効です。現時点では、その他のページで透過表示する機能はありません。