オリジナルバナーデザイン-Volar2

オリジナルバナーデザイン-Volar2

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

アイキャッチ画像

【Volar2】ではサイズ違いオリジナルのバナーデザイン機能を搭載してます。

主に1カラム(ワイド)での利用を想定してデザインしてます。

 

また画像自体はあなたご自身でご用意していただく必要があります。

実際の表示(デモ)は【Volar2】オリジナルバナーでご覧になれます。


横幅短めの簡易バナー

主にフッター周りで使えそうなバナーデザインになります。

サンプルがこちら。

 

キャプチャ画像

 

  • 2~5個まで設置可能。画像幅及び画像間の余白は個数に応じて自動調整。(PC)
    画像を暗くするオプション付き。
  • バナーにマウスオーバーすると画像が少し大きくなる演出付き。(※PCのみ)
  • スマホでは1列縦表示。
  • テキストカラーは白固定。(変更も一応可能)

このページでご紹介する3タイプのバナーすべて、基本的にはこちらで用意している専用のHTMLコードをコピー&ペーストしたあと画像とテキストを差し替えるという若干の手間は生じます。

(当該HTMLコードはマニュアルに記載してます)

 

画像に関してはSIRIUS2の画像挿入機能を使えば当該箇所に自動的に画像用コードが挿入されます。

テキストは当該箇所にお好きなテキストを記入します。

 

その後SIRIUS2のリンク機能を使ってリンクURLを差し替えていただくだけでデザイン済みのバナー画像として表示できる仕様です。

余白なしのバナー

少し大きめのバナーデザインになります。

サンプルがこちら。

 

キャプチャ画像

 

  • 2~5個まで設置可。画像幅は個数に応じて自動調整。(PC)
    画像を暗くするオプション付き。
  • 画像は余白なしの接着表示。
  • バナーにマウスオーバーすると画像が少し大きくなる演出付き。(※PCのみ)
  • タブレットでは固定幅で列数は自動調整。スマホでは1列縦表示。
  • テキストカラーは白固定。

フルワイドのバナー

コンテンツエリア幅まで広がるバナーデザインです。

サンプルがこちら。

 

キャプチャ画像

 

  • 横幅はフルワイドで固定。画像を暗くするオプション付き。
  • 縦にいくつでも増やせます。画像間の空きはなく余白なしの接着表示。
  • バナーにマウスオーバーすると画像が少し大きくなり、テキストも少し右に動く演出付き。(※PCのみ)
  • テキストカラーは白固定。