友達は少ない方が良いんじゃない??

超カンタン!Amazonアソシエイトの広告に枠線をつけるカスタマイズをしてみた。

f:id:oshaberiitboy:20170903043151j:plain

 

どうも、おじゅんです。

 

当サイトはグーグルアドセンスだけではなく、Amazonアソシエイトという広告も貼り付けしております。

 

ご存知の方も多いのですが、要は通販サイトAmazonアフィリエイトサービスです。

 

おじゅんも今まで何度も、商品のリンクを貼り付けてきました。

が、正直テンプレートのまんまだとなんだか見た目が味気ない・・・^^;

 

というわけで、今回は別のサイトを参考にしてAmazonアソシエイトに枠線をつけてみました!

 

 

 

 

 

商品ページに枠線をカスタマイズしてみた

 

ここからの内容は、この記事を元に書いています。

 

www.furimuke.com

 

記事の中身を思いっきり端折って説明すると、Amazonのアフィリンクを貼るなら、amazletっていうツールを使うと良いよー。」という内容です。

 

そもそものamazletの使い方は上の記事を参考にしてもらうとして、早速枠線のコードを書いていきましょう。

 

ちなみに、テンプレートのamazletはこんな感じで表示されます。

 

f:id:oshaberiitboy:20170903041828j:plain

 

・・・まあ、可もなく不可もなくってリンクですね^^;

 

【カスタマイズ手順】

ダッシュボード → デザイン → カスタマイズ(スパナのアイコン) → デザインCSS 

 

デザインCSSに、以下のコードをコピペします。

 

/*アソシエイト
----------------------------------------------- */
.amazlet-box {
margin: 10px;
padding: 20px;
border: 1px #cccccc solid;
}

 

これだけで大丈夫です。

 

すると・・・

 

f:id:oshaberiitboy:20170903042013j:plain

 

わかりますか?

商品の外側に、枠線が追加されました!

 

たったこれだけでも、画面が引き締まって見えますね。

 

ではでは!今日はこの辺で!