Amazonアソシエイトが通らないと、RinkerでProduct Advertising APIから「アクセスキーID」と「シークレットキー」の入力ができません。したがって、RinkerでAmazonの商品検索ができません。
▶︎本記事の内容
- もしもアフィリエイトのかんたんリンクの使い方
- もしもアフィリエイトのかんたんリンクのカスタマイズ
に分けてお話ししていきたいと思います。
DTMer/音楽ブロガーの私が、もしもアフィリエイトのかんたんリンクの使い方についてお話ししていきたいと思います。
★もしもアフィリエイト
他のASPをご利用になりたい方はこちらをどうぞ。
もしもアフィリエイトのかんたんリンクの使い方
まずは、公式サイトに飛びましょう。
こちらのトップページでアカウントの作成をして下さい。
会員登録を済ませてない方はこちらから登録を済ませて下さい。
それでは、もしもアフィリエイトのかんたんリンクの使い方の手順を解説していきます。
かんたんリンクの使い方の手順
それでは、順を追って解説していきたいと思います。
操作自体はシンプルですので、すぐに覚えられると思います。
手順① トップページにあるかんたんリンクのボタンをクリック
真ん中にある「楽天市場・Amazon.co.jpかんたんリンク」のボタンをクリックします。
手順② 商品を検索する
「商品販売ページのURL、またはキーワードを入力してください」の検索窓に商品名などを入れます。
PC用とスマホ用で表示の仕方が変わる点に注意しましょう。
「HTMLソース(サイト掲載用)」に出てくるコードを、ブログやサイトに貼り付けます。
この時、「HTMLソースを1行にする(WordPress対応)」にチェックを入れると、コードが1行で表示されるようになるので見やすくなると思います。
特に理由がない場合は、この欄にチェックを入れておきましょう。
「設定」では、画像の表示サイズを変えることができます。
「小(商品画像:160×160px)」「大(商品画像:240×240px)」のどちらかを選択できます。
PCでもスマホでも、商品画像が大きく表示されるのに越したことはないので、こちらも特別な理由がない限りは「大」を選択しておきましょう。
かんたんリンクの使い方の手順【例】
では、実際に商品を検索してリンクを貼って見ましょう。
ここでは「レコードプレイヤー」を例にとって見ます。
検索窓に「レコードプレイヤー」と打ち込むと、検索結果が現れます。
この中から好きな商品をピックアップします。
PC表示だとこのようになります。
右、左の三角ボタンで閲覧できる画像を変えられます。
「HTMLソースを1行にする(WordPress対応)」をクリックすると、このようにコードがひと塊になります。
ブログ上で確認するときに、分かりやすくなるでしょう。
もしもアフィリエイトのかんたんリンクのカスタマイズ
これで、ブログやサイトにもしもアフィリエイトのかんたんリンクを設置できたと思います。
ここから先は、ひとそれぞれになるのですが、このデフォルトの表示。なんかイマイチだと思いませんか?
デザインがイマイチだと思った方は、かんたんリンクをカスタマイズしましょう。
「幸福な人生とはなんだろう。」のアキさんのブログを参考にさせて頂きました。
以下、wordpressでの設定方法となります。
- 外観→テーマエディター:「style.css」を編集
- 外観→カスタマイズ→追加CSS:追加CSSを編集
いずれかを選択して、コードをコピペして下さい。
/********************************
もしもかんたんリンク
*********************************/
/*====================== box */
div.easyLink-box{
margin: 0 auto !important;
padding: 1em 1.5em !important;
background-color: #fafafa!important;
border:none!important;
border-radius: 2px;
box-sizing: border-box;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
height:auto;
font-family:’Lucida Grande’,’Hiragino Kaku Gothic ProN’,Helvetica, Meiryo, sans-serif;
line-height: 1.5;
max-height:none!important;
width:100%;
max-width:630px!important;
}
@media screen and (max-width: 703px){
div.easyLink-box {
text-align:center;
max-height:none!important;
padding: 10px!important;
}}
@media screen and (max-width: 620px){
div.easyLink-box{
display:block!important;
}
}
/*====================== name */
div.easyLink-box div.easyLink-info p.easyLink-info-name{
text-align:center;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
color: #545454!important;
text-decoration: none;
transition: 0.3s ;
}
div.easyLink-box div.easyLink-info p.easyLink-info-name a:hover {
color:#FFCA28!important; /* テキストリンクカラー(マウスオーバー時) */
text-decoration: none !important;
}@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
}
}
@media screen and (max-width: 480px){
div.easyLink-box div.easyLink-info p.easyLink-info-name a {
font-size:14px;
}
}
/*=========================================================================== image */
@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-img p.easyLink-img-box {
align-items: start!important;
}}div.easyLink-img{
height: 200px!important;
}
.easyLink-img-box {
height: 200px!important;
}
.easyLink-img-box span > img {
max-height: 200px!important;
}
@media screen and (min-width:481px) and (max-width: 620px){
div.easyLink-box div.easyLink-img{
margin-right: 0px!important;
display:inline-block!important;
}
div.easyLink-box div.easyLink-img p.easyLink-img-box {
display:inline-block!important;
}
}
div.easyLink-box div.easyLink-img a.easyLink-arrow-left img, div.easyLink-box div.easyLink-img a.easyLink-arrow-right img {/*左右矢印の影非表示*/
box-shadow:none;
}
/*====================== btn */
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
transition: 0.4s ease-out!important;
padding:.3em 0!important;
border-radius: 20px!important;
}@media screen and (min-width: 704px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .5em!important;
justify-content: center!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin: .5em 0 0 0 !important;
padding: 8px 0!important;
border-radius: 20px!important;
width:65%!important;
}
}div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-amazon {background: #ff9901;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-amazon:hover{background: #FEBD69;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-rakuten {background: rgb(191,0,0);}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-rakuten:hover{background: #FA5858;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-yahoo {background: #FF0033;}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a.easyLink-info-btn-yahoo:hover{background: #F7819F;}@media screen and (max-width: 703px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn {
margin-top: .2em!important;
}
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin-top: .5em!important;
margin-bottom: 0!important;
padding: 8px 0!important;
border-radius: 20px!important;
width:65%!important;
}
}
@media screen and (max-width: 620px){
div.easyLink-box div.easyLink-info p.easyLink-info-btn a {
display: inline-block!important;
margin-top: .3em!important;
padding: 8px 0!important;
border-radius: 20px!important;
width:85%!important;
}
}
p.easyLink-info-model{/*モデル非表示*/
display:none;
}
完成すると、以下のような画像表示になります。
いかがでしょう。
デフォルトよりは見た目がオシャレになったと思います。
「幸福な人生とはなんだろう。」のアキさんのブログには、他にも色々なカスタマイズ方法が載っているので参考になさって下さい。
ユーザーの声
もしもアフィリエイトのかんたんリンクの使い方:まとめ
いかがでしたか。
POINT
- もしもアフィリエイトのかんたんリンクの使い方
- もしもアフィリエイトのかんたんリンクのカスタマイズ
もしもアフィリエイトのかんたんリンクの使い方、わかっていただけましたでしょうか。
Amazonアソシエイトの審査がかなり厳しくなってきているので、審査に通らない方、もしもアフィリエイト経由でリンク作成してみてはいかがでしょうか。
★もしもアフィリエイト
他のASPをご利用になりたい方はこちらをどうぞ。