スプリットギャラリー-Volar2

【Volar2】では左にテキスト・右に画像ギャラリーというある意味”ピンポイント”なレイアウト機能を搭載してます。

（適当な呼び名がないので”スプリット［分割］ギャラリー”と名付けてます）

 

＜スプリットギャラリー＞の主な特長としては、

• 左エリアには見出しや説明文などのテキストを、右側にはサムネイル画像をクリックするとメイン画像が切り替わるスライドショーを表示するレイアウト。（※PC表示時のみ）
• モバイル機器ではテキストエリアは上に、その下に画像スライドギャラリーというレイアウト。
• サムネイル画像はPC表示には5個、タブレットでは4個、スマホでは2個の固定レイアウト。
• 画像数が表示数を超えた場合はサムネイル画像をマウスでドラッグ（or スワイプ）すれば表示可。
• 設置できるのはページ内に1個だけ。

＜スプリットギャラリー＞を表示したい箇所に以下のモジュールを挿入します。

 

上のモジュールをダブルクリックすると下のようなサブモジュールが表示されます。

（※簡略化してます）

 

①のモジュールを開くとテキスト入力画面になるので好きなテキストを記入します。

（通常の編集と同じです）

 

②のモジュールを開くと下のように画像挿入用のガイドが表示されるので『（※ここに画像を挿入）』という部分を削除してSIRIUS2の画像挿入機能から画像を指定していきます。

（※簡略化してます）

 

続いて編集画面の左側にあるサイト構成ツリーから＜スプリットギャラリー＞を利用するページの個別設定を開き、【詳細設定】タブの『</head>タグ前に挿入する内容』欄に以下のモジュールを記載します。

 

最後に【詳細設定】タブの『</body>タグ前に挿入する内容』欄に以下のモジュール名を記載します。

 

これでデモページのような＜スプリットギャラリー＞が表示されます。

 

これで1個のスプリットギャラリーが完成しますが、使いたいのは1ヵ所だけというわけにもいかないこともあるかと都合5つのモジュールを用意しています。

（モジュールを複製＆若干の修正をすれば実際には何個でも作れます）