Blogger用Vaster2でバリューコマースのローテーション機能を試してみる

ブログとして「blogger」を使っていますが、流石に完全無料のブログだけあってサポートに関しては皆無、なんでも自分で調べないと先に進めない。

最初は興味本位で「logger」にアフィリエイトのコードを挿入してみましたが、ASP毎にいろいろな問題が発生します。今回はバリューコマースのローテーション機能を試してみました。




先ずはランダム表示するためのデータをバリューコマーズのホームページで作成します。作成の手順は簡単でメニューの中から「広告管理/ツール」→「広告スペース管理」で基本になる広告を選びます。

選んだ画面の左真ん中辺りに「搭載広告を追加」と言うボタンが表示されるのでクリックして追加広告を他に9個追加できます。広告サイズは最初に選んだ広告サイズのものしか表示されなくなります。

ローテーションとはアクセス毎に10個まで登録したデータが自動的に切換わる機能です。自分の選んだコンテンツ画面だけ表示するのでGoogleアドセンスよりはコンテンツにあった表示画面になるかもしれません。

最近流行のダブルレクタングル表示なら最大20画面までランダム表示が可能。データの差し替えもバリューコマーズの管理画面から簡単にできるのが嬉しい(笑)

JavaScript等でランダム表示するよりよっぽど楽で使いやすい事がわかりました~~






今回、使ったHTMLのダブルレクタングル用コードは『Blogger用Vaster2でバーナーなどを自動的にランダム表示させてみる』等で使用していたものを利用しました。

CSS部分は

 @charset "utf-8";
.ad-entry-bottom {width:680;padding:0px !important;margin-bottom:10px; text-align: center;  }
.ad_left {display:inline-block; width:300px;}
.ad_right {display:inline-block; width:300px;}

@media screen and (max-width: 540px) { 
.ad-entry-bottom {width:340;}
.ad_right {display:none;}
}

ダブルレクタングルのためのHTML本文は

<div class="ad-entry-bottom">
    <div class="ad_left">
     アフリエイトコード挿入
    </div>
    <div class="ad_right">
     アフリエイトコード挿入
    </div>
</div>

挿入の仕方はブログ作成で HTML編集にして貼り付けるだけOK。後はアクセス毎にランダムに表示が変わります!!

スマホで見れば右側が消えてすっきり。ここまでは大きな問題もなくできました。bloggerのテンプレートにVaster2を使っているので、テンプレート内の「この真下にアドセンスを設置(記事下)」の部分にHTMLを挿入すればバリューコマースをアドセンスみたいなランダム表示が可能になるはず。




早速、試してみました。しかし、エラーが出て上手くセーブできない。ページ毎でHTML編集で挿入すると文字の一部だけ自動的に「実体参照」変換されるのですが、この変換されたデータでは十分ではないようです。

おまじない文字の <![CDATA[ ~~~~~~~ ]]> で囲んでみるとエラーなくセーブできました。でも前後に余計な文字 <! 、 ]]> が表示されてしまいました。

ちゃんと動くのですがどうも余計な文字が目障り!いろいろ試してみると私の場合は

<![CDATA[
 ~~~~~~~ 
<![CDATA[
]]>

で囲うと理由はわかりませんが、余計な文字が消えて動作しました。これで動作するからいいかなと思ったのですが、まともに動かないブラウザーがあると困るので、ちゃんと

文字列 → 数値実体参照変換

してみました。今度はエラーなしになりました。これでテンプレートでも問題なく素敵なランダム表示が確認できました。

「数値実体参照変換」の変換するためのサイトは検索してもいいんですが私は『変換1』『変換2』などを良く利用しています。

「blogger」のHTML編集はページ毎のHTML編集とテンプレートのHTML編集では微妙に違うので注意が必要ですが、ついつい忘れてしまいます(笑)