HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」 と考える方々に分かりやすい解説記事を書きたいと思っています。
当記事は、以前書いた「アフィリエイト広告をコンテンツ風に見せる 」という記事の改訂版記事です。
執筆当時はまだ提携アフィリエイト会社が少なかったので様々な広告を掲載することができませんでしたが、ひと通り提携が完了して、現在、右の画像のような形で利用しています。少し見栄えも調整しまいたので、再掲載することにしました。
コンバージョン獲得なら「画像＋テキスト」形式
実は当形式、バナーやテキスト広告枠より、コンバージョン率を上げるのに向いている広告枠なんです。画像でアイキャッチができて、少ない文字数ながらもテキストでその補足ができるという広告形式によるところもありますが、広告枠をコンテンツ風に見せているという特長が最大の武器です。
とはいえそれは、mixiやMSNやYahoo!なんかをはじめとしたポータルサイトでのお話。似たような形状をした記事が同じページ内にあるんですよね。ですので、個人ブログではその効果はまた違ってくるかも知れません。きわめて低い成果しかあがっていない当ブログでは、数字の検証のしようがないのが残念です（爆）。
ともあれ、単に与えられたソースコードを貼り付けるだけでは満足できない、掲載広告に自分なりの気持ちを一緒に込めたい方にはオススメします。
記事部分のソースコード
記事部分のソースコードは下記の通りです。
<div class="skinMenu"><div class="skinMenu2"><div class="skinMenuHeader">
<span class="skinMenuTitle">［メニュータイトル］</span>
</div>
<div class="skinMenuBody">
<ul class="skinSubList clearfix custumad">
<li><p class="ad_ttl">［上部タイトル文字］</p>
<p class="ad_img">［画像］</p>
<p class="ad_txt">［説明文］</p>
</li>
</ul></div></div></div>この広告枠の特徴は、アメブロで設定したサイドバーの各メニューデザインと同様のデザインが適用されるという点です。そのために、たとえば「最新の記事」などの他のメニューと同様のHTML構造になっています。ですので、後にタイトル部分や枠のCSSをカスタマイズして体裁を変えれば、自動的にこの枠にもそのデザインが適用されます。
赤い文字の<li>～</li>がひとつの広告の単位です。複数掲載したい場合は、この部分のその数分コピー＆ペーストして、黄色い文字の部分を編集します。
各黄色い文字の部分について説明します。
- ［メニュータイトル］
- 当サイトの掲載画像で、「知っ得の≪収入源情報！≫」となっている部分です。当広告枠の精神に則って（笑）、有益な情報提供をしたい！という思いのたけを、タイトルに込めてください！
- ［上部タイトル文字］
- 画像とその右側のテキスト文字の上の広告タイトルです。各アフィリエイト会社のテキストリンク広告を主に使うとよいと思います。ただ、あまりいいテキストはないと思いますので、自由に編集できるテキストリンクがあれば、それがいちばんよいと思います。
- ［画像］
- 各アフィリエイトから発行された、画像のリンクコードを貼り付けます。
<--～-->のコメント部分については文字数節約のために、私は削除しています。 - ［説明文］
- ここで、アフィリエイターの思いの丈を込めてください！。画像のサイズや高さに応じて、使える文字数は変わってきますので、適宜調整してください。
記事部分のソースコードをどこで利用するか？
上記のソースコードをどこに貼り付けて利用するかについては、各個人によって状況が違ってくると思います。選択肢は「フリースペース」か「フリープラグイン」。私の掲載例では、バリューコマースのアフィリエイトを掲載していますので、フリープラグインを使用せざるを得ない状況です。フリースペースは文字数制限が全角5000文字と多いので、おそらく私もゆくゆくは、バリューコマースの広告掲載を見送ってでも、フリースペースを使用するのではないかと思います。
だってフリープラグインエリアって、半角3800文字がMAXなんですよね。この文字数、あっという間ですから。
フリースペースでは、JavaScriptやiframeをはじめとして使えないタグがあるんですよね。まぁ、ともあれ、使えないタグを使っていないアフィリエイト会社の広告を使用して、「フリーエリア」に掲載することを推奨させていただきます。
掲載については、各アフィリエイト会社の規定に反しない範囲でしてくださいね。私は問題ないつもりですが、当記事に基づいて行動された責任は一切取れませんので、自己責任でお願いしますm(__)m
CSSの設定
CSSの設定部分は下記の通りです。初心者の方は、そのままCSSファイルの最後に貼り付けていただければよいと思います。分かる方は、clearfixについては適宜省略・調整してください。
/* ■.clearfix■ */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* ■freeプラグインの設定■ */
/* W120×H60サイズ画像＋テキスト形式広告の枠設定 */
.custumad li .ad_ttl {
margin: 5px 0 3px 0;
font-weight: bold;
}
.custumad li .ad_img {
float:left;
padding-right: 5px;
}
.custumad li .ad_txt {
line-height: 140%;
font-size: 95%;
}
私、この広告枠については、こだわっていきたいんですよね。説明分の文字色とか、hoverの設定とかもしてみたら面白いと思うんですが、状況を見ながら、いろいろやっていきたいと思っています。