ヘッダー下にメニューバーを表示させる方法

デザインのレイアウトで「1カラム」を指定すると、標準でカテゴリがヘッダー下にメニューバーとして並びます。

1カラム以外でメニューバーを表示する

テンプレートとCSSを編集します。

テンプレートの編集

管理画面「デザイン」→「テンプレートの編集」で4つのテンプレートを編集します。
  • PC:トップページ
  • PC:カテゴリページ
  • PC:記事ページ
  • PC:検索結果ページ
編集する部分はテンプレート内の1組のタグ。(検索して探してください)
<CSM2LayoutW> と </CSM2LayoutW>
上記タグの最後の部分を今のレイアウトにあうように変更します。
2カラム・左メニュー → <CSM2LayoutTW> と </CSM2LayoutTW>
2カラム・右メニュー → <CSM2LayoutWT> と </CSM2LayoutWT>
3カラム・両メニュー → <CSM2LayoutTWT> と </CSM2LayoutTWT>
3カラム・左メニュー → <CSM2LayoutTTW> と </CSM2LayoutTTW>
3カラム・右メニュー → <CSM2LayoutWTT> と </CSM2LayoutWTT>

CSSの編集

管理画面の「デザイン」→「デザインの変更」→「CSSの編集」からCSSを編集します。

/* 1カラム時ヘッダーメニュー */


という部分を目安に、その下に
.layout-w #header-menu {
}
があります。

これ以降ずっと「.layout-w ・・・」がいくつか続きますが、それらすべてを今のレイアウトに合わせます。
2カラム・左メニュー → .layout-tw
2カラム・右メニュー → .layout-wt
3カラム・両メニュー → .layout-twt
3カラム・左メニュー → .layout-ttw
3カラム・右メニュー → .layout-wtt
そして最初に編集した「.layout-◯◯ #header-menu { } 」内に1文を付け加えます。
.layout-◯◯ #header-menu {
display: block;
}
ここまでを保存したら完了です。