広告枠の自作の仕方。広告をひとまとめで表示する方法
「Amazon」「楽天」「Yahoo!ショッピング」などの物販サイトではアフィリエイト広告を発行してもらえます。
しかし別々に表示するわけにもいかず、ひとまとめにしたほうが見映えも良いです。
そういった広告を作るには「カエレバ」を利用すれば簡単ですが、諸々の理由で「自分のデザインの広告をつくりたい！」という人もいるでしょう。
カラーのボタンを使いたいなどと思う人のために、広告枠を自作する方法を紹介します。
こんな広告枠
私が自作した広告枠はこんな感じです。
構成としては「カエレバ」で発行してもらう広告枠と似ていますが、リンクボタンをカラーにする・枠線を追加するなどして記事中でもそれなりに目立つようにしています。
まあカエレバと比べると簡素な感じですが、人によってはもっと項目を追加したりと自己流の広告を作ることもできます。
追加するCSSやhtml文など
上記のデザインの広告枠をそのまま使いたいなら、こちらをコピペしてくれればOKです。
追加するCSSクラス
追加する広告枠用のCSSクラスは以下の通りになります。
プログラムに詳しくなくてもデザインを変えたい人用に、クラスの内訳も書いておきます。
.afi-waku{ /*広告の枠線のクラス*/
border:3px double #e0e0e0; /*1pxの一本線で水色の枠線を書く*/
border-radius:5px; /*枠の角を丸くする*/
width:100%; /*広告枠の幅を全幅に*/
margin:25px 0; /*枠外の上下に25pxの余白をつくる*/
padding:20px;/*枠内の上下に20pxの余白をつくる*/
}
.afi-img{ /*広告画像のクラス*/
float:left; /*画像を左に寄せる*/
margin:20px 10px 10px 0px; /*画像の回りに余白をつくる*/
}
.afi-title{ /*広告タイトルのクラス*/
margin:0px 0px 20px 0px; /*タイトル文章の回りの余白*/
font-size:15px; /*文字のフォントサイズ*/
}
.afi-button{/*ボタンのクラス*/
float:left;/*ボタンを左寄りに*/
margin:0px 4px 4px 0px;/*ボタン同士の距離*/
}
.afi-button a{ /*ボタンのリンクとしてのクラス*/
display:inline-block; /*ボタンをインラインブロックに*/
padding:5px 0px; /*ボタンの内側の余白（ボタンのサイズ設定）*/
text-align:center; /*テキストを中心に*/
font-size:13px; /*ボタンテキストのフォントサイズ*/
background: linear-gradient(0deg, #f0f0f0, #fafafa);/*ボタン色をグラデーション処理*/
font-weight:bold; /*テキストを太字に*/
width:170px; /*ボタンの幅を170ピクセルに*/
text-decoration:none;/*リンクテキスト下の線を非表示に*/
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などの知識は必要になってきます。
今後のためにもある程度は覚えて、自分のデザインで広告枠を作ってみましょう。