フッターに画像を表示-Volar2

フッターに画像を表示-Volar2

SIRIUS2テンプレート【Volar2】では、画像を指定するだけでフッターエリアにブラウザ幅いっぱいで画像を表示させることができます。
 

アイキャッチ画像

当サイトで使用しているキャプチャ画像は(【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。

 

【Volar2】では《フッターエリアに背景画像》を表示できるスタイルを用意してます。

 

はっきり言って見映えだけです。サイトイメージの向上です。

 

それでもフッターまで見てもらってリンクをクリックしてもらってサイト内を回遊してもらって…そうなってくれればありがたいですね。


有効化

この機能はデフォルトでは無効化されてます。

有効化のやり方

【Volar2】の《フッターに画像表示》を利用するには、モジュール『【Volar2】フッターに背景画像(スタイル)』の[有効]のチェックをONにします。

 

キャプチャ画像

 

画像設定

フッターに背景画像として表示させたい画像は事前にSIRIUS2の画像管理内に取り込んでおきます。

 

モジュールの有効化が済んだら、上部メニューからテンプレートスタイルシート編集《フッターに画像表示》用の専用スタイルを開きます。

 

下の『xxx(.jpg)』のところを画像管理内に取り込んだ画像のファイル名で差し替えます。
これでフッターに画像が表示されます。

 

キャプチャ画像

サンプル

下がデフォルトのフッターエリアの一例です。(※ベーステンプレート&PC表示時)
殺風景ですねぇ。

 

キャプチャ画像

 

ここに【Volar2】の《フッターに画像表示》を使って画像を設定すると下のようになります。

サイト管理人

筆者

 

ブラウザ幅いっぱいに自動的に広がって表示される仕様です。

キャプチャ画像

使用したオリジナル画像はこちら。

ブラウザ幅やフッターエリアの高さによって画像の表示範囲は異なってきます。

 

キャプチャ画像

 

デフォルトではフッターエリアの高さは(表示するものがあまりないので)それほどありません。

そこで今回は【フリースペース・フッター】にロゴ画像を加えてフッターの高さを増やしてみました。

高さが広がると背景画像もそれなりに見られるようになってきます。

 

キャプチャ画像

 

スマホではPCよりも表示領域が狭くなりますが、スマホ独自の表示仕様などは特に搭載してません。

スマホで一番下までスクロールして見る方はほとんどいないだろうとの判断からです。

 

キャプチャ画像

 

画像上のテキストにも影響が出てしまうため、オーバーレイなどの視覚効果は非搭載です。

そのため必要であれば画像加工ソフトやウェブサービスなどで画像自体にオーバーレイや他の視覚効果を付けてください。

画像加工ソフトなら私も使ってるAffinity Photoをおススメします。

当サイトの画像もすべてAffinity Photoで作成してます。