検索結果

パーツ＜画像レイアウト＞に追加した《Volar2》の独自機能をご紹介します。※＜画像レイアウト＞についてはこちらの記事をご参照ください。画像レイアウトSIRIUS2標準搭載の＜画像レイアウト＞についての説明ページ。余白なし交互表示『レイアウト設定』で「画像＋テキスト縦並び（1列）」もしくは「画像＋テキスト縦並び（1列・互い違い）」を選択した場合、＜画像レイアウト＞の設定では画像やテキストの周りに余白が生じます。テキストエリアの背景色が透明（白）の場合は余白はさほど気になりません。しかしながら上の画像のように背景色を付けた場合は余白が少々気になるところです。そこで《Volar2》では「画像＋テキスト縦並び」もしくは「画像＋テキスト縦並び（1列・互い違い）」を選んだ時のみですが、＜画像レイアウト＞が出力する独自タグの前後を《Volar2》で用意している専用コードで囲むと”余白なしの交互表示”レイアウトになるようにしてみました。（※PC及びタブレット表示時）こんな感じです。<div class="xxx">[% imgLayout(※画像レイアウト・管理名) %]</div>「xxx」は”便宜上”のクラス名です。（マニュアルに実際のクラス名を記載）DEMOページを見てみる拡大表示直前のレイアウトは、画像やテキストエリアはコンテンツ枠内に収まって表示されます。これを＜画像レイアウト＞が出力した独自タグを《Volar2》で用意している専用のコードで囲むことでブラウザの横幅いっぱいに広げて表示できるようになります。（※PC及びタブレット表示時）（※こちらも余白なしの設定が付属）基本的には1カラムページでの運用になります。（2カラムではあまり意味を成しません）またある程度画像の横幅が大きくないと美しくは表示されません。DEMOページを見てみる背景色付き『レイアウト設定』でデフォルトの「横並び」を選択した際、テキストエリアは透明の背景になります。筆者通常はページ全体に白の背景色が敷かれてるので実感はないと思いますそこでテキストエリアの背景に淡いグレーの背景色を設定したタイプもご用意しました。こちらも＜画像レイアウト＞が出力した独自タグを《Volar2》が用意している専用コードで囲むだけです。DEMOページを見てみるアイコン風画像と見出しのみ＜画像レイアウト＞機能を使った”アイコン風画像と見出しのみ”の機能も用意しました。『レイアウト設定』で画像と見出しのみの入力、レイアウトはデフォルトの「横並び」を選択。こちらも《Volar2》が用意している専用コードで囲むだけです。DEMOページを見てみる背景色付きタイプ＜アイコン風画像と見出しのみのレイアウト＞は背景が透過するタイプですが、《Volar2》で用意している専用コードで囲むと自動で淡いグレーの背景色が付いた状態でコンテンツを表示できます。DEMOページを見てみるシンプル版こちらは見出しとコンテンツ（説明文）だけのシンプルなレイアウト表示で、「画像なし・見出しに背景色・枠のみ」タイプ。これまで同様、独自タグを《Volar2》で用意した専用コードで囲むだけで表示できます。画像がない代わりに見出しには背景色を設定。全体に枠を設定してあります。ただし背景色は設定してません。（標準設定で背景色を指定すれば反映はされます）テキストを左寄せにしても見出しは中央寄せのままです。DEMOページを見てみるコンテンツ表示幅解消＜画像レイアウト＞の『レイアウト設定』で”横並び”レイアウトを指定した際、＜画像レイアウト＞1個目（1段目）と＜画像レイアウト＞2個目（2段目）で異なるコンテンツ数にしてると1段目と2段目のコンテンツの表示幅が異なってしまいます。たとえば表示したいコンテンツが5個くらいあるものの、レイアウト上の見やすさから4個＋1個の2段レイアウトでの表示にしたとします。（※2個の＜画像レイアウト＞を作成）これをPCで表示してみると2段目の（1個だけの）コンテンツが横いっぱいに広がって表示されてしまいます。これを1段目と同じレイアウトに揃えるには、2段目の画像レイアウト設定で空のコンテンツを3つ足して1段目と同じコンテンツ数にすれば解消はします。しかしこれをスマホで見るとちょっとした違和感が生じます。たとえば（スマホレイアウトを）2列表示にしてみた場合、2段目の画像レイアウトの下余白が少し増えてます。（わかりやすく背景色を付けてみました）1列表示にしてみると、余白はさらに広がってしまいます。筆者コンテンツ数が1,2個程度ならそれほど気にはなりません。この余白の正体は空のコンテンツ3個分のHTMLタグです。コンテンツは空でもコンテンツを囲むHTMLタグは消えずにそのまま残っちゃうので、その分の高さが余白として表示されちゃってるんですね。そこで《Volar2》では”余計な余白”を解消するための専用のコードを用意しました。これまで同様、＜画像レイアウト＞の独自タグを専用コードで囲むだけです。これでタブレットやスマホで余計な余白が生じず、見やすくなります。

パーツ＜アイテム比較＞に追加した《Volar2》の独自機能をご紹介します。※＜アイテム比較＞についてはこちらの記事をご参照ください。アイテム比較SIRIUS2標準搭載の＜アイテム比較＞についての説明ページ。カウントアップカウンター《Volar2》では＜アイテム比較＞を利用して、可視領域に達したらカウントアップするカウンターを作成できます。この機能はデフォルトでは無効化されてます。機能概要カウンターが見える位置までスクロールしたらカウントアップのアニメーションが始まる。アニメーションは1回限りでページをリロード（更新）すれば再度アニメーションする。（専用スタイルシート上にて）数値の色や大きさは変更可能。DEMOページをご覧になると実際の動きがわかります。（※わかりにくいときはブラウザの更新ボタンをクリックしてみてください）DEMOページを見てみる有効化《Volar2》の《カウントアップカウンター》を利用するには事前にモジュールの有効化作業が必要です。有効化のやり方『【Volar2】カウントアップ（スタイル）』『【Volar2】カウントアップ（スクリプト）』上記2つのモジュールの［有効］のチェックをONにします。設定概要＜アイテム比較＞を開いたら、指定の箇所に表示したい内容や数値を記入します。記入が済んで登録が完了したら、《カウントアップカウンター》を表示したい箇所に登録済みの＜アイテム比較＞を挿入すると独自タグが出力されます。あとはその独自タグの前後を《Volar2》で用意している専用コードで囲むとカウントアップカウンターが表示されるようになります。こんな感じです。<div class="xxx">[% compare(※アイテム比較管理名) %]</div>「xxx」は”便宜上”のクラス名です。（マニュアルに実際のクラス名を記載）固定表示FAQ＜アイテム比較＞を利用して1カラムページ用の並列表記かつ固定表示FAQを作成できます。DEMOページを見てみる設定概要やり方は＜アイテム比較＞を開いて所定の箇所に質問と回答を書き込むだけです。記入が済んで登録が完了したら、《並列表記かつ固定表示FAQ》を表示したい箇所に登録済みの＜アイテム比較＞を挿入すると独自タグが出力されます。あとはその独自タグの前後を《Volar2》で用意している専用コードで囲むと並列表記かつ固定表示FAQが表示されるようになります。<div class="xxx">[% compare(※アイテム比較管理名) %]</div>「xxx」は”便宜上”のクラス名です。（マニュアルに実際のクラス名を記載）横幅調整機能＜アイテム比較＞は本来は”複数の商品やサービスの価格や特徴などを比較”するための機能です。しかしながら『価格』欄を空白にすると、＜画像レイアウト＞の『横並び』選択時のレイアウトのようにシンプルに項目表示用としての使い方もできます。ちなみに＜画像レイアウト＞と＜アイテム比較＞のレイアウトの違いがこちら。なお＜アイテム比較＞で作成したコンテンツ全体は折り返しが効かないため、中身のコンテンツ数にかかわらずコンテンツ全体は幅いっぱいで表示される仕様です。（※PC表示時）それゆえ1段目（1個目のアイテム比較）と2段目（2個目のアイテム比較）で異なるコンテンツ表示数にしてると、1段目と2段目のコンテンツの表示幅が異なるレイアウトになります。これが気になる方は、これまで通り独自タグの前後を《Volar2》で用意している専用コードで囲むだけで下のように同じ幅での表示が可能になります。パーツ→＜画像レイアウト＞では空のコンテンツを加えることで同じ幅での表示が可能になりますが、＜アイテム比較＞では空のコンテンツは追加できない仕様です。ボタン位置変更前述のように”項目表示”レイアウトにした場合、（リンク）ボタンは「詳細ページへ」とか「詳細はこちら」といった文言になろうかと思います。そうなるとボタンの位置がデフォルトのまま（真ん中あたり）だとおさまりが悪い場合もあるかと思います。その場合は《Volar2》で用意している専用スタイルを有効化するだけで下のように最下段にボタンが移動します。

パーツ＜画像ギャラリー＞のスマホでの見え方をカスタマイズした《Volar2》独自のレイアウト機能をご紹介します。※＜画像ギャラリー＞についてはこちらの記事をご参照ください。画像ギャラリーSIRIUS2標準搭載の＜画像ギャラリー＞についての説明ページ。スマホでの表示サイズ＜画像ギャラリー＞はスマホで見ると下の画像のようにサムネイル画像がかなり小さく表示されます。一方《Volar2》の専用スタイルを有効化するとちょっと大きめに表示されます。拡大時の画像サイズ（スマホのみ）＜画像ギャラリー＞のサムネイル画像をタップすると画像全体ではなく左側を中心に一部だけが表示されます。（スワイプすれば残りも見ることはできます）一方《Volar2》ではタップして拡大すると常時100%表示になるよう調整してます。（ピンチアウト＜ズーム＞すれば拡大表示もできます）どちらがいいかは好みの分かれるところですが、個人的には最初にフル画像が見えて気になったところだけズームする方がストレスはたまりにくいだろうと思って調整してみました。有効化この機能はデフォルトでは無効化されてます。両機能を利用するには＜画像ギャラリー＞が出力する独自タグを《Volar2》で用意している専用コードで囲んでやります。「xxx」は”便宜上”のクラス名です。（マニュアルに実際のクラス名を記載）（※↓スマホのみ確認可）DEMOページを見てみる

パーツ→＜フローチャート＞のレイアウトデザインを少し修正してみました。※＜フローチャート＞についてはこちらの記事をご参照ください。フローチャートSIRIUS2標準搭載の＜フローチャート＞についての説明ページ。概要SIRIUS2のパーツ→＜フローチャート＞のレイアウトデザインは3タイプ用意されてます。上記画像を見るとわかりますが、デザイン1とデザイン2はステップ数が多くなるほどPC表示時は表示エリアそのものがかなり狭くなります。画像ももちろん見づらくなります。（スマホはいずれも縦1列表示）一方デザイン3のレイアウトだとPC表示時は縦並びになって説明文の表示領域が広く確保されるレイアウトなんですが、スマホ表示時での説明文のエリアがかなり狭くなります。ということで《Volar2》ではステップ数が多くなってもPC・スマホ共にまあまあいい感じで表示されるデザイン”4”を考えてみました。（実際にはデザイン3のカスタマイズになります）DEMOページを見てみる有効化この機能はデフォルトでは無効化されてます。《Volar2》の《フローチャート別デザイン》を利用するには専用モジュールを有効化する必要があります。有効化のやり方【Volar2】フローチャート（スタイル）上記モジュールの［有効］のチェックをONにします。

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

《Volar2》では＜目次＞を《ボタンリンク風の並列表記》に変えられます。変更のやり方こちらが通常の目次レイアウトです。そしてボタンリンク風に一列表示にレイアウト変更したのがこちら。（※PC表示時）1カラムの商品紹介ページなんかでたまに見かけるページ内リンクで、クリックすると該当するH2見出しまで一気にスクロールします。やり方は目次用の独自タグを《Volar2》で用意している専用コードで囲むだけです。<div id="xxx">[% index %]</div>「xxx」は”便宜上”のID名です。（マニュアルに実際のID名を記載）基本仕様表示見出し表示可能な見出しはH2のみです。表示列PCH2見出しが多い場合、ある程度の長さになったら自動で折り返されます。また1段目も2段目も自動でブラウザ幅近くまで伸びる仕様のため、ブラウザ幅の違いや見出しテキストの長さの違いで”折り返し地点”はその時々に応じて変化します。こちらは一例です。”見出しが◯個以上になったら折り返しが始まる”という法則はありません。タブレット or スマホタブレットでは2列、スマホでは1列固定表示です。目次設定この機能を使うページでは『目次の個別設定』を選択します。（全体設定のままだと通常の目次がついてるページも変換されてしまうため）さらに各項目は下の青線で囲んだ選択肢にする必要があります。今回のサンプルでは『タイトル』は空欄にしてますが、入れた場合の設定も一応ついてはいます。背景色デフォルト設定では背景は透明です。ただしユーザー指定スタイル上で変更することもできます。筆者ページ全体が白背景の場合は目次枠内も白背景色に見えます。テキストの大きさや色、背景色など一部の設定もユーザースタイル上でカスタマイズ可能ではあります。

《Volar2》ではブラウザの右端に《サイドボタン》を常時表示できます。概要こちらが通常版。DEMOページを見てみる（↑ヘッダー画像の右わきをご覧ください）もう一つが縦書き＆ボタン2個の縦書き版。DEMOページを見てみる（↑ヘッダー画像の右わきをご覧ください）《サイドボタン》（通常版）の特長としては、嫌みのない程度に透過させてます。幅もウザがられない程度に抑えてます。（Max 70px）日本語で4文字が最大。それ以上は改行されます。テキストの上のアイコンはicomoon（読み方わからず）なども使えますし、SIRIUS2に標準搭載のアイコンや画像なども利用できます。（※アイコンや画像無しでもOK）アイコン/テキストなどの追加・修正はモジュール内で作業完了。《サイドボタン》（縦書き）の特長としては、通常版の縦書き版。ただしスマホでは最下段に横書き表示。ボタンは2個で固定。デザインも固定。テキストの量によって高さの変更は可。通常版はPCのみでの表示、縦書き版はPC＆モバイルでも表示できます。有効化この機能はデフォルトでは無効化されてます。《サイドボタン》を利用するには専用モジュールを有効化する必要があります。有効化のやり方《サイドボタン（通常版）》を利用するには①『【Volar2】サイドボタン［通常版］（本体）』上記モジュールの［有効］のチェックをONにします。（※デフォルトでONになってます）続いてサイドボタンを表示したいページ②③④の［有効］のチェックをONにします。たとえばトップページとエントリーぺージのみに表示するなら①②④の［有効］のチェックをONにするといった具合です。《サイドボタン［縦書き］》＞を利用するには⑤『【Volar2】サイドボタン［縦書き］（本体）』上記モジュールの［有効］のチェックをONにします。（※デフォルトでONになってます）続いてサイドボタンを表示したいページ⑥⑦⑧の［有効］のチェックをONにします。アイコン/テキストの変更・追加などはすべてモジュール上で完了します。設定（通常版）《サイドボタン［通常版］》を利用する場合は『《Volar2》サイドボタン［通常版］（本体）』をダブルクリックします。すると下のような入力エリアが表示されます。（※簡略化してます）サンプルにしたがってアイコン画像やオリジナルの画像タグ、テキストを入力していきます。（画像はSIRIUS2の画像管理からの入力が早くて確実）モジュール上で”表示幅”のみカスタマイズできます。テキストカラーや背景色は”一応”固定にしてあります。（変更がけっこう面倒なので…）（SIRIUS2搭載アイコンの簡単な入力方法はマニュアルに記載してます）位置はブラウザ高さの中央で固定です。★ -->設定（縦書き版）《サイドボタン［縦書き］》を利用する場合は『《Volar2》サイドボタン［縦書き］（本体）』をダブルクリックします。すると下のような入力エリアが表示されます。（※簡略化してます）サンプルにしたがって表示したいテキストに差し替えます。モジュール上でテキストカラーや背景色がカスタマイズできます。（PC・スマホ共通）PCでは縦型のボタンはスマホでは横幅に変化します。そのスマホの横幅（表示幅）は限界があるので高さ（横幅）は固定です。そのためテキストの量には限りがあります。（最大7文字程度）位置はブラウザ高さの中央で固定です。★ -->

《Volar2》では1カラムページに限り、サイドメニューを開閉式で表示可能な”ハンバーガーメニュー”ボタンを表示できます。筆者”ハンバーガーメニュー”とはスマホ表示時なんかに表示される画面右上の3本線「≡」のこと。見た目がハンバーガ―に似ているところからこう呼ばれることが多いです。当サイトの画面右上にそのボタンがデモ表示されてるかと。ただしPC表示時のみでスマホでは標準タイプのメニューが表示されます。仕様概要ページを1カラム仕様にすると元々あったサイドメニューはページ下部に格納表示されます。この場合（PCでの表示時に限りますが）、カテゴリーの数や記事数によっては（最大）3カラムでの表示になります。SIRIUS2では一般的に”サイドメニュー”や”サイドバー”と呼ばれるエリアを「メインメニュー」と称してます。※1カラム時のサイドメニューの表示レイアウト仕様はこちらの記事をご参照ください。1カラム時のサイドメニューの表示レイアウト1カラム時に最下段に下がったサイドメニューのレイアウトはメニュー見出しのありなしで若干変わってくるというお話。ただページを1カラムレイアウトにするぐらいならページ下部に強制移動されたサイドメニューはない方が見た目の印象はすっきりします。そうはいっても他ページへの導線が全くなくなるのは不便と言えば不便です。実際、筆者は（サイドメニューがない）1カラム構成のサイトを訪問した時に「次に見たいページが探しにくい」という不便さをたびたび感じておりました。かといって先の画像のようなレイアウトでページ下部にサイドメニューを表示させても毎回そこまでスクロールする手間が、ねえ。1カラム時に下段に移動される”サイドメニューの非表示”設定ですが、SIRIUS2では【サイト全体設定】の【レイアウト】設定で1クリックでサイドメニューを非表示にできます。★ -->ということで利用者の中にはこういう想いを感じている方もきっと多いに違いないという筆者の勝手な思い込みから、スマホでよく見かけるハンバーガーメニューを使って開閉式でサイドメニューを表示できる機能を《Volar2》に追加してみました。（はたして需要があるのかどうかは微妙なところですが）2タイプのレイアウト《Volar2》の《開閉式サイドメニュー》の主な仕様は以下の通り。PC表示時かつ1カラムページのみでの表示限定。（モバイルではSIRIUS2標準のグローバルメニューが表示されます）（ハンバーガー）メニューボタンはブラウザ右上固定表示。メニューボタンをクリックすると右からサイドメニューの内容がスライドインし、ブラウザ幅約80%ぐらいの位置まで広がって表示。×ボタンクリックで閉じる。（シンプル版は50%くらい）開いたときのサイドメニューの中身・レイアウトは基本的にはSIRIUS2標準の1カラム時のサイドメニューの表示内容がそのまま表示。本来は全ぺージ1カラムサイトでの利用を想定していますが、2カラム仕様の（エントリー）ページが混じっていても問題はありません。ただし2カラムページではメニューボタン自体は非表示になり通常のサイドメニューが表示されます。タイプは2種類用意してます。1つはすべてのサイドメニューの中身をそのまま表示する通常タイプ。もう一つはページ数が少ないサイト向けに、第1階層のみのエントリーぺージとカテゴリーフォルダのみを1段レイアウトで表示させるシンプル版です。（※カテゴリー内のエントリーページは非表示）使う場面はそう多くはないでしょうが、試しに作ってみました。↓シンプル版のデモはこちら。DEMOページを見てみる使い方この機能はデフォルトでは無効化されてます。＜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》ではトップページのみですがヘッダー画像を動画ヘッダーに変えることができます。筆者DEMOサイトで使ってるのは動画ACからダウンロードしたフリー素材です。★ -->概要可能な動画形式設置可能な動画形式は拡張子が「.mp4」の動画のみです。Youtube動画は未対応です。動画サイズ動画の解像度は特に制限はありません。ただしファイルサイズが大きいと読み込みに時間がかかるのでできるだけ軽量化することをおすすめします。参考までに、DEMOサイトのヘッダー動画（ドローン撮影による田園風景）の解像度は960×540px、ファイルサイズは2.3MBまで落としてあります。筆者ファイルサイズがあまりに大きいとオンラインサービスでは変換作業や圧縮作業を受け付けてくれない場合もあります。そういう時は（フリー）ソフトをインストールして圧縮をかけるというやり方もあります。動画ヘッダーの高さ動画の高さはブラウザの高さいっぱい（デモサイト）高さを指定（600pxなど）の2種類から選択できます。専用の外部スタイル上で変更できます。スマホでは『動画の横幅に合わせて（縦横比率を保ったまま）縮小表示』固定です。DEMOページを見てみる有効化この機能はデフォルトでは無効化されてます。《Volar2》の《ヘッダー画像を動画に》を利用するには専用モジュールを有効化する必要があります。有効化のやり方『【Volar2】ヘッダーに動画（スタイル）』『【Volar2】ヘッダーに動画（HTML）』上記2つのモジュールの［有効］のチェックをONにします。①のモジュールには専用のスタイルが格納されてます。動画の高さはここで変更可能です。（デフォルトは『ブラウザの高さいっぱい』）②のモジュールをダブルクリックすると下のような画面が開くので、赤線部分を登録済み動画のファイル名で差し替えます。（※一部を抜粋）（※動画のSIRIUS2への登録方法はマニュアルに記載してます）これでヘッダー画像エリアは動画ヘッダーでの表示に変わります。筆者動画ヘッダーの上に画像やテキストを表示させることもできます。やり方はマニュアルに記載。注意点《Volar2》の《ヘッダー画像を動画に》はできるだけ設置手順を簡素化するべく、SIRIUS2のヘッダー画像設置機能をベースにカスタマイズしてます。レイアウトは1カラム（ワイド）トップページのヘッダーをインパクトのある動画に差し替えるくらいですからレイアウトは1カラム（ワイド）のみの対応及び動作チェックとなってます。（通常の1カラムでもイケると思いますが、2カラム or 3カラムは動作保証外です。チェックしてません）なおSIRIUS2のヘッダー画像の機能を”間借り”してるので、ロゴや（グローバル）メニューは通常通り表示されます。オーバーレイが使える【サイトオプション】→【デザインの設定】→【ヘッダーの設定】→『オーバーレイの表示』も機能します。筆者動画の上に静止画やテキストを表示させることもできるので、『オーバーレイの表示』をONにすればテキストがより見やすくなります。粗さ（ボケ感）解消エフェクトヘッダーに載せる動画は解像度に関係なくブラウザの横幅いっぱいに表示される仕様（フルワイド）にしてます。それゆえファイルサイズを落としたいがために解像度があまりに低いと（たとえば640pxとか）、ブラウザの広さに応じて伸びた画面は粗さが目立ったりボケ感がかなり強調される可能性もあります。そういう時のためにボケ感を”イイ感じに見せる”やり方もいくつか用意してます。SIRIUS2標準搭載の（ヘッダー画像の）「オーバーレイの表示」をONにする（少し暗っぽい感じになります）《Volar2》側で用意しているフィルター群（グレースケール・モノクロ・ぼかし・セピア・ドット柄）を被せてボケ感を和らげる2.は専用スタイル上では下のような設定になってるので、それぞれコメントアウトして無効化されてるフィルターのコメントアウトを解除すれば即反映されます。ヘッダー画像が一瞬表示される《Volar2》の《ヘッダー画像を動画に》はSIRIUS2のヘッダー画像表示機能を”間借り”してるせいか、動画ヘッダーが表示される前に一瞬だけヘッダー画像（header.jpg）が表示されてしまいます。これはちょっとみっともない動作で可能な限り避けたいところ。じゃあヘッダー画像を設定しなければいいかというと、（DEMOサイトのように）動画表示エリアをロゴ画像やメニューの背景まで広げるためレイアウト設定で「1段（上部固定・ヘッダーワイド）」にしてる場合、ヘッダー画像を指定してないとなぜか動画をメニューの背景まで広げることができなくなります。（おそらくスタイルがどこかでぶつかってるんだと思いますが）それにヘッダー画像を未設定にするとそもそもの問題としてサイト全体がヘッダー画像なしでの表示になってしまいます。話がちょっとそれましたが、”ヘッダー画像が一瞬表示される”現象はおそらくファイルの読み込み順のせいかと思われます。ただこれの変更（改修）作業はかなり手がかかりそうなので代替策を用意しました。ローディング画面個人的には動画ヘッダーが表示されるまで”ゴースト画面”が一瞬でも出てしまうのが気持ち悪いので、それを隠すためDEMOサイトではシンプルなローディング画面を付けてあります。（※画像不使用）筆者本来であればサイトを開くと1～10秒程度『青っぽい画面とくるくる回るローディング画面』が表示され、それが消えると動画がスタートします。ただDEMOサイトはトップページのみのとても”軽い”サイトなので、環境によっては一瞬しか表示されないかもしれません。《Volar2》には上記ローディング画面用の設定を搭載してるのでお好みでご利用ください。この機能はデフォルトでは無効化されてます。《Volar2》の《ローディング》機能は専用モジュールを有効化する必要があります。有効化のやり方『【Volar2】ローディング（HTML）』『【Volar2】ローディング（スクリプト）』上記2つのモジュールの［有効］のチェックをONにするだけで反映されます。

《Volar2》ではトップページのみですがヘッダー画像をズーム付きのフェード切り替え画像スライダーに変更することができます。概要《Volar2》の《ヘッダーエリアに画像スライダー》の基本仕様は以下の通り。ヘッダーエリアに2枚もしくは3枚の画像をフェードで切り替えしながらループ表示。画像はズームアウトしながらの表示。（※ズームインもズームなしも可能）総尺は2枚画像時はおよそ8秒、3枚画像時はおよそ10秒でループ。画像上には2段テキストも表示可。（カラーやサイズも個別に変更可）1段目のメインテキストはH1が設定済みスマホでは真ん中エリアが表示されます。《ヘッダーエリアに画像スライダー》はどちらかというと『サイトイメージの向上』的な使い方になろうかと。たとえば時計を扱うサイトなら時計の象徴的なイメージカットとか。美容関連のサイトなら商品のイメージカットや身に着けてる人物のイメージカットなど。DEMOページを見てみる有効化この機能はデフォルトでは無効化されてます。《ヘッダー画像を画像スライダーに》機能を利用するには専用モジュールを有効化する必要があります。有効化のやり方3枚画像使用時は下記①と②2つのモジュールの［有効］のチェックをONにします。2枚画像使用時は③と④2つのモジュールの［有効］のチェックをONにします。画像設定画像の登録やカスタマイズのほとんどは専用スタイルシート上で行います。表示したい画像は前もって『画像管理』でSIRIUS2内に取り込んでおきます。続いてSIRIUS2の上部メニューからテンプレート→スタイルシート編集→（専用スタイル）を開き、マニュアルサイトでご説明しているダミーの画像ファイル名を登録した画像ファイル名で差し替えます。一例を挙げると、下の赤下線部分を登録済みの画像ファイル名で差し替えるといった作業になります。これで画像スライダーは稼働します。カスタマイズ可能な項目いくつかカスタマイズ項目も用意してます。画像にオーバーレイデフォルトで画像にはオーバーレイ（※画像を少し暗くする）が薄くかかってます。この透明度は変更できます。オーバーレイの解除も可能です。画像上にテキスト画像スライダー上にテキストを表示できます。「見出し」と「説明文」の2段形式。（テキスト非表示も可）テキストのサイズや色変更も個別にできます。画像の高さデフォルトではブラウザの高さに自動的に合わせる仕様になってます。これを700pxなど固定の高さに変更することもできます。

《Volar2》では記事ブロック単位でフルワイド（ブラウザ幅いっぱい）の背景画像を表示できます。大量のコンテンツの背景に画像を表示したい時に役立ちます。”記事ブロック”というのは編集画面右端に1～10で表示されてるタブのことで、1ページを最大10個に分割して編集できる機能です。記事ブロック単位の《フルワイド背景画像》に対し、記事内のどこにでも背景画像（or 単一色）＋テキストを設置可能な《フルワイドセクション》という機能もあります。背景画像＋テキストなら《フルワイド背景画像》か《フルワイドセクション》が便利ですが、シンプルに画像をフルワイドで表示したい場合は《画像フルワイド化》がお手軽です。SIRIUS2標準機能との主な違い《フルワイド背景画像》は1カラム（ワイド）のトップページ及び1カラム（ワイド）のLPページで表示できます。（※LPページ＝1個のエントリーぺージ/複数のエントリーページでの利用は不可）《Volar2》の《フルワイド背景画像》は、機能としてはSIRIUS2標準搭載の＜ブロック設定＞の背景画像とほぼ同じです。※＜ブロック設定＞についてはこちらの記事をご参照ください。ブロック設定SIRIUS2標準搭載の1カラムLP向け＜ブロック設定＞についての説明ページ。ではどこが違うのか。主な違いを表にしてみました。SIRIUS2＜ブロック設定＞ 《Volar2》《フルワイド背景画像》①設定方法専用のダイアログ内で完結。専用スタイル内で手動設定。②画像固定スクロールにしたがって画像も移動。スクロールしても画像は固定。③画像表示範囲画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合もあり。ほぼ元のサイズのまま表示。④スマホ表示スマホでも表示できるが、画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合がほとんど。狭い画面内で表示するメリットがあまり感じられないのでスマホでは非表示。（PC表示時のみ）⑥オーバーレイ白や黒系のオーバーレイやフォントカラーの変更用設定あり。ダーク系のオーバーレイのみ搭載。A SIRIUS2ブロック設定B 《Volar2》フルワイド背景画像（※機能停止）C 《Volar2》フルワイド背景画像シンプル版①設定方法ダイアログ内で完結。編集画面上で専用のモジュール名を挿入する必要あり。専用スタイル内で手動設定。②画像固定スクロールにしたがって画像も移動。スクロールしても画像は固定。スクロールしても画像は固定。③画像表示範囲画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合もあり。ほぼ元のサイズのまま表示。ほぼ元のサイズのまま表示。④スマホ表示スマホでも表示できるが、画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合がほとんど。別途スマホ用の画像設定あり。スマホの画面高に合わせる仕様なのでコンテンツ量にかかわらず想定したイメージに近い感じで表示される。狭い画面内で表示するメリットがあまり感じられないのでスマホでは非表示。（PC表示のみ）⑤記事タイトル（H2扱い）記事タイトル部分も背景画像エリア内で表示。記事タイトルは背景画像エリア外。記事本文内のみが背景画像の有効エリア。記事タイトル部分も背景画像エリア内で表示。⑥オーバーレイ白や黒系のオーバーレイやフォントカラーの変更用設定あり。オーバーレイ効果だけでなく、ぼかしやセピアカラー、モノクロ機能も搭載。ダーク系のオーバーレイのみ搭載。★ -->画像表示範囲の違い（具体例）＜ブロック設定＞ではコンテンツ量が少ない場合は元の画像サイズに近い形で表示されます。しかしながらコンテンツ量が増えてくると＜ブロック設定＞はコンテンツの高さに合わせて画像が拡大されるため、画像によってはなんの背景画像なのかわからなくなる場合も出てきます。これはスマホでも同じですが表示画面が小さい分、PCよりも余計に画像が拡大されてもはや背景画像の意味をなさなくなるケースが多々あります。一方《フルワイド背景画像》の方は背景画像が固定なのでコンテンツ量にかかわらず一定の大きさで表示されます。（※スマホでは背景画像非表示）有効化この機能はデフォルトでは無効化されてます。《フルワイド背景画像》はトップページと（1つの）エントリーぺージのみの実装機能です。《フルワイド背景画像》を利用するには専用モジュールを有効化する必要があります。有効化のやり方トップページだけに本機能を表示させたい場合は①『【Volar2】フルワイド背景画像【トップ】（スタイル）』上記モジュールの［有効］のチェックをONにします。エントリーページに関しては②『【Volar2】フルワイド背景画像【LP】（スタイル）』のチェックは常にONになっており、利用したいエントリーページのページの設定→詳細設定に同モジュール名をコピー＆ペーストすることで利用可能になります。（※詳細はマニュアルに記載）画像の設定は《フルワイド背景画像》専用のスタイルシート上で行います。

《Volar2》では記事中のどこにでもフルワイド（ブラウザ幅いっぱい）のブロックエリアを設置できる《フルワイドセクション》機能を用意してます。1行とか2行の見出し程度のテキストを背景画像上に表示したい場合は、記事ブロック全体が対象の《フルワイド背景画像》よりも手軽に扱えます。それゆえ大見出しやバナー的な使い方に適してます。SIRIUS2の＜ブロック設定＞や《Volar2》の《フルワイド背景画像》が1カラム（ワイド）が前提であるのに対し、《フルワイドセクション》は1カラムでも利用できます。使い方《Volar2》が用意している専用コードをコピー＆ペーストします。その中に背景画像として表示したい画像ファイル名を挿入し、表示したいテキストを書き込むだけで部分的なフルワイド背景画像＋テキストというレイアウトで表示できます。こちらがサンプルです。フルワイドセクション単一色背景もOK。フルワイドセクションCSSに詳しいのであればグラデーションもOK。フルワイドセクション

どんなに大きな画像でも通常は横幅はコンテンツ枠内での表示にとどまります。《Volar2》ではこれをコンテンツの幅に関係なくブラウザの横幅いっぱいまで広げることができます。迫力ある画像でインパクトを出したい時などに効果的です。こちらは記事ブロック単位で背景画像＋テキスト表示可能な《”フルワイド背景画像》や限定エリアでの背景画像＋テキスト表示が可能な《フルワイドセクション》と違って、編集画面内に直接挿入する通常画像をフルワイド表示化できる機能です。SIRIUS2の＜ブロック設定＞や《Volar2》の《フルワイド背景画像》が1カラム（ワイド）が前提であるのに対し、《画像フルワイド》は1カラムでも利用できます。やり方DEMOがこちら。上のフルワイド画像の表示方法ですが、表示したい画像を挿入したらその画像タグの前後を2つの専用モジュールで挟んであげるだけで完了です。”背景画像”ではないので画像上にテキスト等を表示させることはできません。（厳密にはできないこともないですが）それゆえテキスト等が必要な時は画像加工ソフトや画像ウェブサービスなどを使って画像に直接埋め込む必要があります。画像加工ソフトなら私も使ってるAffinityをおススメします。以前は有料だったんですが、なんと今はPhoto機能だけでなく他の機能もパッケージ化されてAffinity3とバージョンアップされたのにすべての機能が無料で使えちゃうんです。（当サイトの画像もAffinity3で作成してます）画像加工はAffinity3にお任せAffinity3は本格的な画像加工ができるのに完全無料！おススメです。

《Volar2》ではサイズ違いのオリジナルのバナーデザイン機能を用意してます。画像自体はあなたご自身でご用意していただく必要があります。横幅短めの《バナー［小］》主にフッター周りで使えそうなバナーデザイン。サンプルがこちら。作成できるのは1種類のみ。最大5個まで設置可能。画像幅及び画像間の余白は個数に応じて自動調整（※PC）。画像を暗くするオプション付き。バナーにマウスオーバーすると画像が少し大きくなる演出付き。（※PCのみ）スマホでは1列縦表示。テキストカラーは白固定。（小・中・大それぞれ）バナー専用のモジュールを用意してるので、基本的にはモジュールを有効化し、バナー内で画像を登録すれば準備は完了です。あとは《バナー［小］》であればバナーを表示したい箇所にモジュール①『【Volar2】バナー［小］（本体）』の独自タグを挿入するだけです。[% module(【Volar2】バナー［小］（本体）) %]余白なしの《バナー［中］》少し大きめのバナーデザインになります。どちらかと言えば縦型画像向きです。作成できるのは1種類のみ。最大5個まで設置可。画像幅は個数に応じて自動調整（※PC）。画像を暗くするオプション付き。画像は余白なしの接着表示。バナーにマウスオーバーすると画像が少し大きくなる演出付き。（※PCのみ）タブレットでは固定幅で列数は自動調整。スマホでは1列縦表示。テキストカラーは白固定。こちらも先ほどの《バナー［小］》同様、専用モジュール内での操作になります。ワイド幅の《バナー［大］》コンテンツエリア幅まで大きく広がるバナーデザインです。作成できるのは1種類のみ。縦に最大3つまで増やせます。横幅はコンテンツ幅いっぱいで固定。画像を暗くするオプション付き。余白なしの接着表示。バナーにマウスオーバーすると画像が少し大きくなり、テキストも少し右に動く演出付き。（※PCのみ）テキストカラーは白固定。こちらも先ほどの《バナー［小］》同様、専用モジュール内での操作になります。DEMOページを見てみる

《Volar2》では常にループし続ける《ループスライダー》を表示できます。概要《Volar2》の《ループスタイダー》の主な特長としては、画像は8枚まで登録可＆常にループし続ける。スクリプト不要でスタイルシートのみの軽量タイプ。設定はすべてモジュール上で完了。画像幅はPC表示時のみ変更可能。（モジュール上で変更可）画像下に説明文を記述可。ループスピードは”一応”固定。（スタイルシート上で変更は可）《ループスライダー》は画像を”見せ続ける”意味合いで作ってます。そのためリンク機能は付けてませんが、テキスト編集画面でSIRIUS2の標準機能の”リンク”で付与することはできます。DEMOページを見てみる設定《ループスタイダー》は下のような専用モジュールを用意してます。各モジュールをダブルクリックすると画像の入力画面になるので画像（or テキスト）を登録するだけで完了です。（※画像は装飾メニューの［画像］から簡単挿入）あとは表示したい場所にモジュール『《Volar2》ループスライダー（本体）』を挿入するだけです。

左にテキスト・右に画像ギャラリーというある意味”限定利用”の《スプリットギャラリー》機能を作ってみました。商品やサービス等の紹介などで使えるかと。（適当な呼び名がないので”スプリット＜※分割＞ギャラリー”と名付けてます）概要《スプリットギャラリー》の主な特長。左エリアには見出しや説明文などのテキストを、右側にはサムネイル画像をクリックするとメイン画像が切り替わるスライドショーが表示されるレイアウト。（※PC表示時のみ）モバイル機器ではテキストエリアは上に、その下に画像スライドギャラリーというレイアウト。サムネイル画像はPC表示には最大5個、タブレットでは4個、スマホでは2個の固定レイアウト。画像数が表示数を超えた場合はサムネイル画像をマウスでドラッグ（or スワイプ）すれば表示可。設置できるのは1ページ内に1個だけ。都合5ページ分用意しました。筆者1個のモジュールに1枚の画像を登録するだけとか［有効］のチェックのON/OFFで瞬時に表示/非表示を切り替えるとか、できるだけ簡単な操作で済むようにはしてあります。ただ使用モジュール数は他の機能に較べると若干多めにはなってしまったかもです。DEMOページ（露天風呂【Volar2版】）volar2-tategakis設定《スプリットギャラリー》は下のようなモジュール上で設定します。テキスト赤枠内が個々の画像＆テキストの設定用モジュールになります。例えば1個目のテキストに関しては、モジュール①『【Volar2】スプリットギャラリー1［テキスト］』をダブルクリックするとテキスト入力画面になるので好きなテキストを記入します。エリア幅はあまり広くないので見出しやリード文的なテキスト用になります。縦書き表示にするには《Volar2》の縦書きモードを利用します。画像モジュール②『【Volar2】スプリットギャラリー1［画像リスト］』をダブルクリックすると下のような画面になります。上から順に（サムネイル画像）左側からの表示順になっており、デフォルトで最大8枚の画像を設定できるようになってます。画像自体は赤枠の『（※ここに画像を挿入）』という部分を削除→記事装飾メニューの［画像］をクリックして挿入できます。画像が7枚以内だったり一時的に非表示にしたい時は行ごと削除するか、コメントアウト（下の画像赤枠）で無効化します。表示ページの設定→詳細設定タブ内の下の画像の位置に③『【Volar2】スプリットギャラリー（スタイル）』と④『【Volar2】スプリットギャラリー（スクリプト）』の2つのモジュールの独自タグをコピー＆ペーストします。★ -->《スプリットギャラリー》を表示したい位置に、1個目ならモジュール⑤『《Volar2》スプリットギャラリー1』を挿入します。挿入後は下のような独自タグが出力されます。[% module(《Volar2》スプリットギャラリー1) %]これでデモページのような《スプリットギャラリー》が表示されます。《スプリットギャラリー》は商品やサービスごとにいくつか使いたいときもあるかと思います。そのため5つの設定用モジュールを用意しています。モジュールを複製＆若干の修正をすれば実際には何個でも作れます。ただしHTML等がある程度詳しくないとミスを起こしやすいです。カスタマイズ機能は特に設けておりません。（設定が面倒なので）同じページに複数の《スプリットギャラリー》は設置できません。ページが異なる分には問題ありません。ただし異なるページにそれぞれ《スプリットギャラリー》を設置する場合、その都度ページのページの設定を開き、詳細設定タブの『</head>タグ前に挿入する内容』欄と『</body>タグ前に挿入する内容』に前述したモジュール名をペーストする必要があります。★ -->

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

SIRIUS2で作るサイトタイプには「通常タイプ」と「ブログタイプ」があります。両者の一番の違いは「通常タイプ」はトップページに何か書かないとトップページとして表示されるものがゼロであるということ。これに対して「ブログタイプ」はトップページに何も書かなくてもWordPressワードプレスで作ったブログサイトのように（エントリーページの）記事一覧だけは自動で表示してくれるというもの。極端なことを言えばそれだけですww。そのかわり（？）「通常タイプ」ではトップページに『更新履歴』を表示することができます。記事を新しく公開したらリスト形式でリンク付きの記事タイトルが自動で表示されるというものですね。トップページ以外ではサイドメニューに「最新記事」のリストが表示されます。＜更新履歴の設定＞の詳細については【サイトオプション】全体設定（サイトの表示設定）をご覧ください。この＜更新履歴＞表示でも問題はないんですが、どうせなら「通常タイプ」のサイトにもブログタイプで表示されるサムネイル画像付きの記事一覧を表示できたらと思い、コードをちょっと修正してみました。SEO対策にもなるかも、です。概要この機能はデフォルトでは無効化されてます。こちらがSIRIUS2のブログタイプの記事一覧（※1列2個表示時）と《Volar2》の記事一覧（通常タイプ）の比較です。（※PC表示時。スマホ表示時はどちらも1カラム表示になります）ブログタイプは1列の表示数を選択できますが、《Volar2》は1列3個固定です。記事一覧を表示させるには、《Volar2》で用意している整形済みコードを表示したい箇所に丸ごとコピー＆ペーストするだけです。この機能を使うときは＜更新履歴の設定＞をOFF（チェックを外す）にすると二重表示が防げます。デモは当サイトトップページ最下段ブロックをご覧ください。

ここはランディングページ（LP）の体裁でご紹介していきます。ご覧になってわかるようにコンテンツ以外は（最下部のコピーライト表記を除いて）非表示にしてます。こういったLPを作るにはSIRIUS2標準表示のブロックを1個ずつ消す（非表示にする）必要があるんですが、1個1個確認しながらスタイルシートを操作するのはスタイルに詳しくない方にはかなり面倒な作業となります。《Volar2》ではそういった方のために予め消したい項目をリストアップして用意してあります。使い方やり方としてはまずは編集画面の左側にある【サイト構成】画面上の1カラムページにしたいページ上で右クリック→ページの設定を開きます。レイアウトタブ内のカラム数で「1カラム」を選択、これで1カラムに変わります。サイドメニューを非表示にしたいなら「メインメニューを非表示にする」にチェックを入れます。このようにサイドメニュー無しの1カラムページはSIRIUS2標準の機能ですぐに作れます。ここからは《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表示時のものです。これをスマホで見ると…かなり拡大されてもはやどんな画像なのかわからないほど引き伸ばされてしまいす。こういった特長があるので設定する画像はデザインやサイズに多少気をつかう必要があります。ちなみにオーバーレイに暗めの色を指定したサンプルがこちら。こういった場合は『ブロックの文字色』に白系の色を設定してやるとテキストの可読性が上がります。ただし前述したように見出しテキストや通常テキストの表示状態に若干問題が残ってるので使いどころは限られてきそうです。

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