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

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

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

複数の広告掲載エリア

キャプチャ画像

SIRIUSテンプレート【Volar】では、広告コードを貼るだけで表示可能な広告掲載エリアを複数用意してます。

 

あまり広告をベタベタ貼るとサイト訪問者が嫌がる傾向があります。

 

収益見込みの多い場所を厳選してほどほどにしておくのがベストです。


複数の広告表示エリア

テンプレートの横幅拡大に伴い、サイドメニューには横幅300pxサイズの広告が、本文エリアには横幅728pxの広告を格納することができます。

(※広告エリアではなく情報エリアとしても使えます)

 

キャプチャ画像

 

サイドメニューエリア広告

サイドメニュー内の広告エリアは以下の2ヵ所を想定してます。

(PC・タブレットでご覧になってる方はサイドメニューをご確認ください。スマホでは記事終わり以降に表示されます)

上記2ヵ所、どちらもデフォルトでは表示OFFになってます。

 

記事本文エリア広告(記事2タイトルの直前)

Wordpressワードプレスサイトでよくみかける『最初のh2見出しの直前に自動で広告を表示』させる機能をSIRIUSにも組み込んでみました。

 

テンプレートに実装してるので、最初の設定さえ済ませればあとは自動表示になります。

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

3カラムでのみ使用可能なフリースペース5(サブメニュー・上段)を広告表示用として利用してます。

当サイトでは確認用に実際に広告を表示させてあります。

 

”複数の広告表示エリア”(h2)という見出しの直前に表示されてる広告がそれです。

 

広告の振り分け

サイドメニュー最上段(フリースペース3使用)および記事2タイトル直前の広告エリアに関しては、見る機器の画面サイズの違いで半自動で広告を振り分ける設定にしてあります。

 

具体的にはこんな↓感じになっており、赤文字の3ヵ所に広告コードを貼る仕様です。

 

<div...>

<p>&nbsp;</p>

(※ここにPC用広告コード)

</div>

<div...>

<p>&nbsp;</p>

(※ここにタブレット用広告コード)

</div>

<div...>

<p>&nbsp;</p>

(※ここにスマホ用広告コード)

</div>

 

設定方法は以下の通り。

  • 画面ごとに広告サイズを分ける必要がなければ3ヵ所すべてに同じ広告コードを貼る。もしくは一つにまとめる。

    分けるならそれぞれ別の広告コードを記入。

  • <p>&nbsp;</p>部分は「スポンサーリンク」などのテキスト表示用。

    必要なければそのままにしておけば何も表示されない。

  • タブレット(iPad)ではサイドメニューの横幅がかなり狭くなって、貼れる広告がほとんどないこともある。

    その場合タブレットのみ広告は非表示という設定も可能。

アドセンス広告ならレスポンシブ広告を使えば振り分けすることなく問題は解決します。

 

しかしながらたまに縦にびろ~んと伸びる広告が表示されてレイアウトが崩れることもあるため、敢えて縦横固定の広告振り分け設定を取り入れました。

 

ASP広告の場合はぴったりのサイズがなくても自動で縮小表示される場合があります。

 

このあたりに関しては実際に試してみないとわからない部分もあります。

”ASP”とは?

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

 

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

 

記事下広告

記事最下部にフリースペース6(サブメニュー・下段)を利用して2面並列広告表示が可能なひな形をご用意しました。

フリースペース6にひな形となるコードが入力済みなのであとは広告コードを入れるだけ。

 

エントリーページのみの表示に設定してあります。

 

サイズは横幅300px(×250px等)固定の広告を左右に並べる仕様になってます。

(※SIRIUSのレイアウト枠機能をそのまま使おうとしたのですが、いろいろ支障が出そうなのでオリジナルのレイアウト枠にしました)

 

しかしながらこれをスマホで見た場合は広告が縦に2つ並んでスマホの画面全部が広告で埋まってしまいます。

 

またもしもどちらもアドセンス広告だった場合は『1つのスマホ画面に2つの広告ユニットを表示させる規約違反』にもなりかねません。

 

最近ではこの規約が撤廃されたという話もチラホラ聞きますが(※未確認)、いずれにしてもちっちゃな画面が広告だけで埋まってしまうのは利用者の利便性を大きく損ないます。

 

そこで【Volar】ではスマホ(&タブレット)表示時は左側の広告枠を非表示にするという設定をデフォルトで付けてます。

(右側に変えることもできます)

タブレットは画面サイズの関係でスマホ同様、片側のみの表示にしてあります。

カエレバ用スタイル

アフィリエイトサイトで『カエレバ』を使ってらっしゃる方も多いかと思います。

 

その『カエレバ』用のスタイルシートをご用意しました。

『カエレバ』は、サイト上でアフィリエイト商品を紹介するためのブログパーツです。

 

ここでは『カエレバ』についての詳細は割愛します。

 

 

『カエレバ』の設定画面では「デザイン」は”amazlet風-2(cssカスタマイズ用)”を選択します。

 

キャプチャ画像


 

こちらがPC上での表示例です。

 

キャプチャ画像

 

こちらがスマホ上での表示例です。

 

キャプチャ画像

『カエレバ』の発行コードを貼り付けるだけのカンタン設定です。

 

『ヨメレバ』も同じように表示可能だと思われますが、その設定は書いてません。

(※ただ単に管理人が『ヨメレバ』をやってないだけです)

 

レイアウトが崩れないのは”Amazon・楽天・yahooショッピング”のみです。

 

これ以外のものを指定するとデザインが崩れる恐れがあります。

SIRIUSテンプレート【Volar】

キャプチャ画像

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

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