ヘッダー

サイト全体で共通する、ヘッダーの設定がまとめられた設定パネルです。設定はカスタマイザーから行います。

カスタマイザーの開き方
  1. 管理バーのカスタマイズもしくは、ダッシュボード > 外観 > カスタマイズをクリック。カスタマイザーが開きます。
  2. カスタマイザーメニューの中から設定したい項目を選びクリック。各設定パネルが開きます。

設定方法

  1. カスタマイザーデザイン > ヘッダーを開く。
  2. 各種項目を設定する。
  3. 公開をクリック。

ヘッダーレイアウト

PCでの、ヘッダーレイアウトを設定できます。

ヘッダーレイアウトで使用したいレイアウトを選択してください。プレビュー画面が更新されてデザインを確認できます(ブラウザのサイズが小さい場合はタブレットサイズのヘッダーデザインが表示されてしまう場合があります)。

グローバルナビゲーションの配置

「ヘッダーレイアウト」が1行のときだけ設定できます。

グローバルナビゲーションの配置を「左」「中央」「右」から選択できます。デフォルトは「右」です。「中央」の場合、「ヘッダーコンテンツ」が未入力の場合はグローバルナビゲーションは右に寄ります。

グローバルナビゲーションを縦書きにする

ヘッダーレイアウトが「2行」以外の場合に設定できます。

チェックすると、グローバルナビゲーションの各項目が縦書きで表示されます。

1行ヘッダー + 縦書きの場合

モバイル用ヘッダー位置

スマホ・タブレット用のヘッダーの表示位置を下記から選択できます。

  • 上部固定
  • オーバーレイ(上部固定)
  • オーバーレイ(上部固定/スクロール時背景白)
  • オーバーレイ
  • ノーマル

上部固定は IE11 などのレガシーブラウザには反映されません。

PC 用ヘッダー位置

PC 用のヘッダーの表示位置を選択できます。選択肢は「ヘッダー位置」と同じです。

オーバーレイの場合
上部固定以外でちょっとスクロールさせた場合

上部固定は IE11 などのレガシーブラウザには反映されません。

ヘッダーコンテンツ

ヘッダーの右端に任意のコンテンツを追加できる機能を追加しました。よくある予約ボタンとか電話番号とか、そういうのを入れる想定です。PC サイズのときだけ表示されます。

ヘッダーコンテンツの例

モバイルでもヘッダーコンテンツを表示

ヘッダーコンテンツはPCのみでの表示ですが、モバイルでもヘッダーコンテンツを表示にチェックをいれるとスマートフォンやタブレットでもヘッダーコンテンツが表示されるようになります。

ヘッダーを全幅にする

通常、ヘッダーの中身はコンテンツの幅と一致した状態で表示されますが、この設定を有効化するとブラウザの端いっぱい(左右余白は確保されます)まで広がるようになります。

グローバルナビゲーションのホバーエフェクト

グローバルナビゲーションのメニュー項目にホバーしたときのエフェクトを選択できます。

文字色の反転
下線
伸びる下線

グローバルナビゲーションのカレント表示エフェクト

グローバルナビゲーションにおいて、現在開いているページと一致するメニュー項目のデザインを選択できます。

文字色の反転
下線

ヘッダーの文字色

未設定の場合は通常の文字色(#333)、オーバーレイの場合は白(#fff)となります。

紫色に設定した場合

ドロップナビゲーションにサイトロゴを表示する

ドロップナビゲーション(PC でページをスクロールしたときに上部からでてくるナビゲーション)にサイトロゴを表示します。

Snow Monkey オンラインコミュニティ

Snow Monkey をより良いテーマにするために、今後の機能開発等について情報共有したりディスカッションをしたりする場所です。より多くのユーザーの交流があったほうがより良いプロダクトに育っていくと思いますので、ぜひご参加ください!