ヘッダ

mosir は、ヘッダの外観を4つのレイアウトパターンから選択できます。ヘッダには、最大で4つの外観が異なるメニューを配置できます。

各メニューの使用は任意です。「メニューの位置」の設定でメニュー項目を結びつけなかった場合、完全に非表示となります。

ヘッダのレイアウトは「外観>カスタマイズ」の「mosir: 基本設定」で変更できます。

レイアウトパターン

各画像をクリックすると、拡大してご覧いただけます。

シンプル(ロゴのみ)

ロゴだけが中央に大きく配置されるレイアウトパターンです。

外観

メニュー配置

「シンプル(ロゴのみ)」では、メニューは使用できません。

小(ナビバー)

最低限の高さを持った、「ナビバー」の外観となるレイアウトパターンです。ロゴは最も小さく表示されます。ナビバーは不透明となり、ドロップシャドウがかかります。

外観

メニュー配置

スマートフォンでは「メニュー3」のみが表示されます。メニュー3を使用していない場合、ヘッダはロゴと、ドロワーのトグルボタンのみとなります。

中(1段)

中規模サイト向けの外観となるレイアウトパターンです。ヘッダ背景は、メインビジュアル(もしくはフロントページの先頭の本文ブロック)をわずかに透過します。

外観

メニュー配置

スマートフォンでは「メニュー3」のみが表示されます。メニュー3を使用していない場合、ヘッダはロゴと、ドロワーのトグルボタンのみとなります。

大(2段)

大規模サイト向けの、上下二段の外観となるレイアウトパターンです。mosirに登録されている4つのメニューをすべて使用できます。ヘッダ背景は、メインビジュアル(もしくはフロントページの先頭の本文ブロック)をわずかに透過します。

外観

メニュー配置

スマートフォンでは「メニュー3」のみが表示されます。メニュー3を使用していない場合、ヘッダはロゴと、ドロワーのトグルボタンのみとなります。

ドロワー

mosir は、テーマを有効化した直後の状態では、常に画面右上にドロワーの開閉ボタンが表示されています。

ドロワーの表示状態は以下の3パターンから選択できます。

  • 常に表示
  • モバイルのみ表示
  • 表示しない

「モバイルのみ表示」と「表示しない」の挙動の違い

「モバイルのみ表示」を選択した場合は、CSSの display:none による表示切り替えとなります。いっぽう「表示しない」を選択した場合は、ドロワー本体、トグルボタンともに、HTMLソースコードの一切が出力されなくなります。

ドロワーを使用する予定がない場合は「表示しない」を選択すると、やや高速化できます。

関連ページ