検索結果

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】では1カラムページに限り、サイドメニューを開閉式で表示可能な”ハンバーガーメニュー”ボタンを表示させることができます。筆者”ハンバーガーメニュー”とはスマホ表示時なんかに表示される画面右上の3本線「≡」のこと。見た目がハンバーガ―に似ているところからこう呼ばれることが多いです。当サイトトップページの画面右上にそのボタンがデモ表示されてるかと。ただしPC表示時のみでスマホでは標準タイプのメニューが表示されます。基本仕様ページを1カラム仕様にすると元々あったサイドメニューは（下の画像のように）最下段に格納表示されます。この場合（PCでの表示時に限りますが）、カテゴリーの数や記事数によっては（最大）3カラムでの表示になります。※1カラム時のサイドメニューの表示レイアウト仕様はこちらの記事をご参照ください。1カラム時のサイドメニューの表示レイアウト1カラム時に最下段に下がったサイドメニューのレイアウトはメニュー見出しのありなしで若干変わってきます。ただページを1カラムレイアウトにするぐらいなら下段に強制移動されたサイドメニューはない方が見た目の印象はすっきりします。とはいえ重要なページへのリンクは必要なのでバナーなどでの補足は必要でしょう。筆者は（サイドメニューがない）1カラム構成のサイトを訪問した時に「次に見たいページが探しにくい」という不便さをたびたび感じておりました。かといって先の画像のようなレイアウトで最下段にサイドメニューを表示させるのも見た目的にちょっとアレだし。1カラム時に下段に移動される”サイドメニューの非表示”設定ですが、SIRIUS2では【サイト全体設定】の【レイアウト】設定で1クリックでサイドメニューを非表示にできます。SIRIUS2では一般的に”サイドメニュー”や”サイドバー”と呼ばれるエリアを「メインメニュー」と称してます。ということで利用者の中にはこういう想いを感じている方もきっと多いに違いないという勝手な筆者の思い込みから、スマホでよく見かけるハンバーガーメニューを使って開閉式でサイドメニューを表示できる機能を【Volar2】に追加してみました。（はたして需要があるのかどうかは微妙なところですが）タイプは2種類タイプは2種類用意してます。1つはすべてのサイドメニューの中身をそのまま表示する通常タイプ。もう一つはページ数が少ないサイト向けに、第1階層のみのエントリーぺージとカテゴリーフォルダのみを1段レイアウトで表示させるシンプル版です。（※カテゴリー内のエントリーページは非表示）使う場面はそう多くはないでしょうが、試しに作ってみました。シンプル版のデモはこちらのサイトで確認できます。【Volar2】の開閉式サイドメニューの主な仕様は以下の通り。PC表示時かつ1カラムページのみでの表示限定。（モバイルではSIRIUS2標準のグローバルメニューが表示されます）メニューボタンはブラウザ右上固定表示。メニューボタンをクリックすると右からサイドメニューの内容がスライドインし、ブラウザ幅約80%ぐらいの位置まで広がって表示。×ボタンクリックで閉じる。（シンプル版は50%くらい）開いたときのサイドメニューの中身・レイアウトは基本的にはSIRIUS2標準の1カラム時のサイドメニューの表示内容がそのまま表示される。本来は全ぺージ1カラムサイトでの利用を想定していますが、2カラム仕様の（エントリー）ページが混じっていても問題はありません。ただし2カラムページではハンバーガーメニューボタン自体は非表示になり通常のサイドメニューが表示されます。使い方この機能はデフォルトでは無効化されてます。＜1カラムページに開閉式サイドメニュー＞はモジュールでの設定になります。有効化のやり方下の画像⑤枠内が通常版用モジュールで⑨枠内がシンプル版用モジュールになります。また＜1カラムページに開閉式サイドメニュー＞はトップページ・カテゴリーページ・エントリーぺージだけの表示に限定してます。たとえば通常版を利用したい時にはまずは④『【Volar2】PCでもサイドメニュー（スタイル）』にチェックを入れます。次にトップページだけに本機能を表示させたい場合は①『【Volar2】PCでもサイドメニュー【トップ】（HTML）START』と『【Volar2】PCでもサイドメニュー【トップ】（HTML）END』という2つのモジュールの［有効］のチェックをONにします。（※2個で1セット）エントリーページでも表示させたい場合は③『【Volar2】PCでもサイドメニュー【エントリー】（HTML）START』と『【Volar2】PCでもサイドメニュー【エントリー】（HTML）END』という2つのモジュールの［有効］のチェックをONにします。（※1カラムページでないと表示されません）シンプル版なら⑩『【Volar2】PCでもサイドメニュー・シンプル（スタイル）』にチェックを入れます。あとは通常版と同じやり方で表示したいテンプレートの［有効］のチェックをONにします。（※2個で1セット）通常版とシンプル版の同時併用は不可です。機能を有効化したページでは開閉式サイドメニュー内に本来のサイドメニュー（SIRIUS2では”メインメニュー”）の内容が格納され、最下段に表示されるはずのメインメニューは自動的に非表示となります。筆者スマホでは通常通り最下段にサイドメニューの内容が表示されます。

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