フラミンGO

その時々で興味のあることや気になったことを徒然なるままに書き綴るブログ

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

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

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

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

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; /* 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; /* 商品画像の大きさを調整 */
}
}

 

f:id:Florist87:20200710221738j:plain

変更を保存するのをお忘れなく

 

これで、かんたんリンクからの商品のHTMLソースをブログのHTML編集に貼りつけるだけで、カスタマイズが反映されたデザインで表示されるようになります。

 今回のカスタマイズ方法は以下のサイトから参考にさせていただきました。

もしもアフィリエイトの『かんたんリンク』をCSSカスタマイズ!【2選】 - ネイネイの喜怒哀楽

本気でブログを始める人におすすめしたい本

初心者向きです

 

 どういう記事を書けばいいか、収益化するためにはどうすればいいかが分かりやすく説明されています。

 

 ブログの収益化をめざすなら必読書です。