当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。
【Volar2】ではサイズ違いのオリジナルのバナーデザイン機能を搭載してます。
主に1カラム（ワイド）での利用を想定したレイアウトです。
また画像自体はあなたご自身でご用意していただく必要があります。
横幅短めの《バナー［小］》
主にフッター周りで使えそうなバナーデザイン。
サンプルがこちら。
- 作成できるのは1種類のみ。
- 最大5個まで設置可能。画像幅及び画像間の余白は個数に応じて自動調整（※PC）。
画像を暗くするオプション付き。 - バナーにマウスオーバーすると画像が少し大きくなる演出付き。（※PCのみ）
- スマホでは1列縦表示。
- テキストカラーは白固定。
有効化のやり方
《オリジナルバナー［小］》を表示するにはモジュール②『【Volar2】バナー［小］（表示/非表示）』の［有効］のチェックをONにします。（※①本体は常にON）
（チェックをOFFにすれば画像やテキストなどの設定を残したまま非表示にできます）
事前に③『【Volar2】バナー［小］（1個目の画像）』や⑥『【Volar2】バナー［小］（2個目の画像）』などで表示枚数分の画像の登録が必要です。（※ダブルクリックで開く画面内に記事装飾メニューの『画像挿入』から1発入力）
同様に③『【Volar2】バナー［小］（1個目のテキスト）』や⑥『【Volar2】バナー［小］（2個目のテキスト）』では表示テキストの入力が、③『【Volar2】バナー［小］（1個目のリンク）』や（※表示欄外）『【Volar2】バナー［小］（2個目のリンク）』でリンクの設定ができます。
あとは＜バナー（小）＞を表示したい箇所にモジュール①『【Volar2】バナー［小］（本体）』の独自タグを挿入するだけです。
[% module(【Volar2】バナー［小］（本体）) %]
余白なしの《バナー［中］》
少し大きめのバナーデザインになります。
どちらかと言えば縦型画像向きでしょうか。サンプルがこちら。
- 作成できるのは1種類のみ。
- 最大5個まで設置可。画像幅は個数に応じて自動調整（※PC）。
画像を暗くするオプション付き。 - 画像は余白なしの接着表示。
- バナーにマウスオーバーすると画像が少し大きくなる演出付き。（※PCのみ）
- タブレットでは固定幅で列数は自動調整。スマホでは1列縦表示。
- テキストカラーは白固定。
有効化のやり方
こちらも先ほどのモジュール画面をスクロールすると出てくるモジュール『【Volar2】バナー［中］（表示/非表示）』の［有効］のチェックをONにします。
画像の登録もテキストやリンク設定も専用のモジュールをダブルクリックして開く画面内に”挿入”または”記述”するだけです。
ワイド幅の《バナー［大］》
コンテンツエリア幅まで大きく広がるバナーデザインです。
サンプルがこちら。
- 作成できるのは1種類のみ。
- 縦に最大3つまで増やせます。横幅はコンテンツ幅いっぱいで固定。
画像を暗くするオプション付き。 - 画像間の空きはなく余白なしの接着表示。
- バナーにマウスオーバーすると画像が少し大きくなり、テキストも少し右に動く演出付き。（※PCのみ）
- テキストカラーは白固定。
有効化のやり方
こちらも先ほどのモジュール画面をスクロールすると出てくるモジュール『【Volar2】バナー［大］（表示/非表示）』の［有効］のチェックをONにします。
画像の登録もテキストやリンク設定も専用のモジュールをダブルクリックして開く画面内に”挿入”または”記述”するだけです。
『オリジナルバナー』の関連記事
-
SIRIUS2テンプレート【Volar2】では標準機能の＜画像レイアウト＞に専用のタグを足すだけでさまざまなレイアウト表示ができるようになります。 -
SIRIUS2の＜画像ギャラリー＞におけるスマホでの見せ方のカスタマイズをご紹介します。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアを動画ヘッダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では通常のヘッダーエリアをフェード切り替え画像スライダーに簡単に切り替えることができます。 -
SIRIUS2テンプレート【Volar2】では1カラム形式のページに開閉式のサイドメニューを表示させることができます。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜フルワイド背景画像・シンプル版＞についての詳細ページ。 -
SIRIUS2テンプレート【Volar2】の1カラムページで使える＜画像フルワイド化＞のシンプル版。使い勝手が向上しました。