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

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

 

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

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

 

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

 

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

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

 

 

標準のヘッダー画像を【Volar2】画像スライダーに変更するには専用モジュールのコメントアウトを解除して有効化する必要があります。

 

テンプレート→HTMLテンプレート編集→トップページと開き、以下の①と②の2つのモジュールのコメントアウトを解除します。

 

 

画像に関しては横幅1400pxぐらいあれば大丈夫かと。

あまり小さい画像だとブラウザ幅いっぱいまで引き伸ばされた時にボケボケになる恐れもあります。

（それも演出のうちなら問題はありません）

 

その画像を『画像管理』でSIRIUS2内に取り込みます。

続いて【テンプレート】→【スタイルシート編集】→【css\header-slide】と開きます。

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

 

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

（.jpg以外の.pngとか.webpの画像は拡張子ごと差し替えてください）

 

 

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

 

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

 

画像にオーバーレイ

デフォルトで画像にはオーバーレイがかかってます。

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

 

テンプレート→HTMLテンプレート編集→トップページを開きます。

[% module(【Volar2】ヘッダーに画像スライダー（HTML）) %]をダブルクリックします。

該当するモジュールが開くので下の画像のオーバーレイ用のクラスである「cover」というテキストを削除します。

 

 

画像上にテキスト

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

（テキスト非表示も可）

 

先ほどと同様テンプレート→HTMLテンプレート編集→トップページを開きます。

[% module(【Volar2】ヘッダーに画像スライダー（HTML）) %]をダブルクリックします。

該当するモジュールが開くので下の画像の赤枠内を適当なテキストで差し替えます。

 

 

ただし表示位置は上下左右の中央で固定です。

位置の変更ができないこともないですが、座標計算がかなり大変なので固定仕様にしました。

 

テキストの色・明朝体・サイズ変更などは専用スタイルシート側で変更可です。

（やり方はマニュアルに載せてあります）

 

画像の高さ

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

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

 

スマホでは真ん中エリアが表示されます。