サイト全体で共通する、ヘッダーの設定がまとめられた設定パネルです。設定はカスタマイザーから行います。
- 管理バーの
カスタマイズ
もしくは、ダッシュボード > 外観 > カスタマイズ
をクリック。カスタマイザーが開きます。 - カスタマイザーメニューの中から設定したい項目を選びクリック。各設定パネルが開きます。
![](https://snow-monkey.2inc.org/wp-content/uploads/2023/06/cust_1-2.jpg)
![](https://snow-monkey.2inc.org/wp-content/uploads/2023/06/cust_3.jpg)
設定方法
- カスタマイザーでデザイン > ヘッダーを開く。
- 各種項目を設定する。
公開
をクリック。
![](https://snow-monkey.2inc.org/wp-content/uploads/2023/07/e6448c8b6c5cb4367b92079a347e04f5-362x1024.png)
ヘッダーレイアウト
PCでの、ヘッダーレイアウトを設定できます。
![](https://snow-monkey.2inc.org/wp-content/uploads/2017/09/header_sample.png)
![](https://snow-monkey.2inc.org/wp-content/uploads/2020/06/left.png)
ヘッダーレイアウトで使用したいレイアウトを選択してください。プレビュー画面が更新されてデザインを確認できます(ブラウザのサイズが小さい場合はタブレットサイズのヘッダーデザインが表示されてしまう場合があります)。
グローバルナビゲーションの配置
「ヘッダーレイアウト」が1行のときだけ設定できます。
グローバルナビゲーションの配置を「左」「中央」「右」から選択できます。デフォルトは「右」です。「中央」の場合、「ヘッダーコンテンツ」が未入力の場合はグローバルナビゲーションは右に寄ります。
グローバルナビゲーションを縦書きにする
ヘッダーレイアウトが「2行」以外の場合に設定できます。
チェックすると、グローバルナビゲーションの各項目が縦書きで表示されます。
![](https://snow-monkey.2inc.org/wp-content/uploads/2019/11/vertical-1920x275.png)
モバイル用ヘッダー位置
スマホ・タブレット用のヘッダーの表示位置を下記から選択できます。
- 上部固定
- オーバーレイ(上部固定)
- オーバーレイ(上部固定/スクロール時背景白)
- オーバーレイ
- ノーマル
上部固定は IE11 などのレガシーブラウザには反映されません。
PC 用ヘッダー位置
PC 用のヘッダーの表示位置を選択できます。選択肢は「ヘッダー位置」と同じです。
![](https://snow-monkey.2inc.org/wp-content/uploads/2018/04/pc-overlay-not-mobile-only-1024x715.png)
![](https://snow-monkey.2inc.org/wp-content/uploads/2018/04/pc-fixed-header-not-mobile-only-scrolled-1024x715.png)
上部固定は IE11 などのレガシーブラウザには反映されません。
ヘッダーコンテンツ
ヘッダーの右端に任意のコンテンツを追加できる機能を追加しました。よくある予約ボタンとか電話番号とか、そういうのを入れる想定です。PC サイズのときだけ表示されます。
![](https://snow-monkey.2inc.org/wp-content/uploads/2018/07/header-content.png)
モバイルでもヘッダーコンテンツを表示
ヘッダーコンテンツはPCのみでの表示ですが、モバイルでもヘッダーコンテンツを表示にチェックをいれるとスマートフォンやタブレットでもヘッダーコンテンツが表示されるようになります。
ヘッダーを全幅にする
通常、ヘッダーの中身はコンテンツの幅と一致した状態で表示されますが、この設定を有効化するとブラウザの端いっぱい(左右余白は確保されます)まで広がるようになります。
グローバルナビゲーションのホバーエフェクト
グローバルナビゲーションのメニュー項目にホバーしたときのエフェクトを選択できます。
![](https://snow-monkey.2inc.org/wp-content/uploads/2020/09/text-color.png)
![](https://snow-monkey.2inc.org/wp-content/uploads/2020/09/underline-1024x125.png)
![](https://snow-monkey.2inc.org/wp-content/uploads/2023/05/Kapture-2023-05-24-at-08.36.06.gif)
グローバルナビゲーションのカレント表示エフェクト
グローバルナビゲーションにおいて、現在開いているページと一致するメニュー項目のデザインを選択できます。
![](https://snow-monkey.2inc.org/wp-content/uploads/2020/09/text-color.png)
![](https://snow-monkey.2inc.org/wp-content/uploads/2020/09/underline-1024x125.png)
ヘッダーの文字色
未設定の場合は通常の文字色(#333)、オーバーレイの場合は白(#fff)となります。
![](https://snow-monkey.2inc.org/wp-content/uploads/2020/09/header-text-color-1920x153.png)
ドロップナビゲーションにサイトロゴを表示する
ドロップナビゲーション(PC でページをスクロールしたときに上部からでてくるナビゲーション)にサイトロゴを表示します。
![](https://snow-monkey.2inc.org/wp-content/uploads/2022/06/site-branding-in-drop-naviagtion-1920x103.png)