ヘッダー画像の代わりに画像スライダー

 

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

 

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

• ヘッダーエリアに3枚の画像をフェードで切り替えしながらループ表示。（※画像は3枚固定）
• 3個目の画像表示後は1個目の画像に戻る。
• 画像はズームアウトしながらの表示。（※ズームインもズームなしも可能）
• 総尺は1周およそ10秒。
  （これ以上長くてもサイト訪問者は見てくれないと思い10秒に設定＆変更不可）
• 画像上には2段テキストも表示可。（カラーやサイズは変更可）

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

 

たとえば時計を扱うサイトなら時計の象徴的なイメージカットとか。

美容関連のサイトなら商品のイメージカットや身に着けてる人物のイメージカットなどでしょうか。

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

 

続いてSIRIUS2の上部メニューからテンプレート→スタイルシート編集→（※専用スタイル）を開きます。

下の赤線部分の「xxx」を、登録した画像ファイル名で差し替えます。

 

①が1枚目の画像ファイル名、②が2枚目の画像ファイル名、③が3枚目の画像ファイル名になります。

 

 

これでとりあえず画像スライダーは稼働します。

基本的にはこちらで用意した設定をデフォルトで使っていただくのがベストですが、いくつかカスタマイズ項目も用意はしてます。

 

画像にオーバーレイ

デフォルトで画像にはオーバーレイ（※画像を少し暗くする）がかかってます。

これが必要ないという方は以下の手順で解除が可能です。

 

モジュール『【Volar2】ヘッダーに画像スライダー（HTML）』を開きます。
（下の画像の）オーバーレイ用のクラスである「cover」というテキストを削除します。

 

 

画像上にテキスト

画像スライダー上にテキストを表示できます。「見出し」と「説明文」の2段形式。

（テキスト非表示も可）

 

先ほど同様、モジュール『【Volar2】ヘッダーに画像スライダー（HTML）』内にテキスト表示エリアがあるのでそこに記述します。

 

画像の高さ

デフォルト設定ではブラウザの高さに自動的に合わせる仕様になってます。

これは700pxなどの固定高さに変更することもできます。