アフィリエイト広告をコンテンツ風に見せる

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

ポータルサイトでもよく見られる、画像とテキストを組み合わせた広告枠をつくってみました。自分で考えたショートコピーを配置できて、広告枠をコンテンツ風な体裁で見せるところがミソです。

現在は、右サイドバーの「お気に入りブログ」の下に配置しています。

コンテンツ風の体裁で

右の画像が、広告枠部分の表示イメージです。サイドバーの各メニューと同じデザインで、いかにもコンテンツ風に見えることがご確認いただけると思います。

メニュータイトルは、「記事中で紹介したソフトウェア」としていますが、この部分は自由に変更できます。画像とリンク設定されたテキストが、それぞれアフィリエイト商品へのリンクで、「その気になった時が、買い時！」というタイトルテキストは、私がつくったコピーです。テキストリンクが短い場合は、それをタイトル部分にもってくることで、やや長めのテキストコピーを添えることができるようになります。

ワイドサイドメニューの幅は300ピクセルですので、使える画像は、幅120ピクセル程度までがよいと思います。幅120ピクセル×高さ60ピクセルの画像を使用することを前提につくりましたが、右の画像程度の大きさ（幅80ピクセル×高さ80ピクセル）でもきれいに表示されていると思います。

簡単設置方法

サイドバーのメニューをそれぞれ別画像で表示するようにするなどのカスタマイズをしていなければ、お手軽に設置することができます。フリープラグインを、ワイドサイドメニューのほうに配置して使うことが前提になります。

設置方法は簡単です。まず、下記のソースコードを、CSSに追加しておきます。


/* ------------	.clearfix	----------------- */
.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* ----------- 画像＋テキスト形式広告の枠設定 ---------- */
.custumad li .ad_ttl {
	font-weight: bold;
}
.custumad li .ad_img {
	float:left;
	padding-right: 5px;
}
.custumad li .ad_txt {
	line-height: 140%;
}
/* ----------- 画像＋テキスト形式広告の枠設定終わり ---------- */

次に、アフィリエイトサイトから、商品画像とテキストのリンクを取得します。画像のサイズは、横幅120ピクセル以下で見栄えがよくなります。

下記が、広告枠部分のソースコードです。コンテンツ風に見せるために、メニュー名付きパーツのソースコードを利用しています。ですので、特にデザインの設定をしなくても、それぞれの方が設定されているデザインが適用されます。


<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>
<!-- ここまでで1つの単位 -->
</ul>
</div>
</div>
</div>

途中で文字が切れていますが、コピー＆ペーストすれば問題なく利用できます。

黄色い文字の部分を編集すれば準備完了です。

テキストリンクの文字量が少なければ【タイトル文字】の部分に配置し、【商品説明コピー】を自分で考えます。各アフィリエイトサービスの規約違反にならないようにご配慮ください。

逆にテキストリンク文字が多ければ、【商品説明コピー】のほうに配置し、タイトルを検討します。

複数の広告を配置したい場合は、～の間のソースをコピーして、その下にペーストすれば、どんどん数を増やしていけます。

以上で準備は完了です。「フリープラグイン」に準備したソースコードを貼り付け、サイドバーに配置したら完了です。

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

アフィリエイト広告をコンテンツ風に見せる

コンテンツ風の体裁で

簡単設置方法