はてなブログ「もしもアフィリエイトの『かんたんリンク』をカスタマイズ」

「もしもアフィリエイトの『かんたんリンク』をカスタマイズする」

もしもアフィリエイトには、Amazon、楽天市場、Yahooの商品リンクを１つのカード型にして表示できる「かんたんリンク」という機能があります。

今回は、はてなブログで表示される「かんたんリンク」をカスタマイズする方法を紹介します。

f:id:Florist87:20200710214144p:plain

かんたんリンクとは

Amazonや楽天市場、Yahoo!ショッピングのアフィリエイトをそのままブログに載せることができますが、もしもアフィリエイトでは、それらを一括して表示できる機能があります。
下のようなものですね。

リンク

自分はAmazonでしか買い物しないので、Amazonの商品リンクだけで十分というわけにはいきません。なぜなら、読者の中には楽天市場でしか買い物しないという人もいるからです。

そのため、複数のアフィリエイトを一括して表示できる方が、その商品を購入してもらえる確率が上がるのでやっておいた方がいいでしょう。

まだ、「もしもアフィリエイト」に登録していないという方は下のリンクから無料登録ができます。

もしもアフィリエイト

楽天市場とYahoo!ショッピングは登録後すぐ利用できますが、Amazonを使用するには審査が必要となります。（直接Amazonアソシエイトで審査を受けるよりは受かりやすいという話を聞きます。）

アフィリエイトに関しては以下の記事を参考にしてください。

さて、この便利なリンクですが、そのまま使ってももちろん大丈夫です。

ですが、ボタンが同じ色だったりで、少し味気ないなという方のためにカスタマイズ方法を紹介します。

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

「かんたんリンク」のCSSカスタマイズに関して、もしもアフィリエイト側は次のように述べています。

原則、CSSによるカスタマイズは推奨してはいないが、自己責任でカスタマイズしても特に違反とはならない。
CSSによるカスタマイズは、サポートの対象外となる。
今後の機能変更・修正によっては、独自のCSSは適用されなくなる可能性もある。

※CSSのカスタマイズをする際は、自己責任でお願いします。

普段はこのような感じですが、カーソルを例えばAmazonに合わせると、

f:id:Florist87:20200710220709j:plain

このように、Amazonの部分だけ白くなります。

f:id:Florist87:20200710220718j:plain

まず、下の灰色のボックスの中のCSSをすべてコピーしてください。

それを「デザイン」の「デザインCSS」に貼りつけて変更を保存すれば完了です。

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

/* --------- 外枠 --------- */
div.easyLink-box {
border:double #CCC !important; /* ２重線 */
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; /* 商品画像の大きさを調整 */
}
}