オリジナルバナー-Volar2

オリジナルバナー-Volar2

SIRIUS2テンプレート【Volar2】ではオリジナルのバナーデザインをご用意してます。
 

アイキャッチ画像

当サイトで使用しているキャプチャ画像は(【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にします。

画像の登録もテキストやリンク設定も専用のモジュールをダブルクリックして開く画面内に”挿入”または”記述”するだけです。