サイドバートップと記事中自動表示広告

キャプチャ画像

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

 

ここではサイドバー最上段記事中に自動表示可能な広告エリアの設定についてご紹介します。

 

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

 

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


広告エリアのサイズ

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

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

 

キャプチャ画像

 

サイドバーおよび記事中広告

サイドバーエリア

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

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

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

 

記事本文エリア

記事本文エリア内の任意の位置

これは本文エリアに直接書くことになり、修正等の管理が大変なのであまりおススメはしません。

記事2タイトルの直前

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

 

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

 

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

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

 

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

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

 

『記事1』にしか本文がない場合(『記事2以降は空白』)でも表示されてしまいます。

 

※ただし『上級者向け設定』の”スタイル割り込み”欄に広告非表示のスタイルシートを書き込めば、ページごとに非表示にすることもできます。

 

上級者向けスタイル割り込みに関しての詳細はコチラ↓をご覧ください。

スタイル割り込みとheadタグの使い方(上級者向け設定) - SIRIUS(シリウス)でホームページ作成

上級者向け設定の「スタイル割り込み」や「headタグ」を使えるようになると、ページの表現の幅が広がります。

 

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

 

具体的にはこんな↓感じになっており、赤文字の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とかバリューコマースとかリンクシェアなどが有名どころです。

カエレバ用スタイル

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

 

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

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

 

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

 

 

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

 

キャプチャ画像


 

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

 

キャプチャ画像

 

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

 

キャプチャ画像

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

 

『ヨメレバ』も同じように表示可能だと思われますが、その設定は書いてません。
(※ただ単に管理人が『ヨメレバ』をやってないだけです)

 

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

 

これ以外のものを指定するとデザインが崩れます。
(※時間があればそのうち追加する予定です)

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

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

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)
 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替