スプリットギャラリー-Volar2
SIRIUS2テンプレート【Volar2】では左にテキスト右に画像スライドショーを表示できるスプリットレイアウト機能を搭載してます。
概要
《スプリットギャラリー》の主な特長。
- 左エリアには見出しや説明文などのテキストを、右側にはサムネイル画像をクリックするとメイン画像が切り替わるスライドショーを表示するレイアウト。（※PC表示時のみ）
- モバイル機器ではテキストエリアは上に、その下に画像スライドギャラリーというレイアウト。
- サムネイル画像はPC表示には最大5個、タブレットでは4個、スマホでは2個の固定レイアウト。
- 画像数が表示数を超えた場合はサムネイル画像をマウスでドラッグ（or スワイプ）すれば表示可。
- 設置できるのはページ内に1個だけ。都合5ページ分用意しました。
1個のモジュールに1枚の画像を登録するだけとか、［有効］のチェックのON/OFFで瞬時に表示/非表示を切り替えられたりとできるだけ簡単な操作で済むようにはしてあります。
ただし手軽さを優先すると用意するモジュール数が膨大な数になってややこしくなりそうなので、一部のモジュールはHTMLコードが混じった中での画像登録や表示/非表示設定になってます。
よって使い勝手は他の【Volar2】機能に較べるとやや悪しという感じです。
設定
《スプリットギャラリー》は下のようなモジュール上で設定します。
テキスト
赤枠内が1個1個の画像＆テキストの設定用モジュールになります。
例えば1個目のテキストに関しては、モジュール①『【Volar2】スプリットギャラリー1［テキスト］』をダブルクリックするとテキスト入力画面になるので好きなテキストを記入します。
画像
画像の登録に関しては専用のHTMLコードが混じった画面内での作業になるため、やや面倒かと思います。
画像はモジュール②『【Volar2】スプリットギャラリー1［画像リスト］』をダブルクリックすると下のような画面になります。
上から順に（サムネイル画像）左側からの表示順になっており、デフォルトで最大8枚の画像を設定できるようになってます。
画像自体は赤枠の『（※ここに画像を挿入）』という部分を削除→記事装飾メニューの”画像”をクリックして画像を挿入します。
画像が7枚以内だったり一時的に非表示にしたい時は行ごと削除するか、コメントアウト（下の画像赤枠）します。
表示
《スプリットギャラリー》を表示したいページの個別設定→詳細設定タブ内の下の画像の位置に③『【Volar2】スプリットギャラリー（スタイル）』と④『【Volar2】スプリットギャラリー（スクリプト）』の2つのモジュールの独自タグをコピー＆ペーストします。
最後に《スプリットギャラリー》を表示したい位置に、1個目ならモジュール⑤『【Volar2】スプリットギャラリー1』を挿入します。
挿入後は下のようなコードが生成されます。
[% module(【Volar2】スプリットギャラリー1) %]
これでデモページのような《スプリットギャラリー》が表示されます。
《スプリットギャラリー》は商品やサービスごとにいくつか使いたいときもあるかと思います。
そのため5つの設定用モジュールを用意しています。
（モジュールを複製＆若干の修正をすれば実際には何個でも作れます。ただしHTML等がある程度詳しくないとミスを起こしやすいです）
カスタマイズ機能は特に設けておりません。（設定が面倒なので）
同じページに複数の《スプリットギャラリー》は設置できません。ページが異なる分には問題ありません。
ただし異なるページにそれぞれ《スプリットギャラリー》を設置する場合、その都度ページの個別設定を開き、『詳細設定』タブの『</head>タグ前に挿入する内容』欄と『</body>タグ前に挿入する内容』に前述したモジュール名をペーストする必要があります。
『スプリットギャラリー』の関連記事
-
SIRIUS2テンプレート【Volar2】では標準機能の＜画像レイアウト＞に専用のタグを足すだけでさまざまなレイアウト表示ができるようになります。 -
SIRIUS2の＜画像ギャラリー＞におけるスマホでの見せ方のカスタマイズをご紹介します。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアを動画ヘッダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアをフェード切り替え画像スライダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では1カラム形式のページに開閉式のサイドメニューを表示させることができます。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像・シンプル版＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜画像フルワイド化＞のシンプル版。使い勝手が向上しました。