検索結果

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

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