ヘッダー（メインビジュアル）はWebサイトのキャッチコピーや印象を根付かせる重要なエリアです。
ferret Oneでは様々な方法で画像や動画を設定することができるので、よりサイト閲覧者にとってのほ
このページではferret Oneでの設定方法を紹介しています。
・背景として画像を設定する方法
・背景にYouTube動画を設定する方法
・ヘッダーにイメージパーツを配置する方法
・背景色を設定する方法
▼背景として画像を設定する方法
ヘッダーに画像を背景として設定することができます。
この設定をすることで、見出しやリッチテキストなどのパーツを上に重ねて配置し、訴求させたい画像とテキストを同時に伝えることができます。
※初期設定ではこちらの方法を採用しております。
注意点
画像を背景として設定するとPC、モバイルなどの各閲覧デバイスによってトリミングが異なります。
これは、PCが横型ディスプレイであることに対して、スマートフォンは縦型で閲覧されることが多く、レスポンシブデザインによりモバイルビューの横幅をPCビューよりも狭めているため越した表示なります。
ferret Oneではトリミングに左右されない柄物など、パターンが連続している画像を推奨しています。
設定方法
ferret Oneのページ編集画面で以下の方法で設定できます。
- サイドメニューの「このページの基本設定」
- ヘッダー（メインビジュアル）のセクションにあるカスタムパネルアイコン
1. カスタムパネルを開く
サイドメニューの「このページの基本設定」での設定方法
▼ページ編集画面
▼ページ編集画面
セクションのカスタムパネルアイコンからの設定方法
ヘッダーエリアのセクション（左上）にマウスカーソルを当てると、カスタムパネルアイコンが表示されます。
アイコンをクリックすると、ヘッダーのカスタマイズメニューが表示されるので、背景設定より設定をします。
▼ページ編集画面
2. 画像を設定し、完了
新規で画像をアップロード、もしくはすでにアップロードされた画像をライブラリから選択をします。
▼カスタムパネル
▼モーダル画面
▼背景にYouTube動画を設定する方法
ferret Oneでは、YouTube動画を背景として設定することができます。
注意点
- 表示できる動画はYouTube動画のみです
- Webサイトの表示速度を考慮し、スマートフォンでは動画は表示されません
- YouTube動画側の設定はferret Oneサポート外です
設定方法
1.「このページの基本設定」、もしくは「カスタムパネルアイコン」から、ヘッダーのカスタマイズメニューを表示する
▼このページの基本設定
▼カスタムパネルアイコン
2. 背景動画を選択する
▼カスタムパネル
3. YouTube動画のIDまたはURLを設定する
IDとはYouTubeの動画URLにある一部のパラメーターです。
URLはYouTubeの動画URLのことです。
4. 保存をクリックして完了
▼カスタムパネル
各項目について
- 入力
動画のIDやURLを入力する箇所です
- 繰り返し再生する
無限ループで動画が再生されます
- 背景動画の設定
・背景に収まる最大サイズ
動画がエリアに収まるよう等倍縮小されて表示されます。
※動画の比率によっては左右に黒い帯が表示されます
※動画を合わせる位置は固定となります
・背景を完全に覆う最小サイズ
エリア表示に合わせ、幅いっぱいに設定することができます
※比率によっては動画が見切れる可能性があります。
- 動画を合わせる位置
表示させる動画の表示位置を「上、中、下」で設定します。
※こちらの設定は「背景を完全に覆う最小サイズ」を設定した際に設定が可能です
- スマートフォンでの背景画像
モバイル表示用の画像を設定します。
※画像を設定されていない場合、テーマのデフォルト画像が表示されます
※サイトの表示速度を考慮し、スマートフォンでは動画は表示されません
▼ヘッダーにイメージパーツを配置する方法
背景としてでなく、ヘッダーにイメージパーツで画像を配置する方法です。
PCビューとスマホビューでトリミングが統一されます。
この設定は、見出しやテキストを画像の上に重ねることはできませんので、表示させたい文言を予め画像に入れておく必要があります。
▼プレビューページ：スマートフォン
設定方法
1. ヘッダーエリアにイメージパーツを設置する
▼イメージパーツ
▼ページ編集画面
2. イメージパーツのモーダル画面を表示する
▼ページ編集画面
3. 画像を選択、ALT設定をする
見出しやテキストが画像に盛り込まれているため、HTML上ではどんな画像なのかを認識することができません。
画像内に組み込んだキャッチコピーなどの訴求テキストをHTML上の画像の要素に設定するALTテキストに入力してください。
▼モーダル画面
4. 「このイメージをページに追加」をクリック
▼モーダル画面
5. ページ編集画面に戻り設定し、完了
画像本来のサイズを維持して表示する「オリジナル」にし、カラムのエリア全体に広げる「フィット」を選択
▼ページ編集画面
▼背景色を設定する方法
注意点
背景色は背景画像や背景動画、イメージパーツの下に配置されるため、実際には表示されない可能性もあります。
設定方法
1. ヘッダーのカスタマイズから変更して完了
