このページでは、「ヘッダー」の表示／非表示を切り替える方法と、編集方法を紹介します。
また、「ヘッダー」はサイト共通部分としてそれぞれ設定することも可能ですので、併せて紹介します。
目次
ヘッダーの表示／非表示を切り替える方法
1. サイト > ページ一覧 から該当ページを選択し、「ページを編集する」をクリックします。
2. 設定 > レイアウト設定 > エリアの表示切り替え より「ヘッダーを表示」をクリックしてON・OFFを切り替えます。
※キャプチャはベースデザインなしの場合の画面になります
作成済の共通ヘッダーをページに適用する方法
1. サイト > ページ一覧 から、共通ヘッダーを反映させたいページを選択します。
2. 「ページ設定」の「共通エリアの使用」で「共通ヘッダーを使用する」にチェックを入れて保存します。
ヘッダーを編集する方法（共通エリアから編集する場合）
※共通エリアから編集すると、共通ヘッダーを適用している全てのページに反映されますのでご注意ください。
1. サイト > 共通エリア一覧 から選択し、「要素名：共通ヘッダー」または「編集」をクリックします。
2.共通エリア編集画面で、ヘッダーの編集を実施します。
コンテンツと同様に「行」「カラム」「パーツ」を配置できます。
※キャプチャはベースデザインなしの場合の画面になります
■共通ヘッダー編集方法の詳細はこちら
＞【画面説明】サイト／共通エリア一覧 共通ヘッダー
ヘッダーを編集する方法（ページ編集画面から編集する場合）
※共通ヘッダーを適用していないページ独自のヘッダー編集方法です。
1. サイト > ページ一覧 から該当ページを選択、「ページを編集する」をクリックし、「共通エリアの使用」から「共通ヘッダーを使用する」のチェックを外して保存します。
2. 「ページ編集」をクリックします。
3.ページ編集画面で、「ヘッダーを表示」をONにしてヘッダーの編集を実施します。
コンテンツと同様に「行」「カラム」「パーツ」を配置できます。
※キャプチャはベースデザインなしの場合の画面になります
ヘッダー（メインビジュアル）を設定する方法
ヘッダー（メインビジュアル）は、Webサイトのキャッチコピーや印象を根付かせる重要なエリアです。
ferret Oneでは、様々な方法で画像や動画を設定することができるので、よりサイト閲覧者にとって分かりやすい内容になるよう設定しましょう。
▼背景として画像を設定する方法
ヘッダーに画像を背景として設定することができます。
この設定をすることで、見出しやリッチテキストなどのパーツを上に重ねて配置し、訴求させたい画像とテキストを同時に伝えることができます。※初期設定ではこちらの方法を採用しております。
＜注意点＞
画像を背景として設定するとPC、モバイルなどの各閲覧デバイスによってトリミングが異なります。
これは、PCが横型ディスプレイであることに対して、スマートフォンは縦型で閲覧されることが多く、レスポンシブデザインによりモバイルビューの横幅をPCビューよりも狭めているため越した表示なります。
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. ページ編集画面に戻り設定し、完了
▼ヘッダーにカルーセルパーツ（スライドギャラリー）を設置する方法
ヘッダーにカルーセルパーツで画像を配置する方法です。
PCビューとスマホビューでトリミングが統一されます。
この設定は、見出しやテキストを画像の上に重ねることはできませんので、表示させたい文言を予め画像に入れておく必要があります。
＜カルーセルパーツの設定方法＞
1. ヘッダーエリアにカルーセルパーツ（スライドギャラリー）を設置する
▼カルーセルパーツ
【ベースデザインあり・なしの画面比較】
|
パーツ ／ メディアパーツ |
単体パーツ ／ 画像 |
▼ページ編集画面
※キャプチャはベースデザインなしの場合の画面になります
2. 画像設定を押してカルーセルパーツのモーダル画面を表示する
3. 画像を選択、ALT設定をする
見出しやテキストが画像に盛り込まれているため、HTML上ではどんな画像なのかを認識することができません。
画像内に組み込んだキャッチコピーなどの訴求テキストをHTML上の画像の要素に設定するALTテキストに入力してください。
▼モーダル画面
4. 「このイメージをページに追加」をクリック
▼モーダル画面
画像の大きさは、画像本来のサイズを維持して表示する「オリジナル」を選択
残りの画像も同じように画像を選択、ALT設定、「このイメージをページに追加」をクリックしたら「保存」
5.ページ編集画面に戻り設定し、完了
■カルーセルパーツについて詳細はこちら
＞【機能詳細】ページ編集（LP編集）／デザインパーツ カルーセルパーツ
▼背景色を設定する方法
＜注意点＞背景色は背景画像や背景動画、イメージパーツの下に配置されるため、実際には表示されない可能性もあります。
＜背景色の設定方法＞
1. ヘッダーのカスタマイズから変更して完了
※動画はベースデザインなしの場合の画面になります
▼オーバーレイを設定する方法
「オーバーレイ」という機能を使って、写真の上に色を重ねることで、ヘッダー画像（メインビジュアル）の上に書いたテキストを読みやすくすることができます。 下記がオーバーレイの適用前後のヘッダーですが、オーバーレイ適用前は写真が鮮やかすぎて、上に乗せているテキストが読みにくいですが、オーバーレイ適用後は読みやすくなりました。＜オーバーレイの設定方法＞
1.「カスタムパネルアイコン」から、ヘッダーのカスタマイズメニューを表示します。2. 「オーバーレイ」の項目で、「カラー」のところで任意の色を選択します。「カラー」の隣の「%」は透明度です。
下記は、カラーが白、透明度が25%で設定してみました。3. 「オーバーレイ」の項目で、「パターン」のところで任意の模様を選択します。「カラー」の隣の「%」は透明度です。
下記は、水玉パターン、透明度が100%で設定してみました。上記の様に、カラーや透明度・パターンを組み合わせることもできます。
いろいろ試して、お好みのオーバーレイをご設定ください。
ヘッダー（メインビジュアル）の高さを調整する方法
▼高さ調整について
編集画面内のヘッダー部分下部にマウスを合わせ、ドラッグアンドドロップでヘッダーの高さを調整できます。ドラッグアンドドロップで調整できない場合は、CSSでのカスタマイズが影響している場合があります。ヘッダーや行のカスタマイズ（パレットアイコン）をクリックし、「追加するclass名」をご確認ください。
※ドラッグアンドドロップで調整時に、下記手順にてコンテンツの中身を空にしてからサイズ調整を行ってください。
- コンテンツをクリップボードにコピー
- コンテンツの削除
- 高さ調整
- クリップボードからコンテンツを戻す
▼PC編集画面
※動画はベースデザインなしの場合の画面になります
▼スマートフォン用編集画面
※動画はベースデザインなしの場合の画面になります
＜CSSを使用する方法＞
ページのCSSに、下記を記載します。数値は、背景画像に設定した画像の 横/高さ を入力してください。
現在のプランではページのCSSは使用できません。
※過去契約を行った一部のお客様に表示されている機能となります。
サイトのカスタムCSSをご利用ください。
下記CSSはサンプルであり、お客様のサイトに正しく反映されるかについては検証しておりません。
またCSSの詳細についてはサポート対象外となるため、CSSが動作しないといったお問い合わせについてはご遠慮下さい。
例：画像サイズ PC表示で1260×630、スマホ表示で630×630 を設定した場合
.main-visual {
min-height: unset !important;
aspect-ratio: 1260/630;
@media screen and (max-width: 769px) {
aspect-ratio: 630/630;
}
}
▼表示される画像の合わせる位置を調整したい場合
「ヘッダーのカスタマイズ」の中の、「背景画像のリピート設定」、「背景画像を合わせる位置」で調整してください。
背景画像のリピート設定・指定しない
・リピートなし
・縦横にリピート
・垂直方向へリピート
・水平方向へリピート
・背景に収まる最大サイズ
・背景を完全に覆う最小サイズ背景画像を合わせる位置・指定しない
・縦：上 / 横：左
・縦：上 / 横：中
・縦：上 / 横：右
・縦：中 / 横：左
・縦：中 / 横：中
・縦：中 / 横：右
・縦：下 / 横：左
・縦：下 / 横：中
・縦：下 / 横：右
▼スマートフォン用の画像設定について
スマートフォン用に画像を適正サイズにするには、「ヘッダーのカスタマイズ」の中の、「スマートフォン用の背景画像を設定」にチェックを入れ、その下に表示される「ライブラリ」から設定してください。画像を設定した後、「背景画像のリピート設定」、「背景画像を合わせる位置」で調整してください。