検索結果

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

パーツ→＜画像ギャラリー＞はページ内に複数の画像を並べて表示できる機能で、画像をクリックするとポップアップで拡大表示される仕様になっています。商品やサービスの内容がテキストだけだとどうしてもアピール力に限界がありますが、画像を並べることでイメージが具体化して利用者の購買意欲もより高まるかもしれませんね。設定方法＜画像ギャラリー＞の設定は至って簡単。極端な話、画像を指定するだけでほとんどの作業は完了します。（むしろ画像を作成する方が大変？）＜画像ギャラリー＞の設定画面を開くには、【パーツ】→＜画像ギャラリー＞→【画像ギャラリー管理】→【追加】もしくは【パーツ】→＜画像ギャラリー＞→【画像ギャラリーの追加】から開けます。このあと実際の設定画面で説明していきます。（※使用画像はSIRIUS2に収録されてるヘッダー画像です）縮小版①表示形式「連続して表示」と「1枚ずつ表示」があります。このあとに実際に画像ギャラリーを表示させてますが、そちらの設定が「連続して表示」でクリックすると画像が大きく表示されて両端に前後の画像へのリンクとなる矢印が表示されます。「1枚ずつ表示」は矢印が表示されず、クリックした画像のみが大きく表示されるということです。②横幅のサイズサンプルでは「30%」つまり1列に3枚の画像が表示される計算です。ここのチェックがOFFの場合は画像サイズ（最大でコンテンツ幅）のまま並んで表示されます。③縦幅のサイズチェックがOFFなら実寸の高さで、ONにして数値を入れればその数値の高さで表示されます。（なぜかpxしか選択肢がない）④新規追加画像を追加する時にクリックします。⑤説明文の入力画像がポップアップ表示された際に画像下に説明文を表示できます。（HTML上は”alt属性”に記述されます）すべての設定が完了したら「OK」をクリック。すると＜画像ギャラリー＞専用の独自タグが生成されます。こちらが今回のサンプル画像ギャラリーです。（※実際の表示）スマホでは画像枚数に関係なく2枚ずつの表示になるようです。（当サイトでは《Volar2》の機能を利用してサムネイルのサイズを少し大きく表示させてます）こうして見ていくと横幅の広い1カラムページで見せていくのが＜画像ギャラリー＞の一番効果的な使い方とも言えます。パーツ機能はデザインモードでもテキストモードと同じくSIRIUS2の独自タグでの表示になるので、（ブラウザ or内蔵）プレビューでの表示チェックが不可欠になります。