【blogger】もしもアフィリエイトのかんたんリンクをカスタマイズ

どうも、たまご（@tamago_5832）です。

以前からもしもアフィリエイトの「かんたんリンク」を使っていたのですが、ボタンが見づらくカスタマイズしたいな～と思っていました。

でもほとんどがwordpress仕様で、そのままだとbloggerではボタンリンクの文字が青色のままになってしまいます。

今回参考にさせていただいたサイトはこちら
もしもの「かんたんリンク」のボタンをカスタマイズ｜スマホ表示もあり

かんたんリンクのビフォーアフター

カスタマイズ前のかんたんリンクがこちら

文字色が青くてなんて書いてあるか読めません・・・

そして、カスタマイズした後がこちら

よく見るそれぞれのショッピングサイトに合わせたボタンの色になり、白い文字で見やすくなりました。

カスタマイズ後のかんたんリンクにカーソルを合わせると背景が白くなるようになっています。

実際にカーソルを当ててみてください。変化が出てクリックしたくなるようなボタンです。

参考にさせていただいた２つのサイト両方のデザインは気に入っていたのですが、この２つを合わせたらもっと最強なのに、、、

と思い２つのいいところを厳選してみました。

※ボタンの白い文字はコードを追加しています。

カスタマイズのコード

今回カスタマイズに使用したコードは以下の通りです。

コピーしてCSSに貼れば当ブログと同じデザインになります。

/*--------------------------------------
  かんたんリンク　カスタマイズ
--------------------------------------*/
.easyLink-box {
 margin: 0 0 1.5em!important;
        border:double #CCC !important; /* ２重線 */
}
.easyLink-info-btn {
 display: inline!important;
}
.easyLink-info-btn a{
 margin: 5px 10px 5px 0!important;
 padding: 0 12px!important;
    line-height: 35px!important;
 display: inline-block!important;
 width: 100%!important;
 box-shadow: 0 8px 15px -5px rgba(0, 0, 0, 0.25)!important;
 font-size: 1em!important;
}
.easyLink-info-btn-amazon{
 background:#ffb36b!important;
        color: #ffffff !important; /* 文字色 */
        border: 2px solid #ffb36b !important; /* 外枠 */

}
.easyLink-info-btn-rakuten{
 background:#ea7373!important;
        color: #ffffff !important; /* 文字色 */
        border: 2px solid #ea7373 !important; /* 外枠 */
}
.easyLink-info-btn-yahoo{
 background:#73c1ea!important;
        color: #ffffff !important; /* 文字色 */
        border: 2px solid #73c1ea !important; /* 外枠 */
}
.easyLink-info-btn a:before {
    font-family: "Font Awesome 5 Free";
    content: "f0da";
    padding-right: 3px;
}


/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
}

a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
}
@media screen and (max-width: 480px){
 div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
  width: 100%!important;
  position: relative;
 }
 .easyLink-info-btn a:before {
  padding-right: 5px;
  right: 5px;
  position: absolute;  
 }
}

同じデザインになったでしょうか？

まとめ

wordpressでしか気に入ったデザインにできないと半分諦めていましたが、bloggerでも気に入ったデザインにすることができました。

好きなデザインのカスタマイズを見つけたらぜひ試してみてください。

カスタマイズに凝りすぎると記事を書くのがおろそかになってしまうので要注意です。（まさに私。。。）

読みたくなったり書きたくなるサイトを目指して一緒に頑張っていきましょう。