カエレバを使うと利益の一部が取られてしまう上に、Amazonの検索ができなくなったと聞きます。そうなってくるとアフィリエイトパーツの第一候補は「もしもアフィリエイト」ではないでしょうか。しかしちょっとブログパーツのデザインが味気ないのでカスタマイズする方法をお伝えします。
はてなブログでデザインCSSをカスタマイズする
「 なぜはてなブログを使うのか」
それは安くてカスタマイズもできるからで、CSSももちろん書き換えることができます。
ブログのダッシュボードで「デザイン」をクリックします。
スパナのマークの「設定」タブをクリックすると「デザインCSS」という項目があります。
ここにCSSを書き込めば、テーマに上書きして適用してくれます。
はてなブログのテーマはリンクの色を変えたりしがちなので「青」にして、リストの大きさが小さかったのでちょっと大きくしたりしています。
はてなブログでもしもアフィリエイトをカスタマイズする
もしもアフィリエイトのリンクをカスタマイズするにはこちらのブログを参考にさせていただきました。
そのままではズレが発生したのでコードを削ったりして調整しています。
/* --- 商品リンク タイトル --- */
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:hover.easyLink-info-btn-amazon {
opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
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; /* 透明度(1.0=不透明 0.0=完全透明) */
background: #cf4944 !important; /* 背景色 */
color: #fff !important; /* 文字色 */
}
これをサクッとさきほどのデザインCSSの部分にペーストして保存すれば、もしもアフィリエイトのリンクがこんな感じになります。
リンク
もうこれで「もしもアフィリエイト」を使わない理由ってないのでは？
と思ってしまいますが、参考にしてみてください。