Someday Somewhere

A little something to say in my everyday life

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

f:id:tsukisai:20191113082401j:plain

もしもアフィリエイトのかんたんリンク

昨日の記事に書きましたが、カエレバの代わりにもしもアフィリエイトのかんたんリンクを使ってみることにしました。

ただ、デフォルトのリンクデザインは、Amazonや楽天といったショップのボタンの色が同じ色だったりして、いまいち。 カエレバ・ヨメレバのブログパーツのように、せめてショップごとに色を変えるとかできたらいいのに。

こんな時はやっぱり検索。 カスタマイズ方法を書いてくれているサイトさんがありました。

参考にしたサイトとコード

こちらのサイトさん(↓)にあるコードを使わせて頂きました。 neyney-blog.com

コードをcssに貼り付ければ出来上がりです。

/ ------------------------------------- /
/ かんたんリンク カスタマイズ /
/ ------------------------------------- /

/ --------- 外枠 --------- /
div.easyLink-box {
border:double #CCC !important; / 2重線 /
box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}

/ --- 商品リンク タイトル --- /
p.easyLink-info-name a {
color: #3296d2 !important; / 文字色 /
}

/ --------- ボタン色 --------- /
a.easyLink-info-btn-amazon {
background: #f6a306 !important; / 背景色 /
border: 2px solid #f6a306 !important; / 外枠 /
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); //
}

a.easyLink-info-btn-rakuten {
background: #cf4944 !important; / 背景色 /
border: 2px solid #cf4944 !important; / 外枠 /
box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); //
}

a.easyLink-info-btn-yahoo {
background: #51a7e8 !important; / 背景色 /
border: 2px solid #51a7e8 !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: #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; / 文字色 /
}

/ --- 最後のボタン下の空白を削除 --- /
div.easyLink-box div.easyLink-info p.easyLink-info-btn a:last-child {
margin-bottom: 0 !important;
}

/ --- PC以外の時の設定 --- /
@media screen and (max-width: 703px) {
div.easyLink-box div.easyLink-img, div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
max-height: 180px !important; / 商品画像の大きさを調整 /
}
}

ボタンの色などを変更することもできます。