カスタマイザー>[HB] ヘッダーの解説です。
ロゴ画像(スマホ)
テキストではなくて、ロゴ画像にする場合はスマホ用ロゴは必須です。(PC用のみ設定しても表示されません)
ロゴ画像(スマホ用)のRetina対応
スマホユーザーは、今のところiPhone8(6、7含む)サイズのユーザーが多いので、「576×110px」の画像を用意して、「1/2に縮小で対応」の選択がおすすめです。端数は繰り上げて「580×110px」などでも問題ありません。
ロゴ画像(PC用)
350px前後がおすすめです。グローバルナビ無しにすると、最大で1110pxまで表示できます。
ロゴ画像(PC用)のRetina対応
WEBデザイナー向けのサイトなどはRetina対応をおすすめします。2倍のサイズ(700×140など)を用意して、「1/2に縮小」にしてください。
ロゴ画像の説明(alt属性)
ここの記入内容がh1タグに入ります。昔はh1タグをヘッダーの一番上にテキストで書いていましたが、今となっては見かけることもなくなった表示方法なので、ロゴ画像と共通に統一しました。サイト名を入れるのが一般的です。
デザイン・レイアウト
上に表示
左に表示(PC表示のみ)
左に表示する場合は、正方形のロゴ画像にすることもできます。
ヘッダーをヒーローイメージ内に表示する
ヘッダーの背景が透明になります。ヒーローイメージ設定で「動画」のみで画像を設定していない場合は透明になりません。なんでもいいので画像を設定してください。
ヘッダーを上部に固定する
スクロールしても常に表示されます。ヘッダーの位置が上に表示のときのみ有効です。
ロゴの配置
左揃え
中央揃え
中央揃えにすると、グローバルナビがロゴの下に移動します。グローバルナビの表示幅も広がりますので、グローバルナビをたくさん表示したい場合におすすめです。
フォントサイズ
ロゴ画像を設定しない場合のタイトル、キャッチフレーズの文字サイズを変更できます。PCとスマホ、別々に設定できます。
キャッチフレーズ
ロゴ画像を使わない場合にキャッチフレーズを表示できます。
検索ボタン
ヘッダー右端の検索ボタンの表示/非表示の切り替えができます。
電話アイコン
スマホのヘッダーに電話アイコンを表示できます。実店舗サイト向けです。
「ヘッダーに電話アイコンを表示する」にチェックを入れて、電話番号を入力すると表示されます。
アコーディオンにする
「アコーディオンにする」にチェックを入れると、任意の画像を表示してから、タップで発信する2ステップ仕様になります。
いきなり発信したら不安じゃないですか。その対策です。「アコーディオンのコンテンツ」に、表示したい画像タグをコピペしてください。
画像タグのコピペ方法
テキトーな記事に画像をアップして、「HTMLとして編集」をクリック
imgタグ部分をコピーして、「アコーディオンのコンテンツ」に貼り付け。
※画像は自動でaタグに囲まれるので、aタグは使わないでください。
以上、「[HB] ヘッダー」の解説でした。