カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ

カエレバやヨメレバは、1商品についていろんなASPのアフィリエイトリンクを表示させることができ、素晴らしいアイディアだと思いました。ですが、評判の割に、実際に使ってみると結構難しい。なので、もっと簡単に使えるカッテネというものを作りました。

  1. カエレバ・ヨメレバのいまいちな点
  2. カッテネとは?
    1. ボタンが1つの時
    2. ボタンが2つの時
    3. ボタンが3つの時
    4. ボタンが4つの時
    5. ボタンが5つの時
  3. カッテネの使い方
    1. WordPressの場合
    2. WordPress以外の場合
  4. カッテネで報酬を爆上げする裏ワザ
  5. 公式Amazonアソシエイトが使えなくなる前に
  6. 売切れURLのメンテを不要にする裏ワザ
  7. さいごに

カエレバ・ヨメレバのいまいちな点

検索しても、商品が出てこなかったり、HTML貼っても表示されなかったり、カスタマイズが難しかったりします。

ASPもアマゾン、楽天、もしも、Yahoo!などと限定されているのもいまいちです。

どんなASPやショッピングサイトでも、リンク先にできるべきです。

最も釈然としないのは、貼ったパーツ1つ1つから下のように「posted with カエレバ」とカエレバのサイトにリンクされてしまうことです。

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ

カエレバやヨメレバだけでなく、私が見た同種のツールは全てこのようなリンクが挿入されてしまうものでした。

もしかしたらカスタマイズで消せるのかもしれませんが、初期設定でこれが挿入されてしまうのは非常に不親切です。

というのは、このパーツを目にするのは、あなたのサイトの読者さんです。

読者さんが興味があるのは、あなたの記事とあなたが紹介する商品です。

カエレバのようなブログパーツには1ミリも興味がありません。

このような無駄なリンクがあるのは、全くユーザーフレンドリーではありません。

Amazonへのリンクをクリックしようとして、間違ってカエレバへのリンクをクリックしてしまった場合、読者さんはイラっとしてあなたのサイトを閉じてしまう恐れさえあります。

おそらくカエレバ・ヨメレバ製作者の方は、多くのリンクを集めることでSEO上の効果を狙っているのだと思います。無料で提供しているツールなんだから、ある程度見返りが欲しいということだと思いますが、一つ一つのパーツにまで挿入するのは欲張りと言われても仕方ないと思います。

カッテネにはこのようなリンクはありません。

もし、あなたのサイト運営にお役に立てたなら、気が向いた時に一度でも、サイト運営初心者の方に向けてカッテネを紹介する記事を書いて頂いたり、SNSでシェア頂けるだけで、大変ありがたいと思います。

カッテネとは?

こんな感じのものです。カエレバやヨメレバのように、一つの商品に対して、複数のASPやショッピングサイトのリンクを貼ることができます。

スマホで見てもいい感じになるので、ご覧になってください。

現状ボタンが5つまで対応しています。それぞれどんなデザインになるかご紹介しますね。ここでは書籍の例しかありませんが、その他の商品でも全然大丈夫です。ボタンのラベルも好きなものに変えられます。

ボタンが1つの時

PCで見た場合

カッテネ ボタン1つ PC

スマホで見た場合

カッテネ ボタン1つ スマホ

ボタンが2つの時

PCで見た場合

カッテネ ボタン2つ PC

スマホで見た場合

カッテネ ボタン2つ スマホ

ボタンが3つの時

PCで見た場合

カッテネ ボタン3つ PC

スマホで見た場合

カッテネ ボタン3つ スマホ

ボタンが4つの時

PCで見た場合

カッテネ ボタン4つ PC

スマホで見た場合

カッテネ ボタン4つ スマホ

ボタンが5つの時

PCで見た場合

カッテネ ボタン5つ PC

スマホで見た場合

カッテネ ボタン5つ スマホ

こんな感じで、ボタンの数と、PCかスマホかによってよしなにボタンをレイアウトしてくれます。あと、やっぱり目立つボタンの方が押してもらいやすいです。

カッテネの使い方

カッテネは非常に簡単に導入できますが、カエレバやヨメレバのようにWEBサイトで検索して、HTMLを生成するというものではありません。

商品のURL、商品タイトル、画像のURLなどはご自身でそれぞれのASPから取得してくる必要があります。とはいえ、カエレバやヨメレバは、検索してもなぜか商品がヒットしなかったり、ASPに限りがあったりするので、実はご自身でそれらの情報を持ってこれた方が安心感があります。

カエレバやヨメレバのようなWEBサイトに依存しないので、自由にカスタマイズできます。

具体的に使い方を見ていきましょう。

WordPressの場合

WordPressではプラグインで、とても簡単にカッテネを使うことができます。

カッテネをダウンロードする

zipファイルがダウンロードできたら、Wordpressの管理画面のプラグインの新規追加から、「プラグインのアップロード」からアップロードし、有効化してください。これで設定完了です。

投稿する際は以下のように、囲むタイプのショートコードを使います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
[kattene]
{
"image": "【画像URL】",
"title": "【タイトル】",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【メインのURL】",
"label": "Amazon",
"main": "true"
},
{
"color": "blue",
"url": "【商品のURL】",
"label": "Kindle"
},
{
"color": "red",
"url": "【商品のURL】",
"label": "楽天"
},
{
"color": "green",
"url": "【商品のURL】",
"label": "楽天Kobo"
},
{
"color": "pink",
"url": "【商品のURL】",
"label": "audiobook"
}
]
}
[/kattene]

画像URL

PCだと左側に表示される画像のURLに置き換えて下さい。おすすめはリンク切れが起きにくいAmazonの画像を使うことです。

下のように、Amazonアソシエイトの商品リンクを作成する画面で、「画像のみ」タブにて、サイズを「中」にし、右側に表示された画像を右クリックし、「イメージのアドレスをコピー」をクリックすれば、URLがコピーできます。(これはMacの場合です。Windowsの場合は「画像アドレスをコピー」だったかな。)

Amazonで商品画像のアドレスを取得

これを先ほどのHTML内の【画像URL】の部分に貼り付けてもらえればOKです。

タイトル

商品名を入れてください。

説明

ここは自由ですが、書籍であれば、著者、出版社、出版年月日。モノであれば、メーカーの名前や発売日などを入れるのがいいかと思います。

商品のURL

こちらにはあなたのお好きなASPなどのアフィリエイトリンクを貼り付けてください。「Amazon」とか「楽天」とか書いている部分はボタンのラベルですので、お好きなものに変えてOKです。

メインのURL

タイトルや画像をクリックすると開くURLになります。なので、複数のASPの中でも、特に開いてほしいURLをここに入れておくと良いかと思います。"main": "true"というのがついている「商品のURL」が「メインのURL」となります。これは複数あるボタンのうち1つにつけてください。

ボタンの色について

現状、orangeblueredgreenpinkの5色のみです。

ボタンの数について

上の例では、ボタンが最大の5つある形になっていますが、もちろん1〜4つに減らすことができます。その際は、不要なボタンの部分を削除してください。

JSONというデータ形式を採用

ショートコードの囲まれている部分はJSONというデータの書き方に準じています。

【輪講】JSONの書き方

きちんとJSONに準じていないと動かないのでご注意ください。

動かない原因になりやすいのが、最後の要素の後ろにもカンマをいれてしまうことです。

WEB上でJSONの書き方が適切かチェックする以下のようなツールもあるので、動かない場合はご利用ください。

JSONLint - The JSON Validator

以下は私のサイトで動いたコードです。サンプルとして載せておきます。これを貼り付けて動いたらこれをご自身のものに修正していくのがいいと思います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
[kattene]
{
"image": "https://images-fe.ssl-images-amazon.com/images/I/51a55eJudnL._SL160_.jpg",
"title": "伝え方が9割",
"description": "佐々木 圭一 (著)",
"sites": [
{
"color": "orange",
"url": "//af.moshimo.com/af/c/click?a_id=809067&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2F4478017212%2F",
"label": "Amazon",
"main": "true"
},
{
"color": "blue",
"url": "//af.moshimo.com/af/c/click?a_id=809067&p_id=170&pc_id=185&pl_id=4062&url=https%3A%2F%2Fwww.amazon.co.jp%2Fdp%2FB00BHCM7HE%2F",
"label": "Kindle"
},
{
"color": "red",
"url": "https://hb.afl.rakuten.co.jp/hgc/1062343b.e9c0e007.1062343c.bb804ff1/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Fbook%2F12171241%2F&m=i%2F16270527%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoiZG93biIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjB9",
"label": "楽天"
},
{
"color": "green",
"url": "https://hb.afl.rakuten.co.jp/hgc/14533bcb.091c5389.14533bcc.56f4d083/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F7d01c99d766e357f842e11172e03c8f4%2F&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F11619415%2F&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIxMjh4MTI4IiwibmFtIjoxLCJuYW1wIjoiZG93biIsImNvbSI6MSwiY29tcCI6ImRvd24iLCJwcmljZSI6MSwiYm9yIjoxLCJjb2wiOjB9",
"label": "楽天Kobo"
},
{
"color": "pink",
"url": "https://audiobook.jp/product/162149",
"label": "audiobook"
}
]
}
[/kattene]

正常に動かない場合

上記のチェックツールで問題がなくても、WordPressの編集画面でこのコードを作成すると、時々動かないことがあるようです。

WordPressの編集画面の「ビジュアル」モードと「テキスト」モードがありますが、このコードを貼り付けてから行き来するとコードがおかしくなることがあるようです。自分の場合は基本的にビジュアルモードの時に貼り付けていますが、人によっては「テキスト」モードだと正常に動くという人もいるようです。お使いのWordPressのエディターの状態によるようです。

要は、書式の情報を含めて貼り付けてしまうとうまく動きません。

そういう時は、メモ帳などのプレーンなテキストを編集できるエディターで一度コードを完成させてからWordPressの編集画面に貼り付けてみてください。また、ブラウザのメニューの[編集]>[ペーストしてスタイルを合わせる]で貼り付けるとうまくいく場合もあるようです。(うまくいかないこともあるみたいです)

カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ

お使いの環境にもよるので、最初に適切に動かなくても、いろいろ試してみて頂ければと思います。

Shortcoderと組合わせて使い回しまくる

Shortcoderは、頻繁に利用するコードに名前をつけて登録し、ショートコードとして呼び出して利用できるWordPressプラグインです。

色んな記事から同じ特定の商品のカッテネを使いたい場合、カッテネの長いショートコードを貼り付けずに、Shortcoderの短いショートコードを書くだけで済みます。

また、もし多くの記事に貼ってあるカッテネを一部変更したい場合、全ての記事のカッテネを修正するのではなく、登録したコードを修正しさえすれば、そのカッテネ全てに反映してくれます。

例えば、次のようなショートコードになります。

1
[sc name="padrone"]

Shortcoderを知るまでは、同じ目的のプラグインTinyMCE Templatesを使っていました。しかし、名前をつけることができず、下のようにWordpressが自動で採番する番号で呼び出す形になります。

1
[template id="1183"]

番号より名前の方が、ぱっと見で何のコードが思い出しやすいし、別のサイトでも同じショートコードを使えるので便利です。なので、今はShortcoderをお奨めしています。次の記事がわかりやすいです。

Shortcoder – 頻繁に利用するコードを使い回せるWordPressプラグイン

WordPress以外の場合

WordPress以外の場合は、設定も投稿時の書き方もアナログな感じになります。

CSSの編集

まず、以下をクリックするとカッテネのCSSファイルが開きます。内容を全てコピーし、あなたのサイトのCSSファイル(style.cssなど)に追記してください。

カッテネのCSSファイル

HTMLの作成

下のHTMLをテンプレートにして、ご自身が紹介したい商品に合わせて修正してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 __five">
        <div><a class="kattene__btn __orange" target="_blank" href="【商品のURL】">Amazon</a></div>
        <div><a class="kattene__btn __blue" target="_blank" href="【商品のURL】">Kindle</a></div>
        <div><a class="kattene__btn __red" target="_blank" href="【商品のURL】">楽天</a></div>
        <div><a class="kattene__btn __green" target="_blank" href="【商品のURL】">楽天Kobo</a></div>
        <div><a class="kattene__btn __pink" target="_blank" href="【商品のURL】">audiobook</a></div>
      </div>
    </div>
</div>

無料ブログなどをご利用の場合、エディター画面で不要なタグ(<br>など)が挿入されてしまう場合があるので気をつけてください。

修正するそれぞれの部分についてご説明します。

メインのURL

タイトルや画像をクリックすると開くURLになります。なので、複数のASPの中でも、特に開いてほしいURLをここに入れておくと良いかと思います。

画像URL

PCだと左側に表示される画像のURLです。おすすめはリンク切れが起きにくいAmazonの画像を使うことです。

下のように、Amazonアソシエイトの商品リンクを作成する画面で、「画像のみ」タブにて、サイズを「中」にし、右側に表示された画像を右クリックし、「イメージのアドレスをコピー」をクリックすれば、URLがコピーできます。(これはMacの場合です。Windowsの場合は「画像アドレスをコピー」だったかな。)

Amazonで商品画像のアドレスを取得

これを先ほどのHTML内の【画像URL】の部分に貼り付けてもらえればOKです。

タイトル

商品名を入れてください。

説明

ここは自由ですが、書籍であれば、著者、出版社、出版年月日。モノであれば、メーカーの名前や発売日などを入れるのがいいかと思います。

商品のURL

こちらにはあなたのお好きなASPなどのアフィリエイトリンクを貼り付けてください。HTML内の、「Amazon」とか「楽天ブックス」とか書いている部分はボタンのラベルですので、お好きなものに変えてOKです。

ボタンの色について

上のHTML内の7〜11行目のaタグのクラスに__orange__blueとあるのがお分かりになりますか?こちらを変えることで色を変えることができます。現状、__orange__blue__red__green__pinkの5色のみです。

ボタンの数について

上のHTMLでは、ボタンが最大の5つある形になっていますが、もちろん1〜4つに減らすことができます。その際は、不要なボタンの部分を削除してください。それぞれのボタンのaタグを囲んでいるdivタグごと削除します。

数を変えた場合、忘れてはいけない作業が一つあります。

上のHTMLの6行目の修正です。

1
    <div class="kattene__btns __five">

この部分の__fiveというのを、数に応じて変えてください。

ボタンが1つなら__one、2つなら__two、3つなら__three、4つなら__four、5つなら__fiveとなります。

以上でHTMLの作成も完了です。記事内の好きな部分に貼り付けてください。また、URLにミスがないか実際にクリックして確認しておきましょう。

カッテネで報酬を爆上げする裏ワザ

カッテネで特定の商品を紹介するだけで満足するのではなく、関連して様々な報酬を得る方法を紹介します。

Kindle本体を買ってもらう

カッテネでKindle版の電子書籍を紹介するなら、ついでにKindle本体も紹介しちゃいましょう。このように関連商品を紹介する販売手法をクロスセルと言います。

Kindle本は売れても100〜200円の報酬ですが、Kindle本体は基本的にAmazonの1商品あたりの最大報酬である1,000円になります。売れる頻度は多くはないですが、積み重なると結構大きなお金になりますね。

まだKindleを持っていないなら、紹介するために一度ご自身でも買ってみてもいいかもしれません。おすすめは次のKindle Paperwhiteです。

私なりのレビューが下です。参考にしてみてください。

Kindle Unlimitedに登録してもらう

もしカッテネで紹介する書籍が、Kindle Unlimitedの対象であれば、登録すれば無料で読めますよ、とおすすめするのも有効です。月額980円ですが、初月は無料なので比較的登録してもらいやすいです。登録さえしてもらえれば初月で解約したとしても報酬500円が発生します。私もレビューを書いてみたのでご覧ください。

Amazon Primeに登録してもらう

実はKindle Unlimitedでなくても通常のAmazon Prime会員になっていれば、Prime ReadingというKindleの読み放題サービスが使えます。Kindle Unlimitedよりラインナップは少ないのですが、人気の最新刊などが対象になっていたりとコスパはとてもいいです。

これを紹介することで、Amazon Prime会員登録の報酬500円も狙えます。

Prime Readingの説明やKindle Unlimitedとの詳しい違いは、次の記事で説明しています。

オーディオブック版を紹介する

カッテネで書籍を紹介するなら、同作品のオーディオブックを紹介するのも有効です。

最近スキマ時間を有効活用するために、移動時間などに耳から読書する人が増えています。オーディオブックで最も有力なサービスが audiobook.jpです。次の記事で詳しくレビューしています。

下のようにカッテネのボタンの1つにaudiobook.jpの対象作品のページにリンクを設定します。

audiobook.jpはA8.net経由でアフィリエイトすることができます。商品リンクを作れるので、各作品ページに直接リンクできます。

⇒A8.net無料登録はこちら

次の記事の最後の方で、カッテネの後にKindle本体、Kindle Unlimited、audiobook.jpの紹介を入れているので参考にしてみてください。

iPhoneやMacをアフィリエイトする

もしiPhoneやMacを使っているなら、体験レビュー記事を書いて紹介すべきです。Apple製品もアフィリエイトで報酬を得ることができます。金額が大きいので、売れれば報酬も大きいです。

Appleの製品は、Apple Online Storeはもちろん、Amazonや楽天などでも売っているので、カッテネが有効になってきます。

なぜかアフィリエイターでしっかりApple製品を紹介している人は少なく意外と穴場です。Apple Online Storeのアフィリエイトプログラムの申請方法などを下で説明しています。

レビュー記事のイメージとしては次のようなものです。

SIMフリーiPhoneXSレビュー!MAXとどっち?5Sから移行!

私もMacBook Proを買った際に次の記事を書きました。

公式Amazonアソシエイトが使えなくなる前に

Amazon公式のアフィリエイトプログラム、Amazonアソシエイトは最近非常に審査が厳しくなっています。審査に通りにくかったり、通っても途中でアカウント停止されるケースが多く報告されています。

そのような場合、他のASP経由でAmazonの商品を紹介できます。

というか、途中で停止されてしまうと、公式のURLを他のASP経由のURLに差し替える作業が発生してしまうので、停止される前に早めに他のASP経由にしておくのがおすすめです。

私はもしもアフィリエイトを使っています。A8ではできない売れた商品名の確認ができるし、料率も一番高いからです。詳しくは以下の記事をご覧ください。

売切れURLのメンテを不要にする裏ワザ

Amazonや楽天の商品で、しばらくすると売り切れてしまうことってありますよね。そうすると、売り切れていないページのURLに差し替えるのが非常に面倒です。

そこで、売り切れやすい商品の場合は、検索結果のURLをリンク先に設定するのがおすすめです。そうすれば、常に購入可能な一覧が表示されます。もちろん検索結果経由で購入されてもきちんと報酬になります。

例えば、次のiPhone XSのAmazonと楽天のリンクは検索結果をリンク先に設定しています。

さいごに

いかがでしたでしょうか?

すごくシンプルな作りなので、簡単に導入できるのでは、と思います。

なお、もしうまく表示できない方は、問い合わせフォームから遠慮なく連絡ください。できる限りサポートさせていただきます。

また、こうして欲しいなどの要望も、頂ければ助かります。