フルワイド背景画像（シンプル版）-Volar2

【Volar2】の＜フルワイド背景画像（シンプル版）＞ですが、機能としてはSIRIUS2標準搭載の『ブロック設定』の背景画像とほぼ同じです。

 

では何が違うのか。

【Volar2】に元々搭載していた【Volar2】の＜フルワイド背景画像＞機能も含めてその違いを先にご紹介します。

 

①設定方法

 A の『SIRIUS2ブロック設定』は専用画面内ですべてを完結できるのが一番の強みです。

これに対し B の『【Volar2】フルワイド背景画像』は（親となる）専用モジュールを2ヵ所挿入する必要があります。

画像の指定は（親）モジュールを開いた先にある（子）モジュール画面でPC用とスマホ用の画像ファイル名を入力します。

なおモジュール内容は多少簡略化して画像化していますが他にもいろいろ設定項目があります。

そのため慣れないとちょっと使いづらい感は否めません。

 

 C の『【Volar2】フルワイド背景画像・シンプル版』は専用のスタイル画面を用意しており、SIRIUS2の上部メニューからテンプレート→スタイルシート編集→（専用スタイル）を開いて画像ファイル名を入力します。

 

②画像固定＆③画像表示範囲④スマホ表示

 A の”スクロールにしたがって移動”と残り2つの”スクロールしても画像は固定”では、表示される画像エリアに若干の違いがあります。

 

 A はコンテンツ量が少ない場合は B と C 同様、元の画像のサイズに近い形で表示されます。

 

 

しかしながらコンテンツ量が増えてくると A はコンテンツの高さに合わせて画像が拡大されるため、ケースによってはなんの背景画像なのかわからない場合も出てきます。

 

 

これはスマホでも同じで、コンテンツが増えれば触れるほど画像が拡大されて、もはや背景画像の意味をなさなくなるケースも多々あります。

 

 

 

⑤記事タイトル（H2見出し）

 A と C に関しては記事ブロック全体に背景画像が敷かれるので記事タイトルに記入したH2見出しも背景画像内に収まります。

これに対し B は記事本文エリア内だけをカバーする背景画像になるため、記事タイトルに記入したH2見出しは背景画像外に表示されます。

ただしこれは記事本文エリア内にH2見出しを書くことで解決はします。

 

 

⑥オーバーレイ

 A にはオーバーレイの設定が標準で搭載されてます。

ただしダーク系のオーバーレイ時にテキストを白に設定した場合、コンテンツによっては見づらくなるケースもあります。

 

 B はモジュール名をちょっと変更するだけでダークモードやぼかし機能を即座に有効化できます。

またダークモード時（※ダーク系のオーバーレイ時）は自動で必要な部分のみテキストが白に変換されるよう設定してます。

 

 C はダークモードのみの機能搭載ですが、ダークモードにしたい時は該当するスタイル部分の前後のコメントアウトを解除するだけで即発動します。

上部メニューからテンプレート→HTMLテンプレート編集→トップページと開き、以下のモジュールのコメントアウトを解除して有効化します。

 

<!-- ★[% module(【Volar2】フルワイド背景画像・シンプル（スタイル）) %]★ -->

 

次に上部メニューからテンプレート→スタイルシート編集→（専用スタイル名）を開いて記事ブロックごとに背景画像に指定したいフィル名をコピー＆ペーストします。

 

これで終了です。