検索結果

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。バージョン1.140のアップデートによってブロック設定に背景画像を指定できる機能が追加されたため、当ページの内容を大幅に書き直しました。＜ブロック設定＞というのは主に1カラム（ワイド）のトップページやランディングページ向けに、ページの横幅いっぱいに背景色を指定できる機能です。設定画面は「カラー設定」とver.1.140から追加搭載された「画像設定」の2項目。編集画面右下の「ブロック設定」をクリックすると開きます。いくつかサンプル画面を通してその使い勝手を見ていきます。【カラー設定】背景色2カラムまずは”使ってもあまり意味のない”2カラムページでの＜ブロック設定＞。どんな具合か試しに見てみます。用意したのはこちらのサンプル。通常のテキストとカラー枠・装飾枠（ヒント）で囲まれたテキストを織り交ぜてます。最初に＜ブロック設定＞で背景色だけを設定してみます。結果は記事コンテンツエリアだけが設定した背景色で塗りつぶされます。筆者想定していた通りですね。ちなみにH2見出しの背景はデフォルトの設定がそのまま適用されてるためグレーになってます。「目次」の背景色も付いたままです。似たようなレイアウトデザインに『スタイル』というのがあります。試しに編集画面左下にある『スタイル』から「カラー背景」を選択したのがこちら。記事コンテンツエリアは設定済みの背景色で塗りつぶされますが、記事タイトルに入力したH2見出しは適用範囲外になります。1カラム（通常）今度は”通常の”1カラムページでやってみました…といってもサイドメニューが消えただけで基本的には2カラム時と変わりはないです。（横幅だけです、変わるのは）筆者こちらも＜ブロック設定＞の恩恵はあまり感じられません。1カラム（ワイド）おススメは1カラム（ワイド）です。ページレイアウトを「1カラム（ワイド）」に変更すると＜ブロック設定＞の『記事のワイド化』機能が有効になるのでそこをONに切り替えます。この設定で表示させてみるとブラウザ幅いっぱい（フルワイド）に背景色が敷かれるようになります。雰囲気がこれまでとだいぶ違います。筆者1カラム（ワイド）の時だけなぜかH2見出しの背景（グレー）が消えます。そしてなぜか中央寄せ。でもH3見出しは左寄せ…仕様なのか調整ミスなのか。ちょっと気になったので『見出しデザイン』機能を使ってH2見出しを「スタイル02（枠線のみ）」に変更してみました。（線色は共に青系）今度はH2見出しにちゃんと装飾がかかったもののなぜかH3見出し同様ともに左寄せに。（これはどういう仕様？）筆者1カラム（ワイド）に設定したエントリーページでも挙動は同じです。この仕様はアップデートで変更になる（？）さてここから他の機能も見ていきます。【カラー設定】テキストカラー＜ブロック設定＞には『ブロックの背景色』設定のほかに『ブロックの文字色』（テキストカラー）というのもあります。今回ここを赤系の色に設定してみます。その結果がこちら。記事編集内のテキストが赤色に変わりました。しかしながらH3見出し『H3タイトル（記事本文内）』は赤色に変わったものの記事タイトル内に付けたH2見出し『H2タイトル（「記事タイト」内）』と記事本文内に加筆したH2見出し『H2タイトル（記事本文内）』は共に黒色のままです。最後に『記事タイトルの文字色』に青系のカラーを設定してみます。結果は編集画面の”記事タイトル”内に入力したH2見出し『H2タイトル（「記事タイトル」内）』”だけ”が設定通り青色に変化しました。（いろいろと理解が難しい…）【カラー設定】背景色を暗い色にすると...背景色を暗めの色に設定してみます。上のキャプチャ画像でわかるように背景色が濃くなれば、元が黒のテキストはかなり見づらくなります。その一方で装飾系ボックス内のテキストは背景に明るい色が設定してあるので見え方は変わらずクリア。それではということで、テキストの色を見やすくするべく『ブロックの文字色』を白にしてみます。その結果がこちら。通常のテキストは白に変わって見やすくなったんですが、装飾系ボックス内のテキストまで白に変わってしまって今度はこっちが見づらくなってしまいました。どうやら『ブロックの文字色』は記事内のすべてのテキストを設定した色に変えてしまう仕様のようです。（ここでも記事コンテンツ内の”H2見出し”は黒のままで変わらずww）筆者ブロック設定の『記事タイトルの文字色』も白に設定すれば1個目のH2見出しだけは白色に変わります。ということで（現状では）背景色に暗い色を設定する場合は”プレーンなテキストだけのコンテンツ”にするか、もしくは暗い背景色は諦めるしかないようです。【Volar2】での設定【Volar2】には暗い背景色の時にテキストカラーを自動的に白に変換するダークモードを搭載してます。（画面全体が暗転する一般的な”ダークモード”とは違います）やり方は記事内のダークモードにしたいエリアの先頭と後尾に専用のモジュールを貼り付けるだけ。（2ヵ所というのがちょっと面倒なんですけどしょうがない）結果、下のキャプチャ画像のように通常のテキストのみが白で表示されます。（”調整漏れ”があるかもしれませんがアプデで対応します）【画像設定】『ブロック設定』では背景に単色だけでなく画像を設定することもできます。たとえば画像管理画面に取り込み済みの下の画像を背景に設定してみました。デフォルト設定のままなら白のオーバーレイが0.7（70%）でかかります。オーバーレイとは？画像の上に色や画像などを重ねて印象を変える手法。画像を少し暗くしたり明るくすることで画像の上に載ってるテキストの視認性をアップさせる効果もあります。スマホではこちらのように表示されます。画面幅に合わせて画像が伸縮するのでスマホでは画像が引き伸ばされたような感じでの表示になります。次はコンテンツの量を増やした（縦に長くなった）サンプルをみてみます。先ほどは手に持ったカップがいい感じで表示されてましたが、コンテンツの高さが増えると画像は拡大されて表示されます。上のキャプチャ画像はPC表示時のものです。これをスマホで見ると…かなり拡大されてもはやどんな画像なのかわからないほど引き伸ばされてしまいす。こういった特長があるので設定する画像はデザインやサイズに多少気をつかう必要があります。ちなみにオーバーレイに暗めの色を指定したサンプルがこちら。こういった場合は『ブロックの文字色』に白系の色を設定してやるとテキストの可読性が上がります。ただし前述したように見出しテキストや通常テキストの表示状態に若干問題が残ってるので使いどころは限られてきそうです。【Volar2】での設定カスタムテンプレート【Volar2】では『フルワイド背景画像』にて背景画像の固定化機能とPCとスマホで別の画像の設定も搭載してます。※【Volar2】＜フルワイド背景画像＞についてはこちらの記事をご参照ください。【Volar2】フルワイド背景画像SIRIUS2テンプレート【Volar2】の1カラムページで使えるフルワイド背景画像についての詳細ページ。

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

パーツ＜画像レイアウト＞に追加搭載した【Volar2】独自の機能をご紹介します。コンテンツの表示幅解消機能＜画像レイアウト＞で”横並び”レイアウトを指定すると「コンテンツの横並び表示」（※PC＆タブレット）ができます。ただし1段目と2段目で異なるコンテンツ表示数にしてると1段目と2段目のコンテンツの表示幅が異なってしまいます。原因はコンテンツ幅が自動的に表示領域いっぱいに広がる設定のためです。これはコンテンツ数の多い方の数に合わせて空のコンテンツを足せばPC上のレイアウト崩れは解消します。しかしスマホで見た時には足した空のコンテンツ分だけ余計な空きが生じてしまいます。これを解消するコード（クラス）を【Volar2】ではご用意してます。＜画像レイアウト＞で出力した独自タグの前後に【Volar2】で用意している専用のコード（クラス）を付けることで、余計な空きがなくなります。（※PC及びタブレット表示時）<div class="xxx">[% imgLayout(※画像レイアウト・管理名) %]</div>詳細をこちらのページでご確認できます。画像拡大表示『レイアウト設定』で「画像＋テキスト縦並び（1列・互い違い）」を選択した場合、SIRIUS2の設定では画像は枠内に収まって縮小表示されます。これを＜画像レイアウト＞で出力した独自タグの前後に【Volar2】で用意している専用のコード（クラス）を付けることでブラウザの端まで画像を表示するレイアウトが可能になります。（※PC及びタブレット表示時）詳細をこちらのページでご確認できます。デモはこちらのページでご覧になれます。基本的には1カラムページでの運用になります。（2カラムではあまり意味を成しません）またある程度画像の横幅が大きくないとこのレイアウトにはなりません。画像は常に100%サイズで表示されるので、ブラウザを広げるとテキストエリアが広がる仕様です。余白なし交互表示＜画像レイアウト＞のレイアウト設定で「画像＋テキスト縦並び（1列・互い違い）」を選んだ際、独自タグの前後に【Volar2】で用意している専用のコード（クラス）を付けることで、”余白なし交互表示”でのレイアウトが可能になります。（※PC及びタブレット表示時）デモは【＜画像レイアウト＞余白なし交互表示】でご覧になれます。背景色付き『レイアウト設定』でデフォルトの「横並び」を選択した際、テキストエリアは透明の背景になります。（通常はページ全体に白の背景色が敷かれてるので実感はわかないと思います）しかしながら1カラムページなどで記事ブロック全体の背景に画像を指定するとテキストエリアの背景が透過するためテキストが読みにくくなるケースもあります。そんな時用にテキストエリアの背景に淡いグレーの背景色を設定したタイプもご用意しました。こちらも【Volar2】が用意している専用のクラスで囲むだけです。標準機能でも背景色の設定は可能ですが、こちらの設定だとテキストを左寄せにしても見出しは中央寄せのままになります。また先でご紹介したスマホでの”端数”処理機能や【Volar2】独自の余白なども適用されます。デモが＜画像レイアウト＞背景色付きでご覧になれます。アイコン風画像と見出しのみのレイアウト＜画像レイアウト＞機能を使った”アイコン風画像と見出しのみ”の機能も用意してあります。（当サイトのトップページ『SIRIUS2の新機能（その他）』で実際の表示（デモ）がご覧になれます。『レイアウト設定』で画像と見出しのみの入力で、レイアウトはデフォルトの「横並び」でOK。こちらも【Volar2】が用意している専用のクラスで囲むだけです。背景色付きタイプ＜アイコン風画像と見出しのみのレイアウト＞は背景が透過するタイプですが、【Volar2】で用意している別のクラスで囲むと自動で淡いグレーの背景色が付いた状態でコンテンツを表示できます。デモが＜画像レイアウト＞画像（小）枠付きでご覧になれます。＜画像レイアウト＞標準機能でも背景色は付けられますが、こちらのコードで囲んでやると薄い透過（※不透明度0.9）が付いた淡いグレーでの背景（固定色）になります。またスマホでの”端数”処理機能や【Volar2】独自の余白なども適用されます。テキストを左寄せにしても見出しは中央寄せのままです。シンプル版こちらは見出しとコンテンツ（説明文）だけのシンプルなレイアウト表示で,「画像なし、見出しに背景色、枠のみ」タイプ。これまで同様、独自タグを【Volar2】で用意した専用クラスで囲むだけで表示できます。デモがこちらのページでご覧になれます。画像がない代わりに見出しには背景色を設定。また画像がないので全体に枠を設定してあります。ただし背景色は設定してません。（標準設定で背景色を指定すれば反映はされます）テキストを左寄せにしても見出しは中央寄せのままです。見出し背景色は「緑系・赤系・黒系」をデフォルトでご用意。

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。パーツ＜画像ギャラリー＞のスマホでの見え方をカスタマイズした【Volar2】独自のレイアウト機能をご紹介します。概要スマホでの表示サイズパーツ＜画像ギャラリー＞はスマホで見ると下の画像のようにサムネイル画像がかなり小さく表示されます。一方【Volar2】の専用スタイルを有効化するとちょっと大きめに表示されます。この機能はデフォルトでは無効化されてます。拡大時の画像サイズまたパーツ＜画像ギャラリー＞のサムネイル画像をクリックすると画像全体ではなく左側を中心に一部だけが表示されます。（スワイプすれば残りも見ることはできます）一方【Volar2】ではタップして拡大すると常時100%表示になるよう調整してます。（ピンチアウト（ズーム）すれば拡大表示もできます）どちらがいいかは好みの分かれるところですが、個人的には最初にフル画像が見えて気になったところだけズームする方がストレスはたまりにくいだろうと思ってカスタマイズしてみました。この機能はデフォルトでは無効化されてます。

【Volar2】ではトップページのみですがヘッダー画像を動画ヘッダーに変えることができます。動作チェック済み（対応可能）なのはmp4動画のみです。またトップページのみでの利用となり、それ以外のページでは使えません。Youtube動画は再生開始時のタイトル等が現状では消すことができず、”背景動画としてはみっともない”ので動作チェックすらしておりません。DEMOサイトを見てみる動画の作成及び設定について動画というと「敷居が高い」とつい思っちゃいますが、実はそうでもありません。もちろん企業サイトであればそれなりのレベルのものを作る必要もあるでしょうけど、それなりの機材や人材も揃ってるはずですからそういう意味では問題はないかと思います。ではアフィリエイトサイトなどを運営する個人ならどうでしょう。スキルがある人はそれなりの動画を作ればいいでしょう。そうでない方は…フリーの動画を使うのが手っ取り早いです。ただしフリー動画とうたっていても実際には著作権の表示が必要だったりするのもあるので、その辺はちゃんと確認する必要があります。筆者DEMOサイトで使ってるのは動画ACからダウンロードしたフリー素材です。可能な動画形式はmp4設置可能な動画形式は拡張子が「.mp4」の動画のみです。mp4動画であれば今は基本的にはどのブラウザでも表示可能です。iPhoneで撮影した動画は拡張子が「.mov」になるためそのままだとうまく表示されません。この場合、動画編集ソフトやオンライン動画変換サービスなどを利用してmov→mp4へ変換する必要があります。そもそもそのままだとファイルサイズが大きすぎて使えないので、いずれにしても変換作業は必要です。動画サイズ動画の解像度は特に制限はありません。問題なのはファイルサイズです。一般的に解像度が大きければ大きいほどファイルサイズは大きくなります。ファイルサイズが大きければ画質はよくなりますが読み込みに時間がかかってしまうという大きなデメリットがあります。結論から申し上げますとファイルサイズは最大でも3MB以下に抑えた方がよろしいかと。ファイルサイズを落とす方法はいくつかあります。「解像度を低くする」「画質を若干落とす」「コマ数を落とす」など。（動画の種類や内容によって選択肢が変わってきます）これらは動画圧縮サービスを使えば手軽に実行可能です。私も使ったことがあるのがこちらのサービス。（使い方はググってください）COMPRESSS.COMConvertioYOUCOMPRESSDEMOサイトのヘッダー動画（ドローン撮影による田園風景）の解像度は960×540px、ファイルサイズは2.3MBまで落としてあります。筆者ファイルサイズがあまりに大きいとオンラインサービスでは受け付けてくれない場合もあります。そういう時は（フリー）ソフトをインストールして圧縮をかけるというやり方もあります。粗さ（ボケ感）解消エフェクトヘッダーに載せる動画は解像度（特に横幅）に関係なくブラウザの横幅いっぱいに表示される仕様にしてます。それゆえファイルサイズを落としたいがために解像度があまりに低い（たとえば640pxとか）と、ブラウザの広さに応じて縦横に伸びた場合は粗さが目立ったりボケ感がかなり強調される可能性もあります。そういう時のためにボケ感を”イイ感じに見せる”効果もいくつか搭載してます。SIRIUS2に標準で備わってるヘッダー画像の「オーバーレイの表示」をONにする（少し暗っぽい感じになります）【Volar2】側で用意しているフィルター群（グレースケール・モノクロ・ぼかし・セピア・ドット柄）を被せてボケ感を和らげる背景動画の設定方法動画ヘッダーの設置手順を概要だけご紹介します。動画の登録SIRIUS2には動画表示機能が搭載されてるのでこれを利用して動画を登録します。（ここに登録しておくといろいろ使いやすいんです）①をクリックした後、②のフォルダアイコンをクリックして表示したい動画を選択すると青枠内に動画URLが設定されます。OKをクリックすると専用の”動画タグ”が出力されます。同時に「media」フォルダ内に動画が登録（コピー）されます。ただ今回は動画をサイト内に登録させるのが第一目的なので、一つ前の画像の”動画タグ”は動画ファイル名だけコピーしてさくっと全削除しちゃいます。（使いません）「media」フォルダは先ほどの画像でもわかるように、【Windows】→【ACES WEB】→【SIRIUS2】→【data】→【※動画を設置するサイト名】→【media】の位置にあるので、動画登録機能を使わず「media」フォルダに直接動画フィルを放り込んでもOKです。【※動画を設置するサイト名】は特にいじってなければ”サイト名”が表示されます。ただし『サイトデータのフォルダ名変更』で名称変更をしている場合はこの限りではありません。モジュールの有効化とその中身＜動画ヘッダー＞機能はデフォルトでは無効化されてます。そのためヘッダー画像を動画ヘッダーにするには専用モジュールのコメントアウトを解除して有効化する必要があります。テンプレート→HTMLテンプレート編集→トップページと開き、以下の2つのモジュールのコメントアウトを解除します。※＜コメントアウト＞についてはこちらの記事をご参照ください。コメントアウトの効率的な使い方旧SIRIUS時代から受け継がれてる便利なコメントアウト機能を詳しくご紹介します。①のモジュールには専用のスタイルが格納されてます。今は特に変更の必要はないのでこのままで。（変更の必要性がありそうなところはマニュアルでご説明してます）②のモジュールをダブルクリックすると下のような画面が開くので、赤線部分を先ほどコピーしたファイル名で差し替えます。（※一部を抜粋）これだけで”とりあえず”ヘッダー画像エリアは動画ヘッダーでの表示に変わります。筆者動画ヘッダーの上に画像やテキストを表示させることもできます。背景動画設定時の注意点【Volar2】の動画ヘッダーはできるだけ設置手順を簡素化するべく、SIRIUS2のヘッダー画像設置機能をベースにカスタマイズしてます。メリットは簡単な手順で動画ヘッダーに切り替えられること。しかしながらデメリットもいくつか存在します。そのあたりを解決策も含めてご説明していきます。レイアウトは1カラム（ワイド）トップページのヘッダーをインパクトのある動画に差し替えるくらいですからレイアウトは1カラム（ワイド）のみの対応及び動作チェックとなってます。（通常の1カラムでもイケると思いますが、2カラム or 3カラムは動作保証外です。チェックしてません)なおSIRIUS2のヘッダー画像の機能を”間借り”してるので、ロゴや（グローバル）メニューは通常通り表示されます。＜レイアウト設定＞で【全体設定】の『ページトップ』を「1段（上部固定・ヘッダーワイド）」に設定すると、DEMOサイトのトップページのように動画表示エリアがロゴ画像やメニューの背景部分にまで広がって表示されます。その場合ロゴ画像は透過情報を保持したPNG画像などを用意する必要があります。オーバーレイが使える【サイトオプション】→【デザインの設定】→【ヘッダーの設定】→『オーバーレイの表示』も機能します。筆者【Volar2】の動画ヘッダーは動画の上に静止画やテキストを表示させることもできるので『オーバーレイの表示』をONにすればテキストがより見やすくなります。ほかにも「グレースケール・モノクロ・ぼかし・セピア」といたエフェクト類も用意してます。ヘッダー画像が一瞬表示される【Volar2】の動画ヘッダーはSIRIUS2のヘッダー画像表示機能を”間借り”してるせいか、動画ヘッダーが表示される前に一瞬だけヘッダー画像（header.jpg）が表示されてしまいます。これはちょっとみっともない動作で可能な限り避けたいところ。じゃあヘッダー画像を設定しなければいいかというと、（DEMOサイトのように）動画表示エリアをロゴ画像やメニューの背景まで広げるためレイアウト設定で「1段（上部固定・ヘッダーワイド）」にしてる場合、ヘッダー画像を指定してないとなぜか動画をメニューの背景まで広げることができなくなります。（おそらくスタイルがどこかでぶつかってるんだと思いますが）それにヘッダー画像を未設定にするとそもそもの問題としてサイト全体がヘッダー画像なしでの表示になってしまいます。話がちょっとそれましたが、”ヘッダー画像が一瞬表示される”現象はおそらくファイルの読み込み順のせいかと思われます。ただこれの変更（改修）作業はかなり手がかかりそうなので2つの代替策を考えてみました。①白のヘッダー画像ヘッダー画像が表示されるのが避けられないのなら、”真っ白なヘッダー画像（ファイル名はheader.jpg）”であればヘッダーエリアは一瞬白っぽくなるだけなので違和感はかなり薄れます。その代わりヘッダー画像をトップページ以外でも表示するよう設定しているサイトでは今度はその白画像がヘッダー画像として表示されてしまうことになります。そこでそれを避けるために「header.jpg」ではなく「headers.jpg」をヘッダー画像として読み込む独自タグも別途用意してあります。そちらに切り替えればトップページは白画像（header.jpg）を読込み、上の独自タグを有効化したテンプレートではファイル名を変更（headers.jpg）した元のヘッダー用画像がヘッダー画像として表示されるようになります。予めこちらで100×100pxの白画像（header-empty.jpg）を用意してあります。（ダウンロードファイル内に同梱済み）必要であれば元のヘッダー画像「header.jpg」は「headers.jpg」に名称変更し、上記白画像（header-empty.jpg）を「header.jpg」に切り替えます。筆者反対のやり方、つまりトップページだけheaders.jpgをヘッダーとして読み込む設定にすれば他のテンプレートでの操作はいっさい必要なくなるのでそちらの方がラクと言えばラクです。でも今回の構成ではそれが無理そうなのでやむなく他のテンプレートでの操作にしてあります。②ローディング画面2つ目は個人的には動画ヘッダーが表示されるまで”ゴースト画面”が一瞬でも出てしまうのが気持ち悪いので、それを隠すためDEMOサイトではシンプルなローディング画面を付けてあります。（※画像不使用）筆者本来であればサイトを開くと1～3秒程度『青っぽい画面とくるくる回るローディング画面』が表示され、それが消えると動画がスタートします。（1～3秒という時間は回線速度などによって前後します）しかしながらDEMOサイトはトップページのみのとても”軽い”サイトなので、環境によっては一瞬しか表示されないかもしれません。【Volar2】には上記ローディング画面用の設定も搭載してるのでお好みでご利用いただけます。なおデフォルトでは無効化されてますが、下の2つのモジュールのコメントアウトを解除するだけで即発動します。動画ヘッダーを止めたときは2つのローディング用モジュールも再度コメントアウト状態に戻します。先に「ヘッダー画像が一瞬表示される…」と書きましたが、この”一瞬”の時間はコンマ◯秒～1秒程度の世界です。もしかしたら【サイトオプション】→【基本設定】→【サイトの表示速度】→『画像の遅延表示』をOFFにすることでもっと短くすることもできるかもしれません。『画像の遅延表示』というのは「画面をスクロールしていって画像が表示領域に来たらその時点で画像を読み込む」といういわゆる”画像遅延読み込み”機能のことです。ページ表示時には画像の読み込みをスキップするのでその分サイト表示スピードの改善に役立つ機能と言われてます。この機能、本来であればファーストビュー（最初に表示されるエリア、つまりヘッダーエリア）では逆にいち早く画像を表示できるようそこだけ画像遅延読み込み機能を外せるような設定を付けてるテンプレートもあるんですが、SIRIUS2にはその設定はなく一括での画像遅延読み込み機能になってます。それがヘッダー画像の一瞬表示の時間が長くなってしまう可能性がなきにしもあらず。（あくまで推測です）それゆえ『画像の遅延表示』機能をOFFにすれば多少は…多少は読み込みが早くなって一瞬がホントに一瞬になる可能性も残っています。（あくまで推測ですよ）ただしこの機能をOFFにしてしまうとすべてのページで画像遅延読み込みが機能しなくなるというデメリットも併せ持ってるのでご注意ください。

【Volar2】ではトップページのみですがヘッダー画像をズーム付きのフェード切り替え画像スライダーに変更することができます。こちらでDEMOがご覧になれます。基本仕様【Volar2】のヘッダーエリアの画像スライダーの仕様は以下の通り。ヘッダーエリアに3枚の画像をフェードで切り替えしながらループ表示。（※画像は3枚固定）3個目の画像表示後は1個目の画像に戻る。画像はズームアウトしながらの表示。（※ズームインもズームなしも可能）総尺は1周およそ10秒。（※変更不可）画像上には2段テキストも表示可。（カラーやサイズは変更可）こういった仕様から【Volar2】の画像スライダーはどちらかというと『サイトイメージの向上』的な使い方になろうかと。たとえば時計を扱うサイトなら時計の象徴的なイメージカットとか。美容関連のサイトなら商品のイメージカットや身に着けてる人物のイメージカットなどでしょうか。総尺は1周およそ10秒画像枚数が3枚とか総尺10秒という設定は完全に個人的な好みです。ですがこれ以上長くてもサイト訪問者は見てくれないと思います。この秒数を変えるとなると現在の設定では再計算がものすごく面倒くさいので時間は固定にしてあります。ヘッダー画像に何も設定してないと画像スライダーが表示されないので、必ず何かしらのヘッダー画像を設定しておく必要があります。有効化のやり方＜ヘッダーエリアに画像スライダー＞機能はデフォルトでは無効化されてます。標準のヘッダー画像を【Volar2】画像スライダーに変更するには専用モジュールのコメントアウトを解除して有効化する必要があります。テンプレート→HTMLテンプレート編集→トップページと開き、以下の①と②の2つのモジュールのコメントアウトを解除します。※＜コメントアウト＞についてはこちらの記事をご参照ください。コメントアウトの効率的な使い方旧SIRIUS時代から受け継がれてる便利なコメントアウト機能を詳しくご紹介します。画像設定画像の登録やカスタマイズのほとんどは①の専用スタイルシート上で行います。画像に関しては横幅1400pxぐらいあれば大丈夫かと。あまり小さい画像だとブラウザ幅いっぱいまで引き伸ばされた時にボケボケになる恐れもあります。（それも演出のうちなら問題はありません）その画像を『画像管理』でSIRIUS2内に取り込みます。続いて【テンプレート】→【スタイルシート編集】→【css\header-slide】と開きます。下の赤線部分の「xxx」を、登録した画像ファイル名で差し替えます。①が1枚目の画像ファイル名、②が2枚目の画像ファイル名、③が3枚目の画像ファイル名になります。（.jpg以外の.pngとか.webpの画像は拡張子ごと差し替えてください）画像をフォルダ分けしている場合は若干修正が必要です。たとえば「AAA」というフォルダ内に画像を登録した場合は「../img/AAA/xxx.jpg」と書き換えます。これだけでとりあえず画像スライダーは稼働します。＜レイアウト設定＞で【全体設定】の『ページトップ』を「1段（上部固定・ヘッダーワイド）」に設定すると、当サイトのトップページのように画像スライダーの表示エリアがロゴ画像やメニューの背景部分にまで広がって表示されます。その場合ロゴ画像は透過情報を保持したPNG画像などを用意する必要があります。カスタマイズ可能な項目基本的にはこちらで用意した設定をデフォルトで使っていただくのがベストですがいくつかカスタマイズ項目も用意はしてます。画像にオーバーレイデフォルトで画像にはオーバーレイがかかってます。これが必要ないという方は以下の手順で解除が可能です。テンプレート→HTMLテンプレート編集→トップページを開きます。[% module(【Volar2】ヘッダーに画像スライダー（HTML）) %]をダブルクリックします。該当するモジュールが開くので下の画像のオーバーレイ用のクラスである「cover」というテキストを削除します。「cover」の直前の半角スペースも削除します。元に戻すときは”半角スペース＋cover”になります。画像上にテキスト画像スライダー上にテキストを表示できます。「見出し」と「説明文」の2段形式。（テキスト非表示も可）先ほどと同様テンプレート→HTMLテンプレート編集→トップページを開きます。[% module(【Volar2】ヘッダーに画像スライダー（HTML）) %]をダブルクリックします。該当するモジュールが開くので下の画像の赤枠内を適当なテキストで差し替えます。ただし表示位置は上下左右の中央で固定です。位置の変更ができないこともないですが、座標計算がかなり大変なので固定仕様にしました。テキストの色・明朝体・サイズ変更などは専用スタイルシート側で変更可です。（やり方はマニュアルに載せてあります）SIRIUS2の＜ヘッダーアニメーション＞にしても【Volar2】の＜ヘッダー画像スライダー＞にしてもいずれも有効化するとH1が消えてしまうようなので、1段目のテキスト部分は途中から”h1”に設定を変えてあります。よって1段目のテキストは”サイト名”を入れておくのがベストかと思います。画像の高さデフォルト設定ではブラウザの画面サイズの高さに自動的に合わせる仕様になってます。これは700pxなどの固定高さに変更することもできます。スマホでは真ん中エリアが表示されます。

【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テンプレート編集→エントリーページと開きます。開閉式サイドメニューを有効化するには以下の2ヵ所のモジュールのコメントアウトを解除します。※＜コメントアウト＞についてはこちらの記事をご参照ください。コメントアウトの効率的な使い方旧SIRIUS時代から受け継がれてる便利なコメントアウト機能を詳しくご紹介します。これで実装完了です。開閉式サイドメニュー内に本来のサイドメニュー（SIRIUS2では”メインメニュー”）の内容が格納され、最下段に表示されるはずのメインメニューは自動的に非表示となります。筆者スマホでは通常通り最下段にサイドメニューの内容が表示されます。シンプル版2024年6月のSIRIUS2 ver.1.180にてテンプレート（和モダン）が追加されました。それに伴い、超シンプルな開閉式サイドメニューも追加搭載しました。デモはこちらのサイトでご確認できます。『開閉式サイドメニュー・シンプル版』の特長は以下の通り。第1階層のみのエントリーぺージとカテゴリーフォルダーのみを、1カラムレイアウトで中央寄せ表示。（通常は3カラム）カテゴリー内のエントリーページは非表示。つまりデモサイトの旅館サイトなどのように、エントリーページ数がさほど多くないサイト向けの超シンプルな開閉式サイドメニューとなってます。使える場面はそう多くはないでしょうが、試しに作ってみました。使い方基本的な使い方は先ほどと同じです。ただし有効化するモジュール名が違います。シンプル版で有効化するのは<!-- ★[% module(【Volar2】PCでもサイドメニュー・シンプル（スタイル）) %]★ -->というモジュールの方です。こちらを有効化した場合は、もう一方の[% module(【Volar2】PCでもサイドメニュー（スタイル）) %]の方はコメントアウトして無効化しておきます。★ -->

新機能追加このあとにご紹介している【Volar2】のフルワイド背景画像機能は設定がやや面倒なため、設定を簡略化したフルワイド背景画像（シンプル）機能を新たに搭載しました。PC表示時のみの背景画像の指定とダークモードにするかしないかだけの設定と機能は絞られますが、設定自体はかなり簡素化してます。よって今後はこちらをおすすめします。なお画面幅の狭いスマホでの背景画像は設定がかなり難しくかえって見づらくなるケースもあったりするので［フルワイド背景画像（シンプル）］では搭載を見送りました。紹介ページはこちら。SIRIUS2には＜ブロック設定＞という機能が新たに搭載されており、その中の「記事のワイド化」にチェックを入れるとブラウザ幅いっぱい（フルワイド）に背景色を広げることができます。【Volar2】ではこれにプラスして背景画像もフルワイドで表示できるオプションを搭載してます。現時点では1カラムのトップページのみの対応となってます。追記：2023.12.20SIRIUS2 ver.1.140にて『ブロック設定』に背景画像の設置機能が追加されました。※＜ブロック設定＞についてはこちらの記事をご参照ください。ブロック設定SIRIUS2の1カラムLP向け＜ブロック設定＞についての詳細ページ。SIRIUS2のアップデートで『ブロック設定』に背景画像の指定機能が追加されたため、（このあとでも多少触れてますが）先にSIRIUS2標準の『ブロック設定』の背景画像とカスタムテンプレート【Volar2】の『フルワイド背景画像』との主な違いを挙げておきます。『ブロック設定』のメリット専用の設定画面で画像を選択するだけの簡単仕様。『ブロック設定』のデメリット背景画像はスクロールに応じて移動（連動）するタイプで、画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合もある。『フルワイド背景画像』のメリット背景画像はスクロールしても動かない固定表示。画像の表示範囲はブラウザ画面の高さに合わせて画像幅が決まるため、元の画像と極端に表示範囲が異なる可能性はどちらかというと低め。スマホの場合はスマホの画面高に合わせる仕様。PCとスマホで別々の画像を指定可能。オーバーレイ効果だけでなく、ぼかしやセピアカラー、モノクロ機能も搭載。『フルワイド背景画像』のデメリット編集画面上で専用のモジュール名を挿入する必要あり。（解除するにはそのモジュール名を削除 or コメントアウト）『ブロック設定』のように（SIRIUS2内のプログラムで）専用のダイアログを出すことができないので、モジュール内の指定箇所に画像名を手動でコピー＆ペーストする必要あり。フルワイド背景画像の概要当サイトトップページを例に機能の詳細をご紹介していきます。ご覧になる時期によっては説明用のキャプチャ画像の内容やデザインが変更になってる可能性もあります。予めご了ください。こちらは記事ブロック2を使って編集した「旧SIRIUSとの比較」というブロックで、背景画像がブラウザの横幅いっぱいにまで広がってます。基本的には記事ブロック全体を1個の背景画像で覆うというイメージになります。（記事ブロックの途中だけという使い方もできないことはありません）『記事ブロック』とは？記事を個別に作成できるよう、SIRIUS2には10個の記事ブロックが搭載されてます。（右端に表示されてる数字部分をクリックすると別の記事ブロックに移動可）必ず分けて書く必要はなく、記事ブロック1に全部書いても問題ありません。主な機能としては1枚の背景画像をフルワイドで表示可。PCとモバイル（タブレット＆スマホ）で別々の画像設定可。PCではスクロールしても背景画像は固定表示のまま。モバイル機器ではスクロールと共に背景画像も移動してしまいます。（iOSの仕様上の問題）そのためモバイル機器では背景画像は繰り返し表示にしてあります。モバイル機器でも背景画像が”疑似的に”固定表示されるように変更しました。背景画像を自動的に暗めにしてテキストを読みやすくするダークモードも搭載。ダークモード時は主要部分のテキストが自動で白に変更されます。背景画像を少しぼかしてテキストを読みやすくするぼかし機能も搭載。同じように背景画像のモノクロ化、セピア化機能も搭載。これらの切り替えは瞬時に行えます。背景画像フルワイド化のやり方フルワイドで表示したいエリアを2個のモジュールで囲むこちらで用意した2つのモジュールを設置（挿入）します。（通常は記事ブロック内の最初と最後に設置します）これだけでフルワイド化は終了です。ココがちょっと元に戻す場合は2個のモジュールいずれも削除するかコメントアウトします。こういう時は最後のEND用のモジュールを削除し忘れがちなんですが、それをやってしまうとレイアウト崩れを引き起こしてしまいます。（面倒ですが現状ではこのやり方しかとれません）モジュール名のオシリに”START”と付いてる場合は必ず”END”があると思っていただければ。また記事ブロックごとに背景画像を変えることができる仕様上、モジュール内の数字と記事ブロックの数字を一致させる必要があります。記事ブロックを移動させたときなんかはここを見落としがちで、数字が一致してないと思った通りの画像が表示されなくなります。画像を選択最初のモジュールをダブルクリックすると画像挿入欄が表示されるので、表示したい画像ファイル名で差し替えます。①がPC表示時の画像設定で、②がモバイル用。赤線の部分が差し替える部分です。（ファイル名をコピー＆ペースト）画像をフォルダ分けしてない場合は「img/ファイル名」となります。しかしながら画像をフォルダ分けしてる場合は「img/フォルダ名/ファイル名」になります。本当はSIRIUS2のように専用のダイアログ内で画像選択とかできればいいんですけどさすがにそれは無理なのでね。ご容赦ください。背景画像の表示に関して、PCの場合は画面をスクロールしても背景画像は固定のまま動きません。これに対してiOS搭載モバイル機器では背景画像の固定化ができないため、必然的にスクロールと共に背景画像も動いてしまいます。しかしながら【Volar2】では疑似的に固定化させる仕様にしてます。一応言語化しますと、背景画像が設定してあるエリアがスクロールで表示される際、テキストと一緒に背景画像が下から上がってきます。そのままエリア内のテキストや画像が終了するまでスクロールしても背景画像は画面内に固定表示されます。そしてエリア内のコンテンツがスクロールと共に終わりになると背景画像も上に上がって消えるというものです。なおモバイル背景画像にPC用の背景画像と同じ画像を指定している場合は、下の画像のように一部のエリアが表示される仕様になってます。ゆえにモバイル機器では想定していたのと違う画像が表示されるケースも少なくありません。そんな時はモバイル用に別画像を指定します。ちなみに当サイトでPC用に用意したこちらの画像ですが、（線画はライナストックのイラスト素材をお借りしてます）これをそのままスマホで見るとこんな感じで「？」という雰囲気になっちゃいます。（このあと紹介する”ダークモード”が有効なので画像が少し暗くなってます）ご覧になる時期によっては説明用のキャプチャ画像の内容やデザインが変更になってる可能性もあります。予めご了ください。そこでモバイル用にはこちらの画像を別指定してみました。前よりはおさまりがよくなりました。（必要なら）オプションも選択可能背景に画像を設置する場合、デメリットが1つあります。（画像によっては）テキストの可読性が下がる。先ほどご覧いただいた背景画像の例はダークモードというエフェクトがかかってます。そのエフェクトを追加する前の素の状態がこちら。（先ほどと使用画像は別になりますが）テキストがちょっと見にくくないですか？これを解消するために追加したのが「透明度の付いた暗めのフィルムを1枚被せたような効果」を演出できるオーバーレイというエフェクトです。（※以降は”ダークモード”と表記）筆者フリー素材なんかをそのまま使うにはちょっと使いにくいって方はこれ以降のオプション機能を設定するとイイ感じの仕上がりになる場合があります。オーバーレイとは？画像の上に色や画像などを重ねて印象を変える手法。画像を少し暗くしたり明るくすることで画像の上に載ってるテキストの視認性をアップさせる効果もあります。ダークモードこのオーバーレイを追加すると背景画像が若干暗くなって、画像自体は見せるのが主目的ではなくあくまでイメージとしての役割感を強めることができます。ただしその反動として黒のテキストはより見にくくなってしまいます。そこでダークモード時はテキストカラーが自動で白に変わる設定も同時に付けてます。縦線ホールドで左右にドラッグ＜ブロック設定＞でもテキストカラーを白に変えることはできます。ただしブロック設定の場合はテキストすべてが白になってしまうため、たとえば（背景が明るい青の）『ヒント』装飾を使って表示させたコンテンツなんかは中身のテキストが全く見えなくなってしまうという現象が起きてしまいます。一方、【Volar2】のダークモードは、主たるテキストのみが自動で白に変わるよう調整しているのでそういった弊害は少ないです。筆者”主たる”とか”少ない”書いてるのはすべての表示で可読性をチェックしたわけではないからであって、不具合が確認できたものについては順次対応していきます。どうやっても事前の設定だけではテキストが白で表示されないケースが出てきた場合に備えて『テキストカラーを強制的に白にするクラス（.f_w）』も別途用意はしてます。ダークモードの設定方法ダークモードにするのは至って簡単です。こちらで用意したモジュールテキスト内に「dark」と書き足すだけ。これだけで背景画像が暗くなり、テキストカラーは白に変わります。筆者ただしダークモードに限り、「dark」と加筆された専用モジュール内にも同じように画像ファイル名をコピー＆ペーストしておく必要があります。一度設定しておけばあとは「dark」を付けるだけで瞬時に背景画像が暗くなります。「背景画像はそのまま・テキストカラーも黒のまま変更なし」の条件下でテキストの可読性をあげるやり方として、『テキストブロックの背景に半透明の白背景を置く』というやり方もあります。ただそこまでやるとHTML構造がどんどん複雑になって、初心者の方は万が一表示がおかしくなった際の修正にとまどうおそれもあるので、ここでは「そんなやり方もある」ということだけご紹介しておきます。画面の狭いモバイル機器で背景画像を表示させるとかえって見にくくなるケースもあったりします。そういう時はモバイル機器だけ画像非表示もできます。その代わりに背景”色”を設定したいときは＜ブロック設定＞を利用します。ただしダークモード時に限ってはダークモード自体は”活きてる”のでテキストカラーは白のままで表示されてしまいます。よって背景色が明るいとテキストが見えにくくなるという現象が起きてしまいます。そのためダークモード時は『ブロックの背景色』で暗めの背景色を選択する必要があります。またダークモード時はたとえば明るい赤をして指定してもダークモード効果により若干暗めの赤になってしまうのでこれらの点だけご注意ください。ぼかしモードテキストの可読性アップのやり方として『背景画像をぼかす』やり方（ぼかしモード）も搭載してます。上のサンプル画像でもわかるように、ぼかしモード時のテキストカラーは変わりません。よってぼかしモードで使える背景画像はどちらかと言えば明るめの素材になってきます。ぼかしモードの設定方法ぼかしモードにするのも簡単です。ダークモードと同じようにモジュールテキスト内に「blur」と書き足すだけ。これだけで背景画像にぼかし効果がかかります。モノクロ・セピアモードダークモード・ぼかしモード以外にモノクロモード（背景画像が白黒になる）、セピアモード（背景画像がセピア調になる）も用意してます。設定の仕方はこれまでと同じで、モノクロモードなら「bw」という文字列で、セピアモードなら「sepia」という文字列で置き換えるだけで瞬時に発動します。（ぼかし効果はつきません）補足説明ダークモード以外はテキストは通常カラーのまま。ぼかしモードとモノクロモードの併用といった使い方は不可。どうしても2つのモードを同時使用したい時は…画像加工ソフトを使ってそれっぽく加工した画像を（エフェクトに頼ることなく）そのまま背景画像として使うのが手っ取り早い。＜フルワイド背景画像＞と＜ブロック設定＞による背景色指定のどちらも設定していた場合はフルワイド背景画像が優先表示される。画像加工ソフトならAffinity Photoをおススメします。画像加工はAffinity Photoにお任せ本格的な画像加工でおススメするのが安価で高機能なAffinity Photoです。背景色＋ダークモードの組み合わせこれまでは背景画像を利用する前提でのレイアウト調整でしたが、ここでは背景色に応じて自動的にダークモードにする機能についてご紹介していきます。ダークモードと言っても具体的にはテキストカラーを自動的に白に変えるだけのものですが、割と便利な機能です。たとえばSIRIUS2の＜ブロック設定＞で『ブロックの背景色』に濃いめの色を指定したとします。当然黒いテキストは見づらくなります。（範囲選択したところだけ反転してかろうじてわかります）「じゃあテキストカラーを白に設定しよう」ということで『ブロックの文字色』に”白”を設定してみます。すると通常のテキストは問題ないんですが、ヒント枠内のテキストまで白になってしまいました。しかも2個のH2見出しは依然として黒のままです。そこで今度は＜ブロック設定＞の『記事タイトルの文字色』にも白を設定してみます。ところが”記事タイトル”に入力したH2見出しは白になったものの、（当記事執筆時点では）”記事内部に設置したH2タイトル”は黒のままです。（理論的には間違いではないんですけどね）筆者H3タイトル以下はちゃんと白になるのでこれはおそらく調整ミスでしょう。いつか直るんでしょうか。いずれにしてもこれだとちょっと使えないですよね。そこで今度はフルワイド化したいエリアのアタマとオシリを、【Volar2】で用意している2個の専用のモジュールではさんでやります。その結果がこちら。必要な部分だけ”白”テキストになりました。筆者ただし＜ブロック設定＞内の『ブロックの文字色』のみ空欄にしてあります。ここに白のカラーコードを入れちゃうとすべてのテキストが白に変わっちゃうので。『記事タイトルの文字色』は白設定のままです。（ここは【Volar2】では制御できないため）元に戻すときは2つのモジュールを両方とも削除（もしくはコメントアウト）する必要があります。どちらか一方だけだとレイアウト崩れが起きるのでその点だけご注意ください。

【Volar2】の＜フルワイド背景画像（シンプル版）＞ですが、機能としてはSIRIUS2標準搭載の『ブロック設定』の背景画像とほぼ同じです。では何が違うのか。【Volar2】に元々搭載していた【Volar2】の＜フルワイド背景画像＞機能も含めてその違いを先にご紹介します。＜フルワイド背景画像（シンプル版）＞も現時点では1カラムのトップページのみの対応となってます。A SIRIUS2ブロック設定B 【Volar2】フルワイド背景画像C 【Volar2】フルワイド背景画像シンプル版①設定方法ダイアログ内で完結。編集画面上で専用のモジュール名を挿入する必要あり。専用スタイル内で手動設定。②画像固定スクロールにしたがって画像も移動。スクロールしても画像は固定。スクロールしても画像は固定。③画像表示範囲画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合もあり。ほぼ元のサイズのまま表示。ほぼ元のサイズのまま表示。④スマホ表示スマホでも表示されるが、画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合もあり。別途スマホ用の画像設定あり。スマホの画面高に合わせる仕様なのでコンテンツ量にかかわらず想定したイメージに近い感じで表示される。スマホでは非表示。（PC表示時のみ）⑤記事タイトル（H2見出し）記事タイトル部分も背景画像エリア内で表示。記事タイトルは背景画像エリア外。記事タイトル部分も背景画像エリア内で表示。⑥オーバーレイ白や黒系のオーバーレイやフォントカラーの変更用設定あり。オーバーレイ効果だけでなく、ぼかしやセピアカラー、モノクロ機能も搭載。ダーク系のオーバーレイのみ搭載。①設定方法Aの『SIRIUS2ブロック設定』は専用画面内ですべてを完結できるのが一番の強みです。これに対しBの『【Volar2】フルワイド背景画像』は（親となる）専用モジュールを2ヵ所挿入する必要があります。画像の指定は（親）モジュールを開いた先にある（子）モジュール画面でPC用とスマホ用の画像ファイル名を入力します。なおモジュール内容は多少簡略化して画像化していますが他にもいろいろ設定項目があります。そのため慣れないとちょっと使いづらい感は否めません。Cの『【Volar2】フルワイド背景画像・シンプル版』は専用のスタイル画面を用意しており、SIRIUS2の上部メニューからテンプレート→スタイルシート編集→（専用スタイル）を開いて画像ファイル名を入力します。②画像固定＆③画像表示範囲④スマホ表示Aの”スクロールにしたがって移動”と残り2つの”スクロールしても画像は固定”では、表示される画像エリアに若干の違いがあります。Aはコンテンツ量が少ない場合はBとC同様、元の画像のサイズに近い形で表示されます。しかしながらコンテンツ量が増えてくるとAはコンテンツの高さに合わせて画像が拡大されるため、ケースによってはなんの背景画像なのかわからない場合も出てきます。これはスマホでも同じで、コンテンツが増えれば触れるほど画像が拡大されて、もはや背景画像の意味をなさなくなるケースも多々あります。Bの『 【Volar2】フルワイド背景画像』でスマホ用の画像を別指定すれば、スマホの画面高に合わせた疑似的な固定表示ができます。（設定がやや面倒）⑤記事タイトル（H2見出し）AとCに関しては記事ブロック全体に背景画像が敷かれるので記事タイトルに記入したH2見出しも背景画像内に収まります。これに対しBは記事本文エリア内だけをカバーする背景画像になるため、記事タイトルに記入したH2見出しは背景画像外に表示されます。ただしこれは記事本文エリア内にH2見出しを書くことで解決はします。⑥オーバーレイAにはオーバーレイの設定が標準で搭載されてます。ただしダーク系のオーバーレイ時にテキストを白に設定した場合、コンテンツによっては見づらくなるケースもあります。Bはモジュール名をちょっと変更するだけでダークモードやぼかし機能を即座に有効化できます。またダークモード時（※ダーク系のオーバーレイ時）は自動で必要な部分のみテキストが白に変換されるよう設定してます。Cはダークモードのみの機能搭載ですが、ダークモードにしたい時は該当するスタイル部分の前後のコメントアウトを解除するだけで即発動します。使い方上部メニューからテンプレート→HTMLテンプレート編集→トップページと開き、以下のモジュールのコメントアウトを解除して有効化します。<!-- ★[% module(【Volar2】フルワイド背景画像・シンプル（スタイル）) %]★ -->次に上部メニューからテンプレート→スタイルシート編集→（専用スタイル名）を開いて記事ブロックごとに背景画像に指定したいフィル名をコピー＆ペーストします。これで終了です。

ここはランディングページ（LP）の体裁でご紹介していきます。ご覧になってわかるようにコンテンツ以外は（最下部のコピーライト表記を除いて）非表示にしてます。こういったLPを作るには不必要なブロックを1個ずつ消す（非表示にする）必要があるんですが、1個1個確認しながらスタイルシートを操作するのは初心者やスタイルに詳しくない方にはかなり面倒な作業となります。【Volar2】ではそういった方のために予め消したい項目をリストアップして用意してあります。たとえばこのページに関してはSIRIUS2標準の項目＋【Volar2】独自の項目すべてを非表示にする設定から、H1ページタイトルとコピーライトのみ表示するカスタム設定にしてあります。機能が増えてきた場合はその部分が表示されてることも予想されます。その場合は分かり次第、追加設定で対処します。設定方法項目はリスト形式で用意してあり、（マニュアル操作にはなりますが）すべて非表示にしたければこちらで用意した設定をコピー＆ペーストするだけです。またこのページのように「ページタイトルと最後のコピーライトだけ表示させたい」なんていう場合は表示したい項目だけをコメントアウトするだけで表示できるようになってます。やり方としてはまずはサイト構成画面内の1カラムページにしたいページ上で右クリック→［エントリーページ（個別ページ）の設定］を開きます。レイアウトタブ内のカラム数で「1カラム」を選択、これで1カラムに変わります。サイドメニューを非表示にしたいなら「メインメニューを非表示にする」にチェックを入れます。このようにサイドメニュー無しの1カラムページはSIRIUS2標準の機能ですぐに作れます。ここからは【Volar2】の設定です。個別ページの設定で詳細設定タブをクリック→スタイル割り込みにこちらで用意している専用のスタイルをコピー＆ペーストします。デフォルトが非表示設定なので、ヘッダーやパンくずリストやフッターなど全消し（全部非表示）ならそのままでOK。これがたとえばH1ページタイトルは活かしたまま（表示）にしたいなら該当する項目をコメントアウトして除外します。リストの右側にはそれぞれどんな項目なのかコメントアウトで紹介してるのでそれをもとに選択していくだけで、必要なモノだけを表示させることができるようになってます。ロゴ画像及びH1（ページタイトル）に関しては中央寄せの設定にしてあります。（元の左寄せにも戻すことも簡単にできます）直前のページに戻るこのページを閉じるトップページに戻る

【Volar2】にはブラウザの右端に常時表示可能なサイドボタンを搭載してます。こちらが通常版です。（当サイトがデモになります）機能追加縦書き＆ボタン2個の縦書き（版）も追加しました。※”サイドボタン・縦書き”が加わったことで、これまでの『サイドボタン』は『サイドボタン（通常版）』と表記します。概要＜サイドボタン（通常版）＞も＜サイドボタン・縦書き＞もデフォルトではOFFになってます。また通常版はPCのみでの表示に限定、縦書き版はPC＆モバイルでも表示できます。＜サイドボタン（通常版）＞の特長としては、嫌みのない程度（？）に透過させてます。幅もウザがられない程度（？）に抑えてます。（Max 70px）日本語で4文字が最大。それ以上は改行されます。テキスト上のアイコンは当サイトではicomoon（読み方わからず）を使ってますが、SIRIUS2に標準搭載のアイコンや画像などお好きなものが利用できます。（※アイコンや画像無しでもOK）作成・修正はモジュール内のリストに表示したい（アイコンや）テキストを記入するだけ。画面幅の広いPC表示時のみの機能にしてるので、スマホ等では代替機能としてスマホ固定フッターメニューのご利用をおすすめします。理論上は無制限に増やせますが、実質的には最大5個程度に抑えておくとこれまたウザがられないかと。＜サイドボタン・縦書き＞の特長としては、通常版の縦書き版。ただしスマホでは横書き表示（最下段）。ボタンは2個で固定。デザインも固定。テキストの量によって高さの変更は可。使い方（通常版）＜サイドボタン（通常版）＞を有効化するには表示したいテンプレート、たとえばトップページなら上部メニューからテンプレート→HTMLテンプレート編集→トップページと開き、以下の赤枠内のモジュールのコメントアウトを解除（削除）します。必要であれば他のテンプレート上でもコメントアウトを解除します。すぐ下にある＜サイドボタン・縦書き＞用のモジュールとの同時有効化はできません。※＜コメントアウト＞についてはこちらの記事をご参照ください。コメントアウトの効率的な使い方旧SIRIUS時代から受け継がれてる便利なコメントアウト機能を詳しくご紹介します。＜サイドボタン（通常版）＞用モジュールの[% module(【Volar2】サイドボタン（HTML）) %]をダブルクリックすると下のような入力エリアが表示されます。（※簡略化してます）サンプルにしたがってアイコン画像やオリジナルの画像タグ、テキストを入力していきます。（画像はSIRIUS2の画像管理からの入力が早くて確実です）モジュール上で表示幅のみカスタマイズできます。テキストカラーや背景色は”一応”固定にしてあります。（変更がけっこう面倒なので…）SIRIUS2搭載アイコンの簡単な入力方法はマニュアルに記載しておきます。使い方（縦書き版）＜サイドボタン・縦書き＞を有効化するには表示したいテンプレート、たとえばトップページなら上部メニューからテンプレート→HTMLテンプレート編集→トップページと開き、以下の赤枠内のモジュールのコメントアウトを解除（削除）します。必要であれば他のテンプレート上でもコメントアウトを解除します。すぐ上にある＜サイドボタン（通常版）＞用のモジュールとの同時有効化はできません。＜サイドボタン・縦書き＞用モジュールの[% module(【Volar2】サイドボタン・縦書き（HTML）) %]をダブルクリックすると下のような入力エリアが表示されます。（※簡略化してます）サンプルにしたがって表示したいテキストに差し替えます。モジュール上でテキストカラーや背景色はカスタマイズできます。（PC・スマホ共通）PCでは縦型のボタンはスマホでは横幅に変化します。そのスマホの横幅（表示幅）は限界があるので高さ（横幅）は固定です。そのためテキストの量には限りがあります。（最大7文字程度）位置はブラウザ高さの中央で固定です。

【Volar2】ではサイズ違いのオリジナルのバナーデザイン機能を搭載してます。主に1カラム（ワイド）での利用を想定してデザインしてます。また画像自体はあなたご自身でご用意していただく必要があります。実際の表示（デモ）は【Volar2】オリジナルバナーでご覧になれます。横幅短めの簡易バナー主にフッター周りで使えそうなバナーデザインになります。サンプルがこちら。2～5個まで設置可能。画像幅及び画像間の余白は個数に応じて自動調整。（PC）画像を暗くするオプション付き。バナーにマウスオーバーすると画像が少し大きくなる演出付き。（※PCのみ）スマホでは1列縦表示。テキストカラーは白固定。（変更も一応可能）このページでご紹介する3タイプのバナーすべて、基本的にはこちらで用意している専用のHTMLコードをコピー＆ペーストしたあと画像とテキストを差し替えるという若干の手間は生じます。（当該HTMLコードはマニュアルに記載してます）画像に関してはSIRIUS2の画像挿入機能を使えば当該箇所に自動的に画像用コードが挿入されます。テキストは当該箇所にお好きなテキストを記入します。その後SIRIUS2のリンク機能を使ってリンクURLを差し替えていただくだけでデザイン済みのバナー画像として表示できる仕様です。余白なしのバナー少し大きめのバナーデザインになります。サンプルがこちら。2～5個まで設置可。画像幅は個数に応じて自動調整。（PC）画像を暗くするオプション付き。画像は余白なしの接着表示。バナーにマウスオーバーすると画像が少し大きくなる演出付き。（※PCのみ）タブレットでは固定幅で列数は自動調整。スマホでは1列縦表示。テキストカラーは白固定。フルワイドのバナーコンテンツエリア幅まで広がるバナーデザインです。サンプルがこちら。横幅はフルワイドで固定。画像を暗くするオプション付き。縦にいくつでも増やせます。画像間の空きはなく余白なしの接着表示。バナーにマウスオーバーすると画像が少し大きくなり、テキストも少し右に動く演出付き。（※PCのみ）テキストカラーは白固定。

【Volar2】では常にループし続けるスライダー機能を搭載してます。1カラム（ワイド）での利用を想定してデザインしてます。実際の表示（デモ）は施設のご案内（【Volar2】）でご覧になれます。概要＜ループスライダー＞の主な特長としては、常にループし続ける。スクリプト不要でスタイルシートのみの軽量化を実現。設定はすべてモジュール上で完了。画像幅はPC表示時のみ変更可能。（モジュール上で変更可）画像下に説明文や画像全体にリンク付けも可。ループスピードは”一応”固定。（スタイルシート上で変更は可）使い方＜ループスライダー＞を設置したい箇所に以下のモジュールを挿入します。[% module(【Volar2】ループスライダー（HTML）) %]モジュールを開くと下のように画像挿入用のコードが5つ用意されてます。あとは『（※画像を挿入）』のところをSIRIUS2の画像挿入機能で画像パスに差し替えるだけで完了です。説明文が必要なら『（説明文をここに記載可能）』のところを好きなテキストで差し替えます。不必要なら『（説明文をここに記載可能）』を削除します。<div class="xxx">（※画像を挿入）（説明文をここに記載可能）</div>デフォルトで5つの画像挿入用コードを用意してますが、速度一定で常にループしているのであまり数が多いとじっくり見てはくれないと思います。それでももしも数を増やしたい場合は先のコードを丸ごとコピーしてすぐ後ろにペーストすれば数は増やせます。反対に減らしたい場合は減らしたいコードを丸ごと削除するか、前後をコメントアウトすれば一時的に非表示にもできます。

【Volar2】では左にテキスト・右に画像ギャラリーというある意味”ピンポイント”なレイアウト機能を搭載してます。（適当な呼び名がないので”スプリット［分割］ギャラリー”と名付けてます）1カラム（ワイド）での利用を想定してデザインしてます。ピンポイントなレイアウトなので、商品やサービス等の紹介などで使えるかと。実際の表示（デモ）は露天風呂【Volar2版】でご覧になれます。概要＜スプリットギャラリー＞の主な特長としては、左エリアには見出しや説明文などのテキストを、右側にはサムネイル画像をクリックするとメイン画像が切り替わるスライドショーを表示するレイアウト。（※PC表示時のみ）モバイル機器ではテキストエリアは上に、その下に画像スライドギャラリーというレイアウト。サムネイル画像はPC表示には5個、タブレットでは4個、スマホでは2個の固定レイアウト。画像数が表示数を超えた場合はサムネイル画像をマウスでドラッグ（or スワイプ）すれば表示可。設置できるのはページ内に1個だけ。使い方＜スプリットギャラリー＞を表示したい箇所に以下のモジュールを挿入します。[% module(【Volar2】スプリットギャラリー1) %]上のモジュールをダブルクリックすると下のようなサブモジュールが表示されます。（※簡略化してます）①のモジュールを開くとテキスト入力画面になるので好きなテキストを記入します。（通常の編集と同じです）縦書き表示にするには【Volar2】の縦書きモードを利用します。（マニュアルに詳細を書いておきます）②のモジュールを開くと下のように画像挿入用のガイドが表示されるので『（※ここに画像を挿入）』という部分を削除してSIRIUS2の画像挿入機能から画像を指定していきます。（※簡略化してます）続いて編集画面の左側にあるサイト構成ツリーから＜スプリットギャラリー＞を利用するページの個別設定を開き、【詳細設定】タブの『</head>タグ前に挿入する内容』欄に以下のモジュールを記載します。[% module(【Volar2】スプリットギャラリー（スタイル）) %]編集画面で右クリック→【タグ挿入】→【モジュール挿入】で入力した上記モジュールをCtrl＋X（カット）→『</head>タグ前に挿入する内容』にCtrl＋V（ペースト）するのが簡単で確実なやり方です。最後に【詳細設定】タブの『</body>タグ前に挿入する内容』欄に以下のモジュール名を記載します。[% module(【Volar2】スプリットギャラリー（スクリプト）) %]これでデモページのような＜スプリットギャラリー＞が表示されます。使用する画像のサイズが異なってるとメインエリアに表示される画像の高さに違いが生じることもあります。そうすると画像が切切り替わるたびに高さの違いによってカクカクするので画像サイズは統一しておくことをおすすめします。これで1個のスプリットギャラリーが完成しますが、使いたいのは1ヵ所だけというわけにもいかないこともあるかと都合5つのモジュールを用意しています。（モジュールを複製＆若干の修正をすれば実際には何個でも作れます）カスタマイズ機能は特に設けておりません。（設定が面倒なので）同じページに複数の＜スプリットギャラリー＞は設置できません。ページが異なる分には問題ありません。ただし異なるページにそれぞれ＜スプリットギャラリー＞を設置する場合、その都度ページの個別設定を開き、『詳細設定』タブの『</body>タグ前に挿入する内容』欄と『</body>タグ前に挿入する内容』に前述したモジュール名をペーストする必要があります。

【Volar2】では【パーツ】→＜口コミ＞を利用した人物紹介欄を作成できます。※＜口コミ＞についてはこちらの記事をご参照ください。口コミSIRIUS2の＜口コミ＞機能についての詳細ページ。2タイプの人物紹介欄こちらが通常の【パーツ】→＜口コミ＞機能で作成したサンプルです。編集画面では下のような独自タグで出力されます。[% review(口コミ1) %]この独自タグを【Volar2】で用意したクラスで囲みます。<div class="xxx">[% review(口コミ1) %]</div>すると下のようなレイアウトでの人物紹介欄が表示されます。ワイドタイプ縦長画像と右横にテキストエリアの1カラム表示。（タブレットとスマホでは1列縦並び表示）ノーマルタイプ画像とテキストエリアの縦並び＆2カラム表示。（PC及びタブレット）（スマホでは1列縦並び表示）実際の表示サンプルがデモサイトの＜口コミ＞人物紹介でご覧になれます。

【Volar2】では【パーツ】→＜アイテム比較＞を利用して1カラムページ用の並列表記かつ固定表示FAQを作成できます。デモはトップページでご覧になれます。※＜アイテム比較＞についてはこちらの記事をご参照ください。アイテム比較SIRIUS2の＜アイテム比較＞についての詳細ページ。やり方完成型はこんな感じです。（PC）【パーツ】→＜アイテム比較＞を開いて下のように質問と回答を書き込むだけ。作成し終えたら専用の独自タグで出力します。[% compare(※管理名) %]その独自タグを【Volar2】で用意している専用のクラスで囲めば先ほどのようなレイアウトで表示されます。<div class="xxx">[% compare(※管理名) %]</div>2段、3段...と増やした時の端数処理も適用できます。なおタブレットでの表示はPCと同じレイアウトなので、1グループの＜アイテム比較＞は最大で4つまでがレイアウト的に限界かと。

【Volar2】では【パーツ】→＜アイテム比較＞を利用して、可視領域に達したらカウントアップするカウンター機能を実装してます。デモはトップページでご覧になれます。※＜アイテム比較＞についてはこちらの記事をご参照ください。アイテム比較SIRIUS2の＜アイテム比較＞についての詳細ページ。事前準備事前準備ですが、トップページとエントリーページで若干異なります。トップページ上部メニューからテンプレート→HTMLテンプレート編集→トップページを開き、下のモジュールのコメントアウトを解除します<!-- ★[% module(【Volar2】カウントアップ（スクリプト）) %]★ -->エントリーページこの機能を使いたいページの【個別ページの設定】を開き、［詳細設定］タブの『</body>タグ前に挿入する内容』のところに【Volar2】で用意しているモジュールを挿入します。操作のやり方【パーツ】→＜アイテム比較＞を開いたら、指定箇所に表示したい内容を記入します。（説明文は省略可・価格欄には専用のコードをコピー＆ペースト）記入が済んだら独自タグで出力します。その独自タグを【Volar2】で用意している専用のクラスで囲みます。<div class="xxx">[% compare(※アイテム比較管理名) %]</div>これでトップページのサンプルのようなカウンターが表示されます。（実際にはアニメーションしながら表示）カウンターが見える位置までスクロールしたらカウントアップのアニメーションが始まります。アニメーションは1回限りでページをリロード（更新）すれば再度アニメーションします。数値の色や大きさは変更可。（スタイルシート上での変更）「タイプ01」でのみ利用可。

【Volar2】では指定した日にちになると現価格（数値）を自動的に新価格に変更してくれる機能を搭載してます。概要どういう時にこの機能が使えるのかというと、たとえば1ヵ月後に値段が変わる商品があった場合、その当日に金額を変更できればそれにこしたことはありません。しかしながら変更するのをつい忘れてしまってしばらく旧料金のままだったなんてケースはままあることかと思います。そういう時にこの機能を有効化しておけば変更し忘れを防ぐことができます。自サイトの商品の価格変更だけでなくアフィリエイトサイトの価格変更にも使えます。中身は数値の変更機能なので金額だけなくほかの単位（個・人・グラムなど）にも使えます。操作方法やり方は【Volar2】で用意している専用のモジュールを、表示したいページの［個別ページの設定］を開き【詳細設定】タブ内の「</body>タグ前に挿入する内容」に挿入します。次に価格を表示したい箇所に下の（サンプル）コードを貼り付けます。<span data="2024/4/1" data="2000">3,000</span>円SIRIUS2編集画面サンプル現在の商品価格は<span data="2024/4/1" data="2000">3,000</span>円でのご提供となります。日付や金額は編集画面上で変更できる仕様になってます。仮に本日が3月25日だったとして価格変更の日時を1週間後の緑文字の「2024/4/1」にしたとします。この場合、表示金額は青文字の「3,000」のままですが4月1日になったら自動的に赤文字の「2000」という表示に変わります。4/1以前の表示サンプル現在の商品価格は3,000円でのご提供となります。4/1以降の表示サンプル現在の商品価格は2,000円でのご提供となります。ソースは「1,000」のままです。表示上の数値だけが変化します。複数の価格変更に対応してます。3桁以上は自動的にカンマがつきます→「2,000」

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。【Volar2】では目次を”ボタンリンク風”の並列表記に変える機能を搭載してます。1カラムページでの運用をベースに作ってみました。変更のやり方こちらが通常の目次レイアウトです。（ベーステンプレート・デザイン5）そしてボタンリンク風に一列表示にレイアウト変更したのがこちら。（※PC表示時）1カラムページの商品紹介ページなんかでたまに見かけるページ内リンクです。上のサンプル画像はページ全体に和紙風の背景画像を敷いてるので、目次内に背景画像が透けて見えてます。やり方は目次用の独自タグを【Volar2】で用意している専用のクラスで囲むだけ。<div id="xxx"><% index %></div>基本仕様及びカスタマイズ表示見出し表示可能な見出しはH2のみで、H3以下の見出しは無視されます。表示列PCでは1列・1段表示。2段にはまたがらない仕様です。よってあまりにH2見出しが多いとテキストの量によってはかえって見づらくなる場合もあります。タブレットでは2列表示。スマホでは1列表示です。背景色デフォルト設定では背景は透明です。ただし専用スタイル上で変更することもできます。こちらは白の背景色を付けたサンプルです。筆者ページ全体が白背景の場合は枠内も白背景に見えるのであえてこの操作を行う必要はないです。目次設定この機能を使うページでは『目次の個別設定』を選択します。（全体設定のままだと通常の目次がついてるページも変換されてしまうため）今回のサンプルでは『タイトル』は空欄にしてますが、入れた場合の設定も一応ついてはいます。実際のデモがこちらのページでご覧になれます。

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。SIRIUS2で作るサイトタイプには「通常タイプ」と「ブログタイプ」があります。両者の一番の違いは「通常タイプ」はトップページに何か書かないとトップページとして表示されるものはゼロであるということに対して、「ブログタイプ」はトップページに何も書かなくてもWordPressワードプレスで作ったブログサイトのように（エントリーページの）記事一覧だけは自動で表示してくれるというものです。極端なことを言えばそれだけです。（笑）そのかわり（？）「通常タイプ」にはトップページに『更新履歴』を表示することができます。記事を新しく公開したらそこにはリスト形式でリンク付きの記事タイトルが自動で表示されるというものですね。トップページ以外ではサイドメニューに「最新記事」のリストが表示されます。＜更新履歴の設定＞の詳細については【サイトオプション】全体設定（サイトの表示設定）をご覧ください。この＜更新履歴＞表示でも問題はないんですが、どうせなら「通常タイプ」のサイトにもブログタイプで表示されるサムネイル画像付きの記事一覧を表示できたらと思い、コードをちょっと修正してみました。サムネイル画像付きのタイル型一覧表示はやっぱり目立ちます。デモは当サイトトップページの最下段をご覧ください。概要この機能はデフォルトでは無効化されてます。こちらがブログタイプの記事一覧と【Volar2】の記事一覧の比較です。（※PC表示時。スマホ表示時はどちらも1カラム表示になります）記事一覧を表示させるには、【Volar2】で用意しているコードを表示したい箇所に丸ごとコピー＆ペーストするだけです。この機能を使うときは＜更新履歴の設定＞をOFF（チェックを外す）にすると二重表示が防げます。またページネーション（”次へ”とか”戻る”とかの記事一覧の分割表示）は搭載してません。