フルワイド背景画像（シンプル版）-Volar2
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像・シンプル版＞についての詳細ページ。
当サイトで使用しているキャプチャ画像は（【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はダークモードのみの機能搭載ですが、ダークモードにしたい時は該当するスタイル部分の前後のコメントアウトを解除するだけで発動します。
『フルワイド背景画像（シンプル版）』の関連記事
-
SIRIUS2テンプレート【Volar2】では標準機能の＜画像レイアウト＞に専用のタグを足すだけでさまざまなレイアウト表示ができるようになります。 -
SIRIUS2の＜画像ギャラリー＞におけるスマホでの見せ方のカスタマイズをご紹介します。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアを動画ヘッダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアをフェード切り替え画像スライダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では1カラム形式のページに開閉式のサイドメニューを表示させることができます。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜画像フルワイド化＞のシンプル版。使い勝手が向上しました。 -
SIRIUS2テンプレート【Volar2】のテキスト周りを彩る＜独自の装飾効果＞についての詳細ページ。