ヘッダー画像を画像スライダーに-Volar2

《Volar2》ではトップページのみですがヘッダー画像をズーム付きのフェード切り替え画像スライダーに変更することができます。

《Volar2》の《ヘッダーエリアに画像スライダー》の基本仕様は以下の通り。

• ヘッダーエリアに2枚もしくは3枚の画像をフェードで切り替えしながらループ表示。
• 画像はズームアウトしながらの表示。（※ズームインもズームなしも可能）
• 総尺は2枚画像時はおよそ8秒、3枚画像時はおよそ10秒でループ。
• 画像上には2段テキストも表示可。（カラーやサイズも個別に変更可）
• 1段目のメインテキストはH1が設定済み

《ヘッダーエリアに画像スライダー》はどちらかというと『サイトイメージの向上』的な使い方になろうかと。

たとえば時計を扱うサイトなら時計の象徴的なイメージカットとか。
美容関連のサイトなら商品のイメージカットや身に着けてる人物のイメージカットなど。

《ヘッダー画像を画像スライダーに》機能を利用するには専用モジュールを有効化する必要があります。

表示したい画像は前もって『画像管理』でSIRIUS2内に取り込んでおきます。

続いてSIRIUS2の上部メニューからテンプレート→スタイルシート編集→（専用スタイル）を開き、マニュアルサイトでご説明しているダミーの画像ファイル名を登録した画像ファイル名で差し替えます。

一例を挙げると、下の赤下線部分を登録済みの画像ファイル名で差し替えるといった作業になります。

これで画像スライダーは稼働します。

いくつかカスタマイズ項目も用意してます。

画像にオーバーレイ

デフォルトで画像にはオーバーレイ（※画像を少し暗くする）が薄くかかってます。この透明度は変更できます。
オーバーレイの解除も可能です。

画像上にテキスト

画像スライダー上にテキストを表示できます。「見出し」と「説明文」の2段形式。
（テキスト非表示も可）
テキストのサイズや色変更も個別にできます。

画像の高さ

デフォルトではブラウザの高さに自動的に合わせる仕様になってます。
これを700pxなど固定の高さに変更することもできます。