はてなブログで「もしもアフィリエイト」のカスタマイズをする方法（かんたんリンクのカスタマイズ）

現在、WordpressでAmazonと楽天のアフィリエイトをする場合には「Rinker」というブログパーツが使われています。しかし、はてなブログでは使えません。そこでもしもアフィリエイトのかんたんリンクをカスタマイズすることで、良い感じのブログパーツにしていきましょう。

はてなブログでデザインCSSをカスタマイズする

はてなブログでデザインCSSをカスタマイズします。

スパナのマークの「設定」タブをクリックすると「デザインCSS」という項目があります。

ここにCSSを書き込めば、テーマに上書きして適用してくれます。

はてなブログのテーマはリンクの色を変えたりしがちなので「青」にして、リストの大きさが小さかったのでちょっと大きくしたりしています。

はてなブログでもしもアフィリエイトをカスタマイズする

では、もしもアフィリエイトのかんたんリンクをカスタマイズするCSSです。

最近はYahoo!ショッピングでの売上も無視できなくなったので、Amazonのボタン（a.easyLink-info-btn-amazon）と楽天のボタン（a.easyLink-info-btn-rakuten）に加えて、Yahoo!ショッピングのボタン（a.easyLink-info-btn-yahoo）もカスタマイズしています。

/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
    color: #3296d2 !important; /* 文字色 */
}
/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
    background: #fff !important;
    border: 2px solid #f6a306 !important;
    color: #f6a306 !important;
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25);
}

a.easyLink-info-btn-rakuten {
    background: #fff !important; 
    border: 2px solid #cf4944 !important;
    color: #cf4944 !important;
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25);
}
a.easyLink-info-btn-yahoo {
    background: #fff !important;
    border: 2px solid #51a7e8 !important;
    color: #51a7e8 !important;
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25);
}
/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important;
    background: #f6a306 !important;
    color: #fff !important;
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25);
}
a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important;
    background: #cf4944 !important;
    color: #fff !important;
}
a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important;
    background: #51a7e8 !important;
    color: #fff !important;
}

これをさきほどのデザインCSSの部分にペーストして保存すれば、もしもアフィリエイトのリンクがこんな感じになります。

リンク

最近はYahoo!ショッピングの利用者が増えて売上があがりやすくなっています。もしもアフィリエイトのかんたんリンクならYahoo!ショッピングのボタンも作れるので、ユーザーを逃すことなく商品を紹介することができます。

はてなブログで「もしもアフィリエイト」を使うと、単純に売上を増やすことができるので、使わない理由ってないと思います。すぐにでも登録しておくことをおすすめします。