WordPress

【カードリンク】デザイン比較(Rinker/もしもアフェリエイト)

Amazon、楽天市場、YahooやKindleなどでRinkerのカードリンクを使っているブロガーさんは多いと思います。「もしもアフェリエイト」でも同じようなリンクが作れます。デザインを比べてみました。

はじめに

現在の私の審査状況は下記の通りです。

✖️ Amazonアソシエイト
○ もしもアフェリエイトのAmazon

 そして、カードリンクを記事内に入れているのですが、「もしもアフェリエイト」で十分じゃないかな?むしろシンプルで好きだなと思っています。デザインを比較しました。みなさんはどちらがお好みでしょうか。

サンプル

ボタンの色を同じに設定して比べています。

もしもアフェリエイト(簡単リンク)

デザイン
  • それぞれの色を変更可
  • 商品の説明を変更可

色や商品説明が簡単に変更できます。

※PC版で3ボタンが横に並ばないか今確認中

Rinker(カードリンク作成プラグイン)

created by Rinker
¥2,980 (2021/10/27 00:33:35時点 楽天市場調べ-詳細)
デザイン設定は3つ
  • デザインなし
  • ノーマル
  • スタイルアップ
デザイン
  • 値段を出すかどうかの選択可。
  • 一回使った商品リンクを別のページでも使える。
  • タイトル、ボタン名変更が簡単にできる。

色など変更するにはCSSを変更する必要があります。

CSS

/*** Rinker設定 ***/
div.yyi-rinker-contents {/*外枠*/
border: none;/*枠線削除*/
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.18);/*影プラス*/
}
div.yyi-rinker-image {/*画像エリア*/
margin-right: 15px;/*外側の右に余白*/
}
.yyi-rinker-img-m .yyi-rinker-image {/*画像*/
width: 140px;/*幅*/
min-width: 140px;/*最大の幅*/
}
div.yyi-rinker-contents div.yyi-rinker-info {/*文字やボタン全体の設定*/
width: calc(100% - 160px);/*横幅*/
}
div.yyi-rinker-contents div.yyi-rinker-title p {/*タイトルの文字*/
margin: 0;/*いらない外側の余白を削除*/
}
div.yyi-rinker-contents div.yyi-rinker-title a {/*タイトルのリンク*/
color: #626262;/*文字の色*/
font-size: .9em;/*文字の大きさ*/
}
div.yyi-rinker-contents div.yyi-rinker-title a:hover {/*タイトルをマウスホバー*/
color: #c45500;/*変化する色*/
opacity: 1;/*透明度はそのままに*/
text-decoration: underline;/*下線*/
}
div.yyi-rinker-contents div.yyi-rinker-detail {/*クレジットやメーカー、価格部分*/
padding: 0;/*内側の余白を削除*/
margin: 5px 0 0;/*外側の上に余白*/
font-size: 10px;/*文字の大きさ*/
color: #626262;/*文字の色*/
opacity: .7;/*透明度70%*/
font-family: 'Avenir',sans-serif;/*フォントの種類*/
line-height: 2;/*文字の高さ*/
}
span.price {/*価格部分*/
font-size: 1.8em;/*文字の大きさ*/
}
.price-box span:nth-child(n+2) {/*価格の後ろの文字*/
display: none;/*なし*/
}
div.yyi-rinker-contents ul.yyi-rinker-links {/*ボタン全体*/
margin: 0;/*外枠リセット*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン共通部分*/
margin: 8px 8px 0 0;/*外側に上と左に余白*/
box-shadow: none;/*影を削除*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*ボタン個別*/
background: none;/*背景を削除*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタンのリンク共通部分*/
font-weight: 500;/*文字の太さ*/
font-size: 13px;/*文字の大きさ*/
height: 44px;/*ボタンの高さ*/
line-height: 44px;/*文字の高さ*/
padding: 0 15px;/*内側の左右に余白*/
border-radius: 3px;/*ちょこっと丸みを加える*/
color: #ffffff;/*文字の色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {/*Amazonのボタンリンク*/
background: #ffcf0f;/*背景色追加*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a {/*楽天のボタンリンク*/
background: #fb0018;/*背景色追加*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a {/*ヤフーショッピングのボタンリンク*/
background: #0054ff;/*背景色追加*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {/*マウスホバーしたとき*/
box-shadow: none;/*影をリセット*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {/*マウスホバーしたとき(リンク)*/
opacity: 1;/*透明度はそのまま*/
-webkit-transform: translateY(3px);/*下に動く(予備)*/
transform: translateY(3px);/*下に動く*/
}
@media screen and (max-width: 800px){/*タブレット~スマホの設定*/
div.yyi-rinker-contents div.yyi-rinker-box {/*リンカー全体*/
display: block;/*縦並びに*/
text-align: center;/*中央揃えに*/
}
div.yyi-rinker-contents div.yyi-rinker-image {/*画像エリア*/
margin: auto;/*中央揃えに*/
}
div.yyi-rinker-contents div.yyi-rinker-info {/*文字やボタン部分*/
display: block;/*縦並びに*/
margin-top: 5px;/*外側上に余白*/
width: 100%;/*横幅*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン共通*/
margin: 5px 0;/*外側の上下に余白*/
box-shadow: none;/*影は無し*/
border-radius: 3px;/*角に優しさを加える*/
}}
@media (max-width: 420px) and (min-width: 321px){/*スマホ用*/
body div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタン*/
padding: 0;/*内側の余白をリセット*/
}}
/*** Rinker終了***/

色を変更しています。参考サイト⬇️

比較

どうですか?

それぞれの好みによると思いますが、どちらもあまり変わりないように思います。

 冒頭でも申し上げましたが、Amazonアソシエイトは合格していないのでRinkerのAmazonはもしもアフェリエイトの優先設定をAmazonに設定して出しています。

作者

Amazonアソシエイトが通らないんです!悲しいです!

もしかしたら3つも登録してるからかもしれませんが、審査の内容も教えてもらえないのでわかりません。

もしもアフェリエイト簡単リンク

Rinkerの設定が難しい方や、「もしも」だけAmazonが通っている方は、「もしもアフェリエイトの簡単リンク」を試してみてください。まずは登録して、Amazon、楽天、Yahooそれぞれ連携申請します。Amazonは審査が必要ですが、楽天とYahooはすぐ使えます。

作成方法

もしもの方は、作り方は簡単です。

後は商品を選ぶだけです。

まとめ

一応私はどちらも使っていますが、「もしも」だけでも十分かなと思っています。Rikerの設定は難しいので、やりたい方は、沢山説明しているリンクがありますので検索してください。

後日

Amazonアソシエイト通りましたー!

ABOUT ME
ロッティ
おはよう!日々勉強しています。 Webサイト作らない?楽しいよ?
関連