検索結果

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

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。パーツ＜画像ギャラリー＞のスマホでの見え方をカスタマイズした【Volar2】独自のレイアウト機能をご紹介します。スマホでの表示サイズパーツ＜画像ギャラリー＞はスマホで見ると下の画像のようにサムネイル画像がかなり小さく表示されます。一方【Volar2】の専用スタイルを有効化するとちょっと大きめに表示されます。この機能はデフォルトでは無効化されてます。拡大時の画像サイズ（スマホのみ）パーツ＜画像ギャラリー＞のサムネイル画像をタップすると画像全体ではなく左側を中心に一部だけが表示されます。（スワイプすれば残りも見ることはできます）一方【Volar2】ではタップして拡大すると常時100%表示になるよう調整してます。（ピンチアウト＜ズーム＞すれば拡大表示もできます）どちらがいいかは好みの分かれるところですが、個人的には最初にフル画像が見えて気になったところだけズームする方がストレスはたまりにくいだろうと思ってカスタマイズしてみました。この機能はデフォルトでは無効化されてます。有効化のやり方両機能はモジュール『【Volar2】画像ギャラリー・スマホでの見え方調整（スタイル）』の［有効］のチェックをONにするだけで発動します。DEMOページを見てみる（スマホのみ）

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】ではトップページのみですがヘッダー画像を動画ヘッダーに変えることができます。動作チェック済み（対応可能）なのはmp4動画のみです。（※Youtube動画は現状では未対応）この機能はデフォルトでは無効化されてます。DEMOページを見てみる筆者DEMOサイトで使ってるのは動画ACからダウンロードしたフリー素材です。概要可能な動画形式設置可能な動画形式は拡張子が「.mp4」の動画のみです。mp4動画であれば今は基本的にはどのブラウザでも表示可能です。動画サイズ動画の解像度は特に制限はありません。ただしファイルサイズが大きいと読み込みに時間がかかるのでできるだけ軽量化することをおすすめします。DEMOサイトのヘッダー動画（ドローン撮影による田園風景）の解像度は960×540px、ファイルサイズは2.3MBまで落としてあります。筆者ファイルサイズがあまりに大きいとオンラインサービスでは変換作業や圧縮作業を受け付けてくれない場合もあります。そういう時は（フリー）ソフトをインストールして圧縮をかけるというやり方もあります。動画ヘッダーの高さ動画の高さは【ブラウザの横幅に合わせて（縦横比率を保ったまま）高さが自動伸縮・高さを指定（600pxなど）・ブラウザの高さいっぱい（デモサイト）】の3種類から選択可能。専用の外部スタイル上で変更できます。スマホでは【動画の横幅に合わせて（縦横比率を保ったまま）縮小表示】固定です。粗さ（ボケ感）解消エフェクトヘッダーに載せる動画は解像度（特に横幅）に関係なくブラウザの横幅いっぱいに表示される仕様（フルワイド）にしてます。それゆえファイルサイズを落としたいがために解像度があまりに低いと（たとえば640pxとか）、ブラウザの広さに応じて伸びた画面は粗さが目立ったりボケ感がかなり強調される可能性もあります。そういう時のためにボケ感を”イイ感じに見せる”効果もいくつか搭載してます。SIRIUS2に標準で備わってるヘッダー画像の「オーバーレイの表示」をONにする（少し暗っぽい感じになります）【Volar2】側で用意しているフィルター群（グレースケール・モノクロ・ぼかし・セピア・ドット柄）を被せてボケ感を和らげる背景動画の設定有効化のやり方【Volar2】の《ヘッダー画像の代わりに動画ヘッダー》を利用するには、『【Volar2】ヘッダーに動画（スタイル）』と『【Volar2】ヘッダーに動画（HTML）』という2つのモジュールの［有効］のチェックをONにし、『【Volar2】通常のヘッダー画像エリア...』のチェックは外します。①のモジュールには専用のスタイルが格納されてます。動画の高さはここで変更可能です。（デフォルトは【ブラウザの高さいっぱい】）②のモジュールをダブルクリックすると下のような画面が開くので、赤線部分を登録済み動画のファイル名で差し替えます。（※一部を抜粋）（※動画のSIRIUS2への登録方法はマニュアルに記載してます）これだけで”とりあえず”ヘッダー画像エリアは動画ヘッダーでの表示に変わります。筆者動画ヘッダーの上に画像やテキストを表示させることもできます。注意点【Volar2】の《ヘッダー画像の代わりに動画ヘッダー》はできるだけ設置手順を簡素化するべく、SIRIUS2のヘッダー画像設置機能をベースにカスタマイズしてます。レイアウトは1カラム（ワイド）トップページのヘッダーをインパクトのある動画に差し替えるくらいですからレイアウトは1カラム（ワイド）のみの対応及び動作チェックとなってます。（通常の1カラムでもイケると思いますが、2カラム or 3カラムは動作保証外です。チェックしてません）なおSIRIUS2のヘッダー画像の機能を”間借り”してるので、ロゴや（グローバル）メニューは通常通り表示されます。オーバーレイが使える【サイトオプション】→【デザインの設定】→【ヘッダーの設定】→『オーバーレイの表示』も機能します。筆者動画の上に静止画やテキストを表示させることもできるので、『オーバーレイの表示』をONにすればテキストがより見やすくなります。ほかにも「グレースケール・モノクロ・ぼかし・セピア」といたエフェクト類も用意してます。ヘッダー画像が一瞬表示される【Volar2】の《ヘッダー画像の代わりに動画ヘッダー》はSIRIUS2のヘッダー画像表示機能を”間借り”してるせいか、動画ヘッダーが表示される前に一瞬だけヘッダー画像（header.jpg）が表示されてしまいます。これはちょっとみっともない動作で可能な限り避けたいところ。じゃあヘッダー画像を設定しなければいいかというと、（DEMOサイトのように）動画表示エリアをロゴ画像やメニューの背景まで広げるためレイアウト設定で「1段（上部固定・ヘッダーワイド）」にしてる場合、ヘッダー画像を指定してないとなぜか動画をメニューの背景まで広げることができなくなります。（おそらくスタイルがどこかでぶつかってるんだと思いますが）それにヘッダー画像を未設定にするとそもそもの問題としてサイト全体がヘッダー画像なしでの表示になってしまいます。話がちょっとそれましたが、”ヘッダー画像が一瞬表示される”現象はおそらくファイルの読み込み順のせいかと思われます。ただこれの変更（改修）作業はかなり手がかかりそうなので代替策を用意しました。ローディング画面個人的には動画ヘッダーが表示されるまで”ゴースト画面”が一瞬でも出てしまうのが気持ち悪いので、それを隠すためDEMOサイトではシンプルなローディング画面を付けてあります。（※画像不使用）筆者本来であればサイトを開くと1～10秒程度『青っぽい画面とくるくる回るローディング画面』が表示され、それが消えると動画がスタートします。しかしながらDEMOサイトはトップページのみのとても”軽い”サイトなので、環境によっては一瞬しか表示されないかもしれません。【Volar2】には上記ローディング画面用の設定を搭載してるのでお好みでご利用ください。この機能はデフォルトでは無効化されてます。有効化のやり方【Volar2】の《ローディング》機能は、『【Volar2】ローディング（HTML）』と『【Volar2】ローディング（スクリプト）』という2つのモジュールの［有効］のチェックをONにするだけで発動します。

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】ではトップページのみですがヘッダー画像をズーム付きのフェード切り替え画像スライダーに変更することができます。DEMOページを見てみる概要【Volar2】の《ヘッダーエリアに画像スライダー》の基本仕様は以下の通り。ヘッダーエリアに3枚の画像をフェードで切り替えしながらループ表示。（※画像は3枚固定）3個目の画像表示後は1個目の画像に戻る。画像はズームアウトしながらの表示。（※ズームインもズームなしも可能）総尺は1周およそ10秒。（これ以上長くてもサイト訪問者は見てくれないと思い10秒に設定＆変更不可）画像上には2段テキストも表示可。（カラーやサイズは変更可）こういった仕様から【Volar2】の《ヘッダーエリアに画像スライダー》はどちらかというと『サイトイメージの向上』的な使い方になろうかと。たとえば時計を扱うサイトなら時計の象徴的なイメージカットとか。美容関連のサイトなら商品のイメージカットや身に着けてる人物のイメージカットなどでしょうか。有効化この機能はデフォルトでは無効化されてます。有効化のやり方《ヘッダーエリアに画像スライダー》機能を利用するには、①『【Volar2】ヘッダーに画像スライダー（スタイル）』と②『【Volar2】ヘッダーに画像スライダー（HTML）』という2つのモジュールの［有効］のチェックをONにし、③『【Volar2】通常のヘッダー画像エリア...』のチェックは外します。画像設定画像の登録やカスタマイズのほとんどは専用スタイルシート上で行うことになります。表示したい画像は前もって『画像管理』でSIRIUS2内に取り込んでおきます。続いてSIRIUS2の上部メニューからテンプレート→スタイルシート編集→（※専用スタイル）を開きます。下の赤線部分の「xxx」を、登録した画像ファイル名で差し替えます。①が1枚目の画像ファイル名、②が2枚目の画像ファイル名、③が3枚目の画像ファイル名になります。これでとりあえず画像スライダーは稼働します。カスタマイズ可能な項目基本的にはこちらで用意した設定をデフォルトで使っていただくのがベストですが、いくつかカスタマイズ項目も用意はしてます。画像にオーバーレイデフォルトで画像にはオーバーレイ（※画像を少し暗くする）がかかってます。これが必要ないという方は以下の手順で解除が可能です。モジュール『【Volar2】ヘッダーに画像スライダー（HTML）』を開きます。（下の画像の）オーバーレイ用のクラスである「cover」というテキストを削除します。「cover」の直前の半角スペースも削除します。元に戻すときは”半角スペース＋cover”になります。画像上にテキスト画像スライダー上にテキストを表示できます。「見出し」と「説明文」の2段形式。（テキスト非表示も可）先ほど同様、モジュール『【Volar2】ヘッダーに画像スライダー（HTML）』内にテキスト表示エリアがあるのでそこに記述します。画像の高さデフォルト設定ではブラウザの高さに自動的に合わせる仕様になってます。これは700pxなどの固定高さに変更することもできます。スマホでは真ん中エリアが表示されます。

当サイトで使用しているキャプチャ画像は（【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】フルワイド背景画像》機能は設定がやや複雑なため、設定を簡略化した《フルワイド背景画像（シンプル）》機能を新たに搭載しました。PC表示時のみの背景画像の指定とダークモードにするかしないかだけの設定と機能は絞られますが、設定自体はかなり簡素化してます。よって今後はこちらをお使いください。※最新版の【Volar2】では《【Volar2】フルワイド背景画像》機能は非搭載になってます。なお画面幅の狭いスマホでの背景画像設置はかえって見づらくなるケースもあったりするので《【Volar2】フルワイド背景画像（シンプル）》では搭載を見送りました。紹介ページはこちら。当ページは管理人の参考用に残してあるだけです。当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。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にお任せAffinity Photoは本格的な画像加工ができるのに低価格。おススメです。背景色＋ダークモードの組み合わせこれまでは背景画像を利用する前提でのレイアウト調整でしたが、ここでは背景色に応じて自動的にダークモードにする機能についてご紹介していきます。ダークモードと言っても具体的にはテキストカラーを自動的に白に変えるだけのものですが、割と便利な機能です。たとえばSIRIUS2の＜ブロック設定＞で『ブロックの背景色』に濃いめの色を指定したとします。当然黒いテキストは見づらくなります。（範囲選択したところだけ反転してかろうじてわかります）「じゃあテキストカラーを白に設定しよう」ということで『ブロックの文字色』に”白”を設定してみます。すると通常のテキストは問題ないんですが、ヒント枠内のテキストまで白になってしまいました。しかも2個のH2見出しは依然として黒のままです。そこで今度は＜ブロック設定＞の『記事タイトルの文字色』にも白を設定してみます。ところが”記事タイトル”に入力したH2見出しは白になったものの、（当記事執筆時点では）”記事内部に設置したH2タイトル”は黒のままです。（理論的には間違いではないんですけどね）筆者H3タイトル以下はちゃんと白になるのでこれはおそらく調整ミスでしょう。いつか直るんでしょうか。いずれにしてもこれだとちょっと使えないですよね。そこで今度はフルワイド化したいエリアのアタマとオシリを、【Volar2】で用意している2個の専用のモジュールではさんでやります。その結果がこちら。必要な部分だけ”白”テキストになりました。筆者ただし＜ブロック設定＞内の『ブロックの文字色』のみ空欄にしてあります。ここに白のカラーコードを入れちゃうとすべてのテキストが白に変わっちゃうので。『記事タイトルの文字色』は白設定のままです。（ここは【Volar2】では制御できないため）元に戻すときは2つのモジュールを両方とも削除（もしくはコメントアウト）する必要があります。どちらか一方だけだとレイアウト崩れが起きるのでその点だけご注意ください。

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】の《フルワイド背景画像（シンプル版）》ですが、機能としてはSIRIUS2標準搭載の『ブロック設定』の背景画像とほぼ同じです。では何が違うのでしょうか。【Volar2】に元々搭載していた《フルワイド背景画像（機能停止）》機能も含めてその違いを先にご紹介します。《フルワイド背景画像（シンプル版）》は1カラム（ワイド）のトップページ及び1カラム（ワイド）のLPページで表示できます。（※LPページ＝1個のエントリーぺージ・複数での利用は不可）機能の違い※画像付きの説明もこのあとにあります。A SIRIUS2ブロック設定B 【Volar2】フルワイド背景画像（※機能停止）C 【Volar2】フルワイド背景画像シンプル版①設定方法ダイアログ内で完結。編集画面上で専用のモジュール名を挿入する必要あり。専用スタイル内で手動設定。②画像固定スクロールにしたがって画像も移動。スクロールしても画像は固定。スクロールしても画像は固定。③画像表示範囲画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合もあり。ほぼ元のサイズのまま表示。ほぼ元のサイズのまま表示。④スマホ表示スマホでも表示できるが、画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合がほとんど。別途スマホ用の画像設定あり。スマホの画面高に合わせる仕様なのでコンテンツ量にかかわらず想定したイメージに近い感じで表示される。狭い画面内で表示するメリットがあまり感じられないのでスマホでは非表示。（PC表示のみ）⑤記事タイトル（H2扱い）記事タイトル部分も背景画像エリア内で表示。記事タイトルは背景画像エリア外。記事本文内のみが背景画像の有効エリア。記事タイトル部分も背景画像エリア内で表示。⑥オーバーレイ白や黒系のオーバーレイやフォントカラーの変更用設定あり。オーバーレイ効果だけでなく、ぼかしやセピアカラー、モノクロ機能も搭載。ダーク系のオーバーレイのみ搭載。設定方法の違いAの『SIRIUS2ブロック設定』は専用画面内ですべてを完結できるのが一番の強みです。これに対しBの『【Volar2】フルワイド背景画像』は（親となる）専用モジュールを2ヵ所挿入する必要があります。画像の指定は（親）モジュールを開いた先にある（子）モジュール画面でPC用とスマホ用の画像ファイル名を入力します。なおモジュール内容は多少簡略化して画像化していますが他にもいろいろ設定項目があります。そのため慣れないとちょっと使いづらい感は否めません。Cの《【Volar2】フルワイド背景画像・シンプル版》は専用のスタイル画面を用意しており、SIRIUS2の上部メニューからテンプレート→スタイルシート編集→（専用スタイル）を開いて画像ファイル名を入力します。画像の大きさの違いAはコンテンツ量が少ない場合はBC同様、元の画像のサイズに近い形で表示されます。しかしながらコンテンツ量が増えてくるとAはコンテンツの高さに合わせて画像が拡大されるため、画像によってはなんの背景画像なのかわからない場合も出てきます。一方BCは背景画像が固定なのでコンテンツ量にかかわらず一定の大きさで表示されます。これはスマホでも同じで、Aはコンテンツが増えれば増えるほど画像が拡大されて、もはや背景画像の意味をなさなくなるケースも多々あります。（Cは背景画像設置不可）Bの『 【Volar2】フルワイド背景画像』でスマホ用の画像を別指定すれば、スマホの画面高に合わせた疑似的な固定表示ができます。（設定がやや面倒）記事タイトル（H2見出し）の背景の違いAとCに関しては記事ブロック全体に背景画像が敷かれるので記事タイトルに記入したH2見出しも背景画像内に収まります。これに対しBは記事本文エリア内だけをカバーする背景画像になるため、記事タイトルに記入したH2見出しは背景画像外に表示されます。ただしこれは記事本文エリア内にH2見出しを書くことで解決はします。有効化この機能はデフォルトでは無効化されてます。有効化のやり方《フルワイド背景画像（シンプル版）》はトップページと（1つの）エントリーぺージのみの実装機能です。たとえばトップページだけに本機能を表示させたい場合はモジュール①『【Volar2】フルワイド背景画像【トップ】（スタイル）』の［有効］のチェックをONにします。エントリーページに関しては②『【Volar2】フルワイド背景画像【LP】（スタイル）』のチェックは常にONになっており、利用したいエントリーページの個別設定→詳細設定に同モジュール名をコピー＆ペーストすることで利用可能になります。（※詳細はマニュアルに記載）画像の設定は《フルワイド背景画像（シンプル版）》専用のスタイルシート上で行います。オーバーレイの違いAにはオーバーレイの設定が標準で搭載されてます。ただしダーク系のオーバーレイ時にテキストを白に設定した場合、コンテンツによっては見づらくなるケースもあります。Bはモジュール名をちょっと変更するだけでダークモードやぼかし機能を即座に有効化できます。またダークモード時（※ダーク系のオーバーレイ時）は自動で必要な部分のみテキストが白に変換されるよう設定してます。Cはダークモードのみの機能搭載ですが、ダークモードにしたい時は該当するスタイル部分の前後のコメントアウトを解除するだけで発動します。

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。どんなに大きな画像でも通常は横幅はコンテンツ枠内での表示になります。これをコンテンツの幅に関係なくブラウザの横幅いっぱいまで広げることができます。画像でインパクトを出したい時などに効果的です。こちらは”背景”画像のフルワイド化ではなく、編集画面内に直接挿入する画像をフルワイド（ブラウザ幅いっぱいに表示）化する機能です。やり方装飾メニューの［画像］から画像タグを挿入します。その画像タグの上下にモジュール『【Volar2】画像フルワイド化（START）』と『【Volar2】画像フルワイド化（END）』を差し込みます。これでその画像だけがブラウザ幅いっぱいでの表示になります。こんな感じですね。背景画像ではないので画像上にテキスト等を表示させることはできません。（厳密にはできないこともないですが）それゆえテキスト等が必要な時は画像加工ソフトや画像ウェブサービスなどを使って画像に直接埋め込む必要があります。画像加工ソフトなら私も使ってるAffinity Photoをおススメします。当サイトの画像もすべてAffinity Photoで作成してます。画像加工はAffinity Photoにお任せAffinity Photoは本格的な画像加工ができるのに低価格。おススメです。

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

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

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】ではサイズ違いのオリジナルのバナーデザイン機能を搭載してます。主に1カラム（ワイド）での利用を想定したレイアウトです。また画像自体はあなたご自身でご用意していただく必要があります。DEMOページを見てみる横幅短めの《バナー［小］》主にフッター周りで使えそうなバナーデザイン。サンプルがこちら。作成できるのは1種類のみ。最大5個まで設置可能。画像幅及び画像間の余白は個数に応じて自動調整（※PC）。画像を暗くするオプション付き。バナーにマウスオーバーすると画像が少し大きくなる演出付き。（※PCのみ）スマホでは1列縦表示。テキストカラーは白固定。有効化のやり方《オリジナルバナー［小］》を表示するにはモジュール②『【Volar2】バナー［小］（表示/非表示）』の［有効］のチェックをONにします。（※①本体は常にON）（チェックをOFFにすれば画像やテキストなどの設定を残したまま非表示にできます）事前に③『【Volar2】バナー［小］（1個目の画像）』や⑥『【Volar2】バナー［小］（2個目の画像）』などで表示枚数分の画像の登録が必要です。（※ダブルクリックで開く画面内に記事装飾メニューの『画像挿入』から1発入力）同様に③『【Volar2】バナー［小］（1個目のテキスト）』や⑥『【Volar2】バナー［小］（2個目のテキスト）』では表示テキストの入力が、③『【Volar2】バナー［小］（1個目のリンク）』や（※表示欄外）『【Volar2】バナー［小］（2個目のリンク）』でリンクの設定ができます。あとは＜バナー（小）＞を表示したい箇所にモジュール①『【Volar2】バナー［小］（本体）』の独自タグを挿入するだけです。[% module(【Volar2】バナー［小］（本体）) %]余白なしの《バナー［中］》少し大きめのバナーデザインになります。どちらかと言えば縦型画像向きでしょうか。サンプルがこちら。作成できるのは1種類のみ。最大5個まで設置可。画像幅は個数に応じて自動調整（※PC）。画像を暗くするオプション付き。画像は余白なしの接着表示。バナーにマウスオーバーすると画像が少し大きくなる演出付き。（※PCのみ）タブレットでは固定幅で列数は自動調整。スマホでは1列縦表示。テキストカラーは白固定。有効化のやり方こちらも先ほどのモジュール画面をスクロールすると出てくるモジュール『【Volar2】バナー［中］（表示/非表示）』の［有効］のチェックをONにします。画像の登録もテキストやリンク設定も専用のモジュールをダブルクリックして開く画面内に”挿入”または”記述”するだけです。ワイド幅の《バナー［大］》コンテンツエリア幅まで大きく広がるバナーデザインです。サンプルがこちら。作成できるのは1種類のみ。縦に最大3つまで増やせます。横幅はコンテンツ幅いっぱいで固定。画像を暗くするオプション付き。画像間の空きはなく余白なしの接着表示。バナーにマウスオーバーすると画像が少し大きくなり、テキストも少し右に動く演出付き。（※PCのみ）テキストカラーは白固定。有効化のやり方こちらも先ほどのモジュール画面をスクロールすると出てくるモジュール『【Volar2】バナー［大］（表示/非表示）』の［有効］のチェックをONにします。画像の登録もテキストやリンク設定も専用のモジュールをダブルクリックして開く画面内に”挿入”または”記述”するだけです。

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】では常にループし続ける《ループスライダー》機能を搭載してます。1カラム（ワイド）での利用を想定してデザインしてます。DEMOページを見てみる概要【Volar2】の《ループスタイダー》の主な特長としては、画像は8枚まで登録可＆常にループし続ける。スクリプト不要でスタイルシートのみの軽量タイプ。設定はすべてモジュール上で完了。画像幅はPC表示時のみ変更可能。（モジュール上で変更可）画像下に説明文を記述可。ループスピードは”一応”固定。（スタイルシート上で変更は可）《ループスタイダー》は画像を”見せ続ける”意味合いで作ってます。そのためリンク機能は付けてませんが、テキスト編集画面でSIRIUS2の標準機能の”リンク”で付与することはできます。使い方《ループスタイダー》は下のような専用モジュールを用意してます。各モジュールをダブルクリックすると入力画面になるので画像とテキストを登録するだけで完了します。画像は記事装飾メニューの｢画像｣から1発入力、説明文用のテキストはすぐ後ろに記述するだけでOK。あとは表示したい場所にループスライダー本体モジュールでもある『【Volar2】ループスライダー（本体）』を挿入するだけです。[% module(【Volar2】ループスライダー（本体）) %]

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

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】では【パーツ】→＜アイテム比較＞を利用して、可視領域に達したらカウントアップするカウンター機能を付けてみました。※＜アイテム比較＞についてはこちらの記事をご参照ください。アイテム比較SIRIUS2の＜アイテム比較＞についての詳細ページ。DEMOページを見てみる（※わかりにくかったときはブラウザの更新ボタンをクリックしてみてください）概要《カウントアップカウンター》の概要は以下の通り。カウンターが見える位置までスクロールしたらカウントアップのアニメーションが始まります。アニメーションは1回限りでページをリロード（更新）すれば再度アニメーションします。数値の色や大きさは変更可。（※専用スタイルシート上での変更）＜アイテム比較＞「タイプ01」でのみ利用可。データ設定【パーツ】→＜アイテム比較＞を開いたら、指定箇所に表示したい内容を記入します。説明文は省略可＆価格欄には【Volar2】で用意している専用コードをコピー＆ペーストします。記入が済んで登録が完了したら、《カウントアップカウンター》を表示したい箇所に登録済みの＜アイテム比較＞を挿入（独自タグで出力）します。（下の赤文字部分）続いてその独自タグを【Volar2】で用意している専用のクラスで囲みます。（下の青文字部分）<div class="xxx">[% compare(※アイテム比較管理名) %]</div>「xxx」は”便宜上”のクラス名です。（マニュアルに実際のクラス名を記載）直前の準備《カウントアップカウンター》はトップページにしてもエントリーぺージにしても下のような準備が必要です。この機能を使いたいページの【ページの設定】を開き、［詳細設定］タブの『</head>タグ前に挿入する内容』のところにモジュール『【Volar2】カウントアップ（スタイル）』の独自タグを、『</body>タグ前に挿入する内容』のところにはモジュール『【Volar2】カウントアップ（スクリプト）』の独自タグを挿入します。これでサンプルページのようなカウンターが表示されます。（実際にはアニメーションしながらの表示）

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】では【パーツ】→＜アイテム比較＞を利用して1カラムページ用の並列表記かつ固定表示FAQを作成できます。※＜アイテム比較＞についてはこちらの記事をご参照ください。アイテム比較SIRIUS2の＜アイテム比較＞についての詳細ページ。DEMOページを見てみるやり方完成型はこんな感じです。【パーツ】→＜アイテム比較＞を開いて下のように質問と回答を書き込みます。作成し終えたら独自タグで出力します。[% compare(※管理名) %]その独自タグを【Volar2】で用意している専用のクラスで囲めば先ほどのようなレイアウトで表示されます。<div class="xxx">[% compare(※管理名) %]</div>「xxx」は”便宜上”のクラス名です。（マニュアルに実際のクラス名を記載）タブレットでの表示はPCと同じレイアウトなので、1グループの＜アイテム比較＞は最大でも4つまでがレイアウト的に限界かと。横幅調整機能デフォルトでは1段の表示個数が異なる場合でもコンテンツ幅いっぱいに均等に広がって配置されます。具体的には1段4個の場合と3個の場合では下のように表示されます。（※PC表示時）ただし＜アイテム比較＞の端数処理も適用できるので、【Volar2】で用意している専用クラスを加筆するだけで個数に関係なく同幅での表示に変えることもできます。

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

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【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円でのご提供となります。表示上の数値だけが変化するのでソースは「3,000」のままです。よって適当な時期に当該モジュールを外して（削除して）実際の数値に書き換えておきます。複数の価格変更に対応してます。3桁以上は自動的にカンマがつきます→「2,000」

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】では目次を《ボタンリンク風の並列表記》に変える機能を搭載してます。1カラムページでの運用をベースに作ってみました。変更のやり方こちらが通常の目次レイアウトです。そしてボタンリンク風に一列表示にレイアウト変更したのがこちら。（※PC表示時）1カラムの商品紹介ページなんかでたまに見かけるページ内リンクで、クリックすると該当するH2見出しまで一気にスクロールします。やり方は目次用の独自タグを【Volar2】で用意している専用のクラスで囲むだけです。<div id="xxx"><% index %></div>「xxx」は”便宜上”のクラス名です。（マニュアルに実際のクラス名を記載）基本仕様及びカスタマイズ表示見出し表示可能な見出しはH2のみです。表示列PCでは横並び最大5見出しまで。6見出し以降は2段目に折り返されます。（※各見出し枠の幅は固定）タブレットでは2列、スマホでは1列固定表示です。背景色デフォルト設定では背景は透明です。ただしユーザー指定スタイル上で変更することもできます。筆者ページ全体が白背景の場合は目次枠内も白背景色に見えます。テキストの大きさや色、背景色など一部の設定もユーザースタイル上でカスタマイズ可能ではあります。目次設定この機能を使うページでは『目次の個別設定』を選択します。（全体設定のままだと通常の目次がついてるページも変換されてしまうため）今回のサンプルでは『タイトル』は空欄にしてますが、入れた場合の設定も一応ついてはいます。こちらのページでご覧になれます。★ -->

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

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

当サイトで使用しているキャプチャ画像は（【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】では《フルワイド背景（シンプル版）』にて背景画像の固定化機能も搭載してます。※【Volar2】《フルワイド背景画像（シンプル版）》についてはこちらの記事をご参照ください。フルワイド背景画像（シンプル版）SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像・シンプル版＞についての詳細ページ。