検索結果

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。ページを1カラムにした場合、2カラム時に表示されるサイドメニュー（SIRIUS2ではメインメニューと呼ぶ）を非表示もしくはページ下段へ移動表示できます。（※PC表示時）最下段に移動表示させた場合、サイト内のカテゴリーや記事はどんなレイアウトで表示されるのか、検証してみました。最大3段組の表示サイドメニューの構成は人によってさまざまで、必ずしもここでご紹介するパターンだけではないと思います。なのでここでは筆者の環境を例に2つのパターンをご紹介していきます。複数のカテゴリーのみの構成複数のカテゴリーが存在し、そのカテゴリー内にいくつか記事が格納されてるのが一般的なサイト構成かと思いますが、その場合はカテゴリーの順番通りに並び、適当な位置で2段目3段目へと流れ込みます。筆者どの位置で2段目以降に流れるのかはシステム上での自動計算っぽい？（カテゴリー内の記事数とか…）メニュー見出しが存在する構成メニュー見出しを作成してその下に複数のカテゴリーを配置した場合、メニュー見出しは必ず独立した見出しとして左端に表示されます。その見出し内に内包されるカテゴリーは先ほどと同じく順番通りに並び、適当な位置で2段目3段目へと流れ込みます。またメニュー見出し内に内包されるカテゴリーが1～2個の場合は1～2段目までしか表示されません。そして段が変わって次のメニュー見出しがまた左端に表示されるという仕組みです。極端な話、メニュー見出し内のカテゴリーがどれも1個しかない場合は2段目3段目にカテゴリーが表示されることがないのでずっと1段目だけの表示になり、真ん中と右端は空白エリアで表示されます。同時に1段目だけの表示なのでおのずとスクロール量は増えてきます。

【Volar2】では1カラムページの場合、サイドメニューを開閉式で表示可能な”ハンバーガーメニュー”ボタンを表示させることができます。筆者”ハンバーガーメニュー”とはスマホ表示時なんかに表示される画面右上の3本線「≡」のこと。見た目がハンバーガ―に似ているところからこう呼ばれることが多いです。当サイトトップページの画面右上にそのボタンが表示されてるかと。ただしPC表示時のみでスマホでは標準タイプのメニューが表示されます。基本仕様ページを1カラム仕様にすると元々あったサイドメニューは最下段に格納表示されます。この場合（PCでの表示時に限りますが）、カテゴリーの数や記事数によっては（最大）3カラムでの表示になります。※1カラム時のサイドメニューの表示レイアウト仕様はこちらの記事をご参照ください。1カラム時のサイドメニューの表示レイアウト1カラム時に最下段に下がったサイドメニューのレイアウトはメニュー見出しのありなしで若干変わってきます。ただページを1カラムレイアウトにするぐらいなら下段に強制移動されたサイドメニューはない方が見た目の印象はすっきりします。とはいえ重要なページへのリンクは必要なのでバナーなどでの補足は必要でしょう。筆者は（サイドメニューがない）1カラム構成のサイトを訪問した時に「次に見たいページが探しにくい」という不便さをたびたび感じておりました。かといって先の画像のようなレイアウトで最下段にサイドメニューを表示させるのも見た目的にちょっとアレだし。1カラム時に下段に移動される”サイドメニューの非表示”設定ですが、SIRIUS2では【サイト全体設定】の【レイアウト】設定で1クリックでサイドメニューを非表示にできます。SIRIUS2では一般的に”サイドメニュー”や”サイドバー”と呼ばれるエリアを「メインメニュー」と称してます。ということで利用者の中にはこういう想いを感じている方もきっと多いに違いないという勝手な筆者の思い込みから、スマホでよく見かけるハンバーガーメニューを使って開閉式でサイドメニューを表示できる機能を【Volar2】に追加してみました。（はたして需要があるのかどうかは微妙なところです）【Volar2】の開閉式サイドメニューの仕様は以下の通り。PC表示時かつ1カラムページのみでの表示限定。（モバイルではSIRIUS2標準のグローバルメニューが表示されます）メニューボタンはブラウザ右上固定表示。メニューボタンをクリックすると右からサイドメニューの内容がスライドインし、ブラウザ幅約80%ぐらいの位置まで広がって表示。×ボタンクリックで閉じる。開いたときのサイドメニューの中身・レイアウトは基本的にはSIRIUS2標準の1カラム時のサイドメニューの表示内容がそのまま表示される。本来は全ぺージ1カラムサイトでの利用を想定していますが、2カラム仕様の（エントリー）ページが混じっていても問題はありません。ただし2カラムページではハンバーガーメニューボタン自体は非表示になり通常のサイドメニューが表示される仕様にしてます。使い方＜開閉式サイドメニュー＞はデフォルトでは無効化されてます。【サイト全体設定】の【レイアウト】設定で”1カラム（or ワイド）”に設定後、トップページであればテンプレート→HTMLテンプレート編集→トップページと開きます。エントリーページならテンプレート→HTMLテンプレート編集→エントリーページと開きます。開閉式サイドメニューを有効化するには以下の3ヵ所のモジュールのコメントアウトを解除します。※＜コメントアウト＞についてはこちらの記事をご参照ください。コメントアウトの効率的な使い方旧SIRIUS時代から受け継がれてる便利なコメントアウト機能を詳しくご紹介します。これで実装完了です。開閉式サイドメニュー内に本来のサイドメニュー（SIRIUS2では”メインメニュー”）の内容が格納され、最下段に表示されるはずのメインメニューは自動的に非表示となります。筆者スマホでは通常通り最下段にサイドメニューの内容が表示されます。シンプル版2024年6月のSIRIUS2 ver.1.180にてテンプレート（和モダン）が追加されました。それに伴い、超シンプルな開閉式サイドメニューも追加搭載しました。デモはこちらのサイトでご確認できます。『開閉式サイドメニュー・シンプル版』の特長は以下の通り。第1階層のみのエントリーぺージとカテゴリーフォルダーのみを、1カラムレイアウトで中央寄せ表示。（通常は3カラム）カテゴリー内のエントリーページは非表示。つまりデモサイトの旅館サイトなどのように、エントリーページ数がさほど多くないサイト向けの超シンプルな開閉式サイドメニューとなってます。使える場面はそう多くはないでしょうが、試しに作ってみました。使い方基本的な使い方は先ほどと同じです。ただし有効化するモジュール名が違います。シンプル版で有効化するのは<!-- ★[% module(【Volar2】PCでもサイドメニュー・シンプル（スタイル）) %]★ -->というモジュールの方です。こちらを有効化した場合は、もう一方の[% module(【Volar2】PCでもサイドメニュー（スタイル）) %]の方はコメントアウトして無効化しておきます。