Amazonアソシエイトなどの広告枠の自作の仕方。発行してもらった広告をカエレバ風にひとまとめにする方法

「Amazon」「楽天」「Yahoo!ショッピング」などの物販サイトではアフィリエイト広告を発行してもらえます。

しかしブログには別々に表示するわけにもいかず、ひとまとめにしたほうが見映えも広告感いいです。

そういった広告をつくるには「カエレバ」を利用すれば簡単ですが、諸々の理由で「自分のデザインの広告をつくりたい!」という人もいるでしょう。

カラーのボタンを使いたいなどと思う人のために、広告枠を自作する方法を紹介します。




私はこんな広告枠にしてます

私が自作した広告枠はこんな感じです。

構成としては「カエレバ」で発行してもらう広告枠と似ていますが、リンクボタンをカラーにする・枠線を追加するなどして記事中でもそれなりに目立つようにしています。

まあカエレバと比べると簡素な感じですが、人によってはもっと項目を追加したりと自己流の広告をつくることもできます。

追加するCSSやhtml文など

上記のデザインの広告枠をそのまま使いたいなら、こちらをコピペしてくれればOKです。

追加するCSSクラス

追加する広告枠用のCSSクラスは以下の通りになります。

プログラムに詳しくなくてもデザインを変えたい人用に、クラスの内訳も書いておきます。

.afi-waku{ /*広告の枠線のクラス*/
	border:1px solid #c4c4c4; /*1pxの一本線で水色の枠線を書く*/
	border-radius:5px; /*枠の角を丸くする*/
	width:90%; /*広告枠の幅をウィンドウの90%に*/
	margin:15px 0; /*枠線外の上下に15pxの余白をつくる*/
}
.afi-img{ /*広告画像のクラス*/
	float:left; /*画像を左に寄せる*/
	margin:10px; /*画僧の回りに10pxの余白をつくる*/
}
.afi-title{ /*広告タイトルのクラス*/
	margin:5px 10px 30px 10px; /*タイトル文章の回りの余白。上・右・下・左の順*/
	font-size:15px; /*文字のフォントサイズ*/
}
.afi-button{/*ボタンのクラス*/
        margin-top:8px;/*ボタン同士の距離*/
}
.afi-button a{ /*ボタンのリンクとしてのクラス*/
        display:inline-block; /*ボタンをインラインブロックに*/
	float:left; /*ボタンを左寄りに*/
	padding:5px 0px; /*ボタンの内側の余白(ボタンのサイズ設定)*/
	text-align:center; /*テキストを中心に*/
	font-size:13px; /*ボタンテキストのフォントサイズ*/
	background: linear-gradient(0deg, #f0f0f0, #fafafa);/*ボタン色をグラデーション処理*/
	font-weight:bold; /*テキストを太字に*/
	width:200px; /*ボタンの幅を200ピクセルに*/
	box-shadow:0 2px 0 #cccccc;/*ボタンに影をつける*/
}
.afi-amazon a{ /*アマゾンボタンのクラス*/
	color:#c9d61d; /*文字色を黄緑に*/
}
.afi-rakuten a{ /*楽天ボタンのクラス*/
	color:##c20004; /*文字色を赤に*/
}
.afi-yahoo a{ /*Yahoo!ショッピングボタンのクラス*/
	color:#1e73be; /*文字色を青に*/
}
.afi-clear{ /*広告の後の文章が正常に書かれるようにするリセットクラス*/
	clear:both; /*画像やボタンの左寄せを解除*/
}

プログラムの内訳はこんな具合になります。

これらのクラスを「style.css」などのCSSファイルに追加してくれれば、上記の広告デザインを使えるようになります。

ここには書いてませんが、注意したいのが「a:hover」という設定

「a:hover」はリンク先が設定されている文章にカーソルが乗ったときに作用するクラスタグで、使っているテーマ次第ではここが弄ってあることがあります。

例えばカーソルが乗ったらリンクテキストに下線が引かれたり、色が変わったり設定されていたりします。

大抵のテーマでは「a:hover」は全体で統一した設定になっていると思います。

そのため単に「.a:hover」で設定を変えてしまうと、広告に関係ない記事タイトルリンクなどにも設定が適応されてしまいます。

そうならないよう「.afi-botton」というクラス限定で変える必要があります

下線といった装飾をなくすには「text-decoration:none;」に、変化したテキストの色を指定したい場合は「color:rgba(255,255,255,1);」といった具合に色を設定してください。

「.~ a」はテキスト、あるいはボタンの領域にリンクを設定したい場合に使う基本htmlタグです。

こうしてaタグを使わないと「ボタン(色がついた部分)にカーソルが乗ってるのにクリックできない」なんてことになるので、ボタンを自作したい人は注意を。

ボタンを追加したい場合は、「.afi-amazon a」クラスの名称を「.~ボタン名~ a」とでもしたクラスを追加して、記事中に書くhtml文にボタン用のhtml文を追加してくれればOKです。

あと「.afi-clear」クラスの「clear:both;」は必ず書いておきましょう

これでfloat:leftなどで画像を寄せている場合、最後にclear:bothで解除しないと記事本文が影響を受けてしまいます。

html分の一番最後に書いておけば大丈夫なので忘れずに書いておきましょう。

記事中に書く広告html文

次は実際に広告枠を記事中に貼りつけるためのhtml文です。

これを記事中に貼りつけて、対応するアフィリエイト広告コードをそのまま入れてくれればOKです。

<div class="afi-waku"> /*広告の枠線*/
<div class="afi-img">商品画像コード</div> /*広告画像*/
<div class="afi-title">商品タイトルコード</div> /*広告の商品タイトル*/
<div class="afi-button afi-amazon ">amazonコード</div> /*各ボタン*/
<div class="afi-button afi-rakuten ">楽天コード</div>
<div class="afi-button afi-yahoo ">yahooコード</div>
<div class="afi-clear"></div> /*設定の解除*/
</div>

いちいち書くのは面倒だと思うので文章をタグとして登録できる「AddQuicktag」などのプラグインを使うと、楽に記事中に広告を載せれます。

文章中の「~コード」の部分は対応する広告コードを入れる場所になります。

「商品画像コード」は画像のみの広告コードを。

「商品タイトルコード」は商品のタイトルのみの広告コードを。

「amazonコード」などはそのアフィリエイト広告コードです。

発行してもらったタイトルのみの広告コードをそのままここに入れてもらえばOKです。

そうしたらコード内のテキスト部分を「Amazonで探す」みたいに変更しましょう。

いらないボタンがあったらその一行を消してくれればいいです。

ボタンを追加したい場合、例えば「7net」のボタンを入れたいなら「.afi-7net a」といったクラスを追加して

<div class="afi-button afi-7net ">7netコード</div>

といった文章を入れてくれればボタンが追加されます。

最後に

これでamazonなどの広告を入れる広告枠の自作の仕方の説明を終わります。

どのブログでも大抵は一定のデザインで使われていることが多いです。

しかし細部のデザインを変えたりボタンを追加したい場合、どうしても自分でCSSを弄る必要が出てきます。

プログラム初心者にはキツイと思いますが、広告枠をつくるだけでなくブログのデザインを変えるにもhtmlなどの知識は必要になってきます。

今後のためにもある程度は覚えて、自分のデザインで広告枠をつくってみましょう。