カエレバの仕様が変更になり、Amazonから画像を取得していたのが、楽天から画像を取得するシステムになりました。
私はAmazonアフィリエイトがメインでこれまで商品紹介をしてきたので、かなり不便になりました。
紹介したい商品がAmazonしか売っていないモノ(Amazonデバイスなど)ならカエレバを使ってコードを作れなくなりかなりのダメージです。
なのでカエレバを使わなくても分かりやすい商品リンクデザインを生成できるカスタマイズを取り入れ、乗り換える事を決意しました。
この記事では
カエレバに頼らない商品リンクのカスタマイズについて紹介します。
カエレバの仕様変更内容
これまでカエレバでは、商品リンクに使用する画像をAmazonから取得する仕様で運営していました。
しかし、AmazonAPIに制限が設けられ今までの用に運営するのが難しくなったのが今回カエレバの仕様が変わった原因になります。
【【重要】カエレバ・ヨメレバは、国内ショッピングモールを応援するサービスへ生まれ変わります】
こちらの記事はカエレバを開発・提供しているかん吉さんからのお知らせ記事です。
かん吉さんもユーザーに影響が出ないように色々と考えてくれていましたが、今回の件は同じ仕様のまま維持することが難しく、楽天をメインにするという結論になっています。
仕様変更についてまとめると
・Amazonから取得していた画像が楽天から取得する様になる。
・仕様変更する前に生成した商品リンクは今後も機能するので、貼り替えなどの作業は不要。
・楽天をメインになっただけで、AmazonやYahooなどのショップも利用はできる
カスタマイズコードなどもこれまで使っているもので今後も利用出来ます。
カエレバ利用ユーザーが対策をすることは特に無いです。
しかし、私はAmazonが使いやすくAmazonしか販売していないモノを多く取り扱っているので、楽天から商品を探すのが使いにくくて不便です。
なのでどうにか対策をしないと今後に悪影響しかないと考え色々と方向性について考えました。
何パターンか考えた結果
・楽天をメインにする
・Amazonしかない商品は諦める
・カエレバに頼らないカスタマイズを取り入れる
・Amazon単体での商品紹介にシフトする
などが候補にあがりました。
最終的にたどり着いた答えは
「カエレバに頼らないカスタマイズを取り入れる」
です。
次にカエレバに頼らないカスタマイズについてお話します。
カエレバを使わない商品リンク
実は当ブログではすでにカエレバを使わない商品リンクを利用しています。
その商品リンクを使っているページはこちら
www.life-is-rpg.com
好きなジャンルのページを開いてみてください。
当ブログで紹介してきた商品を一括にまとめたページなのですが、このページに使っている商品リンクはカエレバを使っていません。
リンクボタンはAmazonのみ使っていますが、楽天やYahooなどのボタンも生成出来ます。
このデザインコードは色々と改造しているので、カエレバ風に戻すことは出来ません。
なので、カエレバを使わない商品リンクですが、他の商品リンクのカスタマイズを取り入れるしかありません。
そこで見つけたのが「カッテネ」という商品リンクカスタマイズです。
参考にさせていただいた記事
■追記■
今回私が使わせて頂いたカスタマイズは『Web Food』様製作のカスタマイズになります。
webfood.info
すごく助けられました！ありがとうございます。
また、この記事の投稿時では、コード製作者のリンクを貼り忘れておりました。
大変申し訳ありませんでした。
このカスタマイズは、はてなブログでもワードプレスでも使用できます。
ワードプレスでのご利用を考えている方は『Web Food』様の記事で詳しく解説されていますのでご参考にしてください。
※ご都合が悪ければ対応いたしますので、お手数ですが連絡お願いします。
カッテネリンクとは？
商品リンクの完成デザインは以下の画像です。
《PC表示》
《スマホ表示》
カエレバのように
「商品画像」「ショップボタン」「商品名」が記載できます。
カエレバと違うデザインは「商品説明」が入力できるところ。
この商品説明は自由テキストで、自分で好きな文章を記載することが出来ます。
商品リンクのデザインでいうとカエレバより分かりやすいリンクになりますね！
カッテネのカスタマイズの基本は
CSSコードで商品リンクデザインを記述し、HTMLコードを記事に直接埋め込み、コード内にリンクURLや商品名、説明文を手動で記述する形式になります。
毎回自分でコードを記述するという手間があるものの、慣れれば簡単で１分もかかりません。
自由度を考えると色々応用が出来ますよ。
カッテネリンクのカスタマイズコード
では、カッテネリンクのデザインを使うためのカスタマイズコードを紹介します。
カッテネの商品リンクはワードプレスでもその他のブログサービスでも利用出来ます。
私ははてなブログを利用しているので、今回ははてなブログでの設定方法を紹介していきます。
CSSコード
以下のコードを
｢ダッシュボード｣
↓
｢デザイン｣
↓
｢カスタマイズ｣
↓
｢デザインCSS｣
にコピペして下さい。
/* カッテネ */ .kattene { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; padding: 10px; margin-bottom: 1em; box-sizing: border-box; } .kattene__imgpart { text-align: center; } .kattene__imgpart img { -webkit-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); -o-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); -ms-box-shadow: 0px 5px 15px -5px rgba(0, 0, 0, 0.8); } .kattene__description { font-size: 0.8em; } .kattene__btns { width: 100%; margin-top: 1.2em; } .kattene__btns:after { display: block; clear: both; height: 0px; visibility: hidden; content: "."; } .kattene__btns > div { float: left; margin-bottom: 5px; } .kattene__btns .btn { width: 100%; padding-left: 0; padding-right: 0; } .kattene__btns.__three > div { width: 32.66667%; } .kattene__btns.__three > div:not(:last-child) { margin-right: 1%; } .kattene__btns.__two > div { width: 49.5%; } .kattene__btns.__two > div:nth-child(odd) { margin-right: 1%; } @media screen and (max-width: 900px) { .kattene__btns.__four > div { width: 49.5%; } .kattene__btns.__four > div:nth-child(odd) { margin-right: 1%; } .kattene__btns.__one > div { width: 50%; margin-left: 25%; } } @media screen and (min-width: 901px) { .kattene { display: table; width: 100%; } .kattene__imgpart { display: table-cell; width: 20%; } .kattene__infopart { display: table-cell; vertical-align: top; position: relative; padding-left: 10px; width: 80%; } .kattene__btns { position: absolute; bottom: 0; box-sizing: border-box; padding-right: 10px; } .kattene__btns.__four > div { width: 24.25%; } .kattene__btns.__four > div:not(:last-child) { margin-right: 1%; } .kattene__btns.__two > div { width: 49.5%; } .kattene__btns.__two > div:not(:last-child) { margin-right: 1%; } .kattene__btns.__one > div { width: 49.5%; float: right; } } .btn { appearance: none; background-color: #54c0d1; border: 0; border-radius: 0; color: #fff; cursor: pointer; display: inline-block; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size: 1em; -webkit-font-smoothing: antialiased; font-weight: 600; line-height: 1; padding: 0.75em 1.5em; text-decoration: none; transition: background-color 150ms ease; user-select: none; vertical-align: middle; white-space: nowrap; } .btn:hover, .btn:focus { background-color: #439aa7; color: #fff; } .btn:disabled { cursor: not-allowed; opacity: 0.5; } .btn:disabled:hover { background-color: #54c0d1; } .btn.__small { padding: 0.55em; font-size: 0.9em; } .btn.__orange { background-color: #FF9901; -webkit-box-shadow: 0 5px 0 #cc7a01; -moz-box-shadow: 0 5px 0 #cc7a01; box-shadow: 0 5px 0 #cc7a01; -o-box-shadow: 0 5px 0 #cc7a01; -ms-box-shadow: 0 5px 0 #cc7a01; margin-bottom: 5px; border-radius: 3px; text-align: center; } .btn.__orange:hover { background-color: #cc7a01; } .btn.__orange i { font-weight: bold; } .btn.__orange i:before { vertical-align: middle; font-size: 1.2em; margin-right: 0.2em; } .btn.__blue { background-color: #007dcd; -webkit-box-shadow: 0 5px 0 #0064a4; -moz-box-shadow: 0 5px 0 #0064a4; box-shadow: 0 5px 0 #0064a4; -o-box-shadow: 0 5px 0 #0064a4; -ms-box-shadow: 0 5px 0 #0064a4; margin-bottom: 5px; border-radius: 3px; text-align: center; } .btn.__blue:hover { background-color: #0064a4; } .btn.__blue i { font-weight: bold; } .btn.__blue i:before { vertical-align: middle; font-size: 1.2em; margin-right: 0.2em; } .btn.__red { background-color: #c20004; -webkit-box-shadow: 0 5px 0 #9b0003; -moz-box-shadow: 0 5px 0 #9b0003; box-shadow: 0 5px 0 #9b0003; -o-box-shadow: 0 5px 0 #9b0003; -ms-box-shadow: 0 5px 0 #9b0003; margin-bottom: 5px; border-radius: 3px; text-align: center; } .btn.__red:hover { background-color: #9b0003; } .btn.__red i { font-weight: bold; } .btn.__red i:before { vertical-align: middle; font-size: 1.2em; margin-right: 0.2em; } .btn.__green { background-color: #0BBD80; -webkit-box-shadow: 0 5px 0 #099766; -moz-box-shadow: 0 5px 0 #099766; box-shadow: 0 5px 0 #099766; -o-box-shadow: 0 5px 0 #099766; -ms-box-shadow: 0 5px 0 #099766; margin-bottom: 5px; border-radius: 3px; text-align: center; } .btn.__green:hover { background-color: #099766; } .btn.__green i { font-weight: bold; } .btn.__green i:before { vertical-align: middle; font-size: 1.2em; margin-right: 0.2em; } /* カッテネここまで*/
コピペが出来たらたら｢保存する｣をクリックしてCSSは完了です。
HTMLコード
次にHTMLです。
HTMLコードはカッテネ商品リンクを使いたい記事内に以下の直接貼り付けます。
<div class="kattene"> <div class="kattene__imgpart"><a target="_blank" href="【メインのURL】"><img src="【画像URL】"></a></div> <div class="kattene__infopart"> <div class="kattene__title"><a target="_blank" href="【メインのURL】">【タイトル】</a></div> <div class="kattene__description">【説明】</div> <div class="kattene__btns __four"> <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div> <div><a class="btn __red" target="_blank" href="【商品のURL】">楽天</a></div> <div><a class="btn __blue" target="_blank" href="【商品のURL】">Yahoo!</a></div> <div><a class="btn __green" target="_blank" href="【商品のURL】">楽天Kobo</a></div> </div> </div> </div>
このHTMLコード内の記述する部分を説明します。
■【メインのURL】■
商品名や画像をクリックした際に開くページになります。
クリックされる確率が高くなるので、自分が力を入れたいアフィリエイトリンクを記述してください。
■【画像URL】■
カエレバ同様ショッピングモールから画像を取得します。
このシステムでカエレバを使うのをやめたので私の場合はアマゾンから画像を取得します。
Amazonアフィリエイトには、本家と直接提携するパターンか、ASP経由で提携するパターンがありますが、私は後者のASP（もしもアフィリエイト）経由でAmazonアフィリエイトを行っているので、今回はもしもアフィリエイトでの画像取得方法を説明します。
《①》まず、もしもアフィリエイトのページを開き、提携しているプロモーションからAmazonをみつけ、『商品リンク』という項目をクリックします。
《②》次のページで商品を検索します。
《③》目的の商品の「商品リンクを作る」ボタンを押します。
《④》【種別】を「画像」にし、【画像サイズ】を「中（160px×160px以内）」に設定します。
《⑤》商品の画像の上で右クリックをし、「画像アドレスをコピー（Windowsの場合）」を選択します。
《⑥》コピーした画像アドレスがコード内でいう【画像URL】にあたるので、ペーストします。
■【タイトル】■
商品の名前を記述してください。
■【説明】■
自由テキストなので、メーカーや著者、出版社や出版年月日などの情報を記述すればいいです。
■【商品のURL】■
各ボタンに好きなアフィリエイトリンクを記述してください。
また、コード内の【商品のURL】の右側にはAmazon・楽天・Yahoo!・楽天Koboと記載していますが、これらがボタンの表示テキスト部分になります。
上記のコードでは、Amazon～楽天Koboと記述していますが、自由にテキストなので変更して自分の好みのショップでカスタマイズしてください。
毎回手動で商品リンクを記述する形になるので、上記のHTMLコードはExcelやWordなどにコピペして保存しておくと、いちいちこの記事からコードをコピーする手間が省けますよ。
私の場合で言うと、Excelにコードを保存し、使いたい時にExcelからコピペして商品リンクを生成しています。
カスタマイズに関して初心者の方は、こちらで詳しいコードの記述方法を紹介しています。
www.life-is-rpg.com
リンクボタンの数
上記のHTMLコードでは、４つのショップリンクボタンが表示されます。
しかし、紹介したい商品によっては「4つもリンクボタンがいらない！」という場合もあるでしょう。
そこで、ショップリンクボタンが3つ・2つ・1つの場合のコードも載せておきます。
■ショップボタンが３つのコード■
<div class="kattene"> <div class="kattene__imgpart"><a target="_blank" href="【メインのURL】"><img src="【画像URL】"></a></div> <div class="kattene__infopart"> <div class="kattene__title"><a target="_blank" href="【メインのURL】">【タイトル】</a></div> <div class="kattene__description">【説明】</div> <div class="kattene__btns __three"> <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div> <div><a class="btn __red" target="_blank" href="【商品のURL】">楽天</a></div> <div><a class="btn __blue" target="_blank" href="【商品のURL】">Yahoo!</a></div> </div> </div> </div>
■ショップボタンが２つのコード■
<div class="kattene"> <div class="kattene__imgpart"><a target="_blank" href="【メインのURL】"><img src="【画像URL】"></a></div> <div class="kattene__infopart"> <div class="kattene__title"><a target="_blank" href="【メインのURL】">【タイトル】</a></div> <div class="kattene__description">【説明】</div> <div class="kattene__btns __two"> <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div> <div><a class="btn __red" target="_blank" href="【商品のURL】">楽天</a></div> </div> </div> </div>
■ショップボタンが１つのコード■
<div class="kattene"> <div class="kattene__imgpart"><a target="_blank" href="【メインのURL】"><img src="【画像URL】"></a></div> <div class="kattene__infopart"> <div class="kattene__title"><a target="_blank" href="【メインのURL】">【タイトル】</a></div> <div class="kattene__description">【説明】</div> <div class="kattene__btns __one"> <div><a class="btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div> </div> </div> </div>
作業ポイントは
①シンプルに不要なショップボタンのコードを削除する。
②コード６行目の
<div class="kattene__btns __four">
の最後の単語を
・４つのボタンの場合→「__four」
・３つのボタンの場合→「__three」
・２つのボタンの場合→「__two」
・１つのボタンの場合→「__one」
と変更することです。
カエレバを使わない商品リンク まとめ
今回はカエレバの画像取得システムがAmazonから楽天に変更してしまったことから、私的に使いにくくなったということで、カエレバリンクを使用しない商品リンクに乗り換えたというお話でした。
カエレバリンクは1度アフィリエイトIDを保存しておくと、次回からリンクコードを自動生成してくれるので、初心者の方にとっても使いやすいツールでした。
ただAmazonアフィリエイトをメインに行うユーザーにとってはこのシステム変更は使いにくく、凄いストレスです。
カッテネリンクは自分で商品ページURLや画像URLを記述するというデメリット(手間)があります。
その代わり自分で好きなボタンに出来たり、説明文を入れることができるメリットがあります。
今回の件で同じ様にAmazonアフィリエイトをメインで運営している方の中には困っている人も多いと思います。
このカスタマイズで、これまで通りAmazonメインで続けることが出来るので、助けになったら幸いです。
応用も色々出来るので、ぜひ活用してみて下さい。
