1カラムページに開閉式サイドメニュー-Volar2

【Volar2】では1カラムページの場合、サイドメニューを開閉式で表示可能な”ハンバーガーメニュー”ボタンを表示させることができます。

 

当サイトトップページの画面右上にそのボタンが表示されてるかと。

ただしPC表示時のみでスマホでは標準タイプのメニューが表示されます。

ページを1カラム仕様にすると元々あったサイドメニューは最下段に格納表示されます。

この場合（PCでの表示時に限りますが）、カテゴリーの数や記事数によっては（最大）3カラムでの表示になります。

 

 

※1カラム時のサイドメニューの表示レイアウト仕様はこちらの記事をご参照ください。

 

ただページを1カラムレイアウトにするぐらいなら下段に強制移動されたサイドメニューはない方が見た目の印象はすっきりします。

とはいえ重要なページへのリンクは必要なのでバナーなどでの補足は必要でしょう。

 

筆者は（サイドメニューがない）1カラム構成のサイトを訪問した時に「次に見たいページが探しにくい」という不便さをたびたび感じておりました。

かといって先の画像のようなレイアウトで最下段にサイドメニューを表示させるのも見た目的にちょっとアレだし。

 

ということで利用者の中にはこういう想いを感じている方もきっと多いに違いないという勝手な筆者の思い込みから、スマホでよく見かけるハンバーガーメニューを使って開閉式でサイドメニューを表示できる機能を【Volar2】に追加してみました。

（はたして需要があるのかどうかは微妙なところです）

 

【Volar2】の開閉式サイドメニューの仕様は以下の通り。

 

【サイト全体設定】の【レイアウト】設定で”1カラム（or ワイド）”に設定後、トップページであればテンプレート→HTMLテンプレート編集→トップページと開きます。

エントリーページならテンプレート→HTMLテンプレート編集→エントリーページと開きます。

 

開閉式サイドメニューを有効化するには以下の2ヵ所のモジュールのコメントアウトを解除します。

 

 

これで実装完了です。

 

開閉式サイドメニュー内に本来のサイドメニュー（SIRIUS2では”メインメニュー”）の内容が格納され、最下段に表示されるはずのメインメニューは自動的に非表示となります。