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

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

SIRIUS2テンプレート【Volar2】では左にテキスト右に画像スライドショーを表示できるスプリットレイアウト機能を搭載してます。
カテゴリー（Volar2独自機能）
 

アイキャッチ画像

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

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

 

キャプチャ画像

1カラム（ワイド）での利用を想定してデザインしてます。

 

ピンポイントなレイアウトなので、商品やサービス等の紹介などで使えるかと。

実際の表示（デモ）は露天風呂【Volar2版】でご覧になれます。

目次

概要

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

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

使い方

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

[% module(【Volar2】スプリットギャラリー1) %]

 

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

（※簡略化してます）

キャプチャ画像

 

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

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

縦書き表示にするには【Volar2】の縦書きモードを利用します。

（マニュアルに詳細を書いておきます）

 

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

（※簡略化してます）

キャプチャ画像

 

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

[% module(【Volar2】スプリットギャラリー（スタイル）) %]

キャプチャ画像

編集画面で右クリック→【タグ挿入】→【モジュール挿入】で入力した上記モジュールをCtrl＋X（カット）→『</head>タグ前に挿入する内容』にCtrl＋V（ペースト）するのが簡単で確実なやり方です。

 

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

[% module(【Volar2】スプリットギャラリー（スクリプト）) %]

キャプチャ画像

 

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

使用する画像のサイズが異なってるとメインエリアに表示される画像の高さに違いが生じることもあります。そうすると画像が切切り替わるたびに高さの違いによってカクカクするので画像サイズは統一しておくことをおすすめします。

 

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

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

カスタマイズ機能は特に設けておりません。（設定が面倒なので）

同じページに複数の＜スプリットギャラリー＞は設置できません。ページが異なる分には問題ありません。

 

ただし異なるページにそれぞれ＜スプリットギャラリー＞を設置する場合、その都度ページの個別設定を開き、『詳細設定』タブの『</body>タグ前に挿入する内容』欄と『</body>タグ前に挿入する内容』に前述したモジュール名をペーストする必要があります。