※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

フロート広告とアドセンスアンカー自動広告表示機能

キャプチャ画像

スマホやタブレットで表示した時にだけ一番下に固定表示されるフロート広告や、画面最上段に表示されるアドセンス(アンカー)自動広告の設置が簡単にできます。

 

また画面幅の広いPC上では広告枠としても使えますがフロートタイプの情報エリアという使い方を想定してます。


スマホフロート広告

ここで説明する”フロート広告”というのはアドセンスの自動広告ではなくASP系の独自広告枠もしくは自作の広告表示枠になります。

 

”ASP”とは?

ASPというのは『アフィリエイト・サービス・プロバイダ』の頭文字をとったもので、成功報酬型広告(成果が発生した場合にのみ報酬が支払われる広告)を配信するプロバイダのことです。

 

A8とかバリューコマースとかリンクシェアなどが有名どころです。

 

こちら↓がフロート広告のサンプル表示例です。

 

スマホ最下部に固定表示されます。

 

キャプチャ画像

 

所定の位置に広告コードをペーストするだけで自動表示されます。

 

サイト訪問者の利便性を考え、「閉じる」ボタンも装備しました。

広告がウザい時は「閉じる」をクリック(タップ)すれば非表示にできます。

 

サンプル画像は320×50のバナー広告風画像を使用した際のキャプチャ画像です。

(※実際のASP広告での表示も確認済みです)

 

若干ですが透明度を設定してうっすらと下が見えるようにしてあります。

 

初めての広告表示には30分~1時間ほどかかる場合があります。

 

スマホとタブレット用の2種類の設定項目を設けているので、『スマホだけで表示させたい』・『スマホとタブレットで別々のサイズの広告を表示させたい』などの振り分けもできます。

 

たとえばこちらはタブレット用にサイズ大きめのバナー広告を指定したサンプルです。

 

キャプチャ画像

 

「閉じる」ボタンの位置は変えられないので、スマホと同じサイズ幅のバナー広告を貼るとバナーと「閉じる」ボタンの位置が離れてしまいます。

こういった広告自体を嫌がる方も少なくないので、設置する際は充分考えた上でご利用ください。

 

またデフォルトでは表示OFFになってます。

 

表示タイミング

初期バージョンは上から一定量スクロールすると表示される仕様でしたが、これだどんなページも同じ位置から表示されてしまい、量が多いページでは常に広告枠が表示されて肝心のページ内容が見づらくなってウザくなる傾向があったため、修正版ではフッターエリアに近づいたら広告エリアが表示されるという”最下部からどれくらい離れたところから表示させるか”という仕様に変更しました。

(※位置は調整可です)

 

このあと紹介するフロート情報エリアも同じタイミングでの表示になります。

フロート情報エリア(PC)

フロート広告設定ですが、スマホ・タブレット2つの設定に加えてPC用の設定も設けてあります。

 

ただしPC上は横幅が広く取れるため、フロート広告はもちろん情報表示エリアとしても使えます。

 

たとえばこちら↓のサンプル表示例ですが、左端にはアイキャッチ風画像を表示させ、真ん中には説明テキストが表示される仕様になってます。

 

右端はフロート広告同様、閉じるボタンが付いてます。

 

キャプチャ画像

 

こちらも用意した箇所に画像やテキストを入力するだけのカンタン設定。

 

表示タイミングもフロート広告と全く同じです。

 

表示領域の横幅は1160px高さは90px固定

 

表示画像はサイズに制限はありませんが、高さが90pxより大きい場合は縦横同比率で高さ90pxに縮小表示されます。

 

1枚画像のみの表示の場合

設定上は『左に画像、右にテキスト表示』を想定してますが、”テキストは不要・1枚画像だけで表示させたい”というケースもあるでしょう。

 

それも可能です。

 

キャプチャ画像

 

その場合、画像の最大横幅は1050px×90pxで作るとちょうどよいかと思います。

アドセンス・アンカー自動広告

ASP系フロート広告とは別に、Googleアドセンスの自動広告によるフロート広告(※アンカー広告)も設置できます。

 

ここでは自動広告についての詳細は省きますが、アドセンス自動広告の中に『アンカー広告』というのがあります。

 

これが先ほどのフロート広告に該当するモノです。

(※ただしアンカー広告は画面上部に表示される仕様にしてます)

 

これをONにした状態で、アドセンスから発行されるコードを【Volar】の所定モジュール内に貼り付けるだけで、下のようなアドセンス自動広告を表示させることができます。

(※キャプチャ画像は旧アンカー広告のものです)

 

キャプチャ画像

 

追記

以前はアンカー広告専用のコードが簡単に取得できたのでそれを貼り付けるだけでよかったのですが、現在のアドセンス自動広告はサイト全体に共通の設定を施す仕様に変わったようなので、アンカー広告のみを有効にするのが難しくなってきてます。

 

もちろん”ページ内広告”や”関連コンテンツ”は表示せず”アンカー広告”だけ有効にすればいいというのであれば、【Volar】で用意している『アドセンス・アンカー自動広告』というモジュール内に自動広告用のコードをコピー&ペーストすればそれで終了です。

 

実は『アドセンス・アンカー自動広告』というモジュールは、単純にそこにコードを貼るだけでアンカー広告が表示されますよという初心者向けのモジュールでしかありません。

 

そのためHTMLに詳しい方はこのモジュールは無視してテンプレートに直接コードを貼り付けても何の問題もありません。

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像