2分でできる「カッテネ」の簡単な使い方！複数のアフィリエイトリンクを並べて表示可能！【無料】
本日は便利なアフィリエイトツール「カッテネ 」の簡単な使い方を紹介します。
慣れれば2分ほどでカッテネのリンクを作成できるようになります。
カッテネとは
アフィリエイトをする上で、amazonや楽天のアフィリエイト広告を同時に掲載できると非常に便利ですよね。
それを可能にするツールとして「カエレバ」や「ヨメレバ」があります。
カエレバやヨメレバも使い勝手が良いのですが、「カッテネ 」がその上をいく使いやすいツールとなっています。
カッテネは下記サイトの作成者さん(tai_tantanさん）が作成されました。
カッテネとカエレバの具体的な違いは２つあります。
１つ目はカスタマイズ性が高いことです。
公式HPからのアフィリエイトを組み込むこともできます。
2つ目は、アフィリエイトリンクに一行分「カエレバ」等のリンクが掲載されるか否かという点です。これの何が良いのかというと、アフィリエイトリンクの塊を作成することができる点です。
画像、商品名、各ショッピングサイトアイコン、全てのリンクがアフィリエイトに直結することになります。これにより機会損失を減らすことができます。
このカッテネの長所は上記の通り優秀ですが、短所はどこか気になってきます。
完成したカッテネに短所はないのですが、言ってしまうと作成に手間がかかる点です。
ブログやツイートを見ると、この欠点を理由にカッテネの利用を検討したけどやめてしまったような人もそこそこいるようです。私もカッテネを使用してみて、最初は使い方が複雑で難しい印象を持ちました。上記サイトを参考に作成していましたが、もう少し簡単に作成できないものかと思ったのも事実です。
カッテネは優秀なアフィリエイトツールです。この欠点を少しでも解消することができれば、さらに使い勝手の良い強い味方になってくれるのではないかと考えました。
その結果、以下の使い方がスムーズにリンクを作成できるのではないかと思いましたので、その方法を紹介しようと思います。
タグ
カッテネのCSSタグは下記サイトさんが用意してくれているので、これを自分のブログのデザインCSSにコピペして保存しておきます。
こちらもカッテネ 作成者さん(tai_tantanさん）のサイトとなります。
https://raw.githubusercontent.com/tarky/kattene/master/style.css
そして、記事内に設置するhtmlタグは以下の通りです。
こちらもカッテネ作成者さんのサイトに掲載されているものとなります。
これにより5つのアフィリエイトリンクをまとめることができます。
<div class="kattene">
<div class="kattene__imgpart"><a target="_blank" rel="noopener" href="【メインのURL①】"><img src="【画像URL】"></a></div>
<div class="kattene__infopart">
<div class="kattene__title"><a target="_blank" rel="noopener" href="【メインのURL②】">【商品名】</a></div>
<div class="kattene__description">【商品説明（なくても良い）】</div>
<div class="kattene__btns __five">
<div><a class="kattene__btn __orange" target="_blank" rel="noopener" href="【Amazon商品のURL】">Amazon</a></div>
<div><a class="kattene__btn __blue" target="_blank" rel="noopener" href="【Kindle商品のURL】">Kindle</a></div>
<div><a class="kattene__btn __red" target="_blank" rel="noopener" href="【楽天商品のURL】">楽天</a></div>
<div><a class="kattene__btn __green" target="_blank" rel="noopener" href="【楽天Kobo商品のURL】">楽天Kobo</a></div>
<div><a class="kattene__btn __pink" target="_blank" rel="noopener" href="【audiobook商品のURL】">audiobook</a></div>
</div>
</div>
</div>
簡単に説明しておきます。
メインURL①は一番買って欲しいアフィリエイトリンクで、画像をクリックした場合に開かれるサイトです。
画像リンクは表示される画像のリンクです。リンク切れ（リンクが消えると表示されなくなる）を防ぐためにAmazonのものを使用すると良いです。
メインURL②は上のアフィリエイトリンクと同じで大丈夫です。商品名をクリックした場合に開かれるサイトになります。
商品名には商品名を入力します、メーカー名や性能をわかりやすく入力しておくとクリックされやすくなります。
商品説明が不要な場合は、商品説明の行のhtmlタグを消しましょう。
fiveはカッテネに掲載するアフィリエイトリンクの数に英語で変えましょう。
例えばamazonと楽天の２つをカッテネで掲載する場合は２つなのでtwoに変えます。
その際、残りの３つ、使用しないhtmlタグの<div>から</div>までを消しておきましょう。
後は、楽天やAmazonの各ショッピングサイトのアフィリエイトリンクのURLを入れていくだけです。
方法
カッテネの作成で最も手間となるのが、複数のアフィリエイトリンクをコピペする必要があることです。その点を解決するために複数コピー可能なアプリを使います。
使用するのは「Clipy」です。インストール方法は過去記事をご参照ください。
①まず、サイトに上記CSSタグを入れておき、Clipyのスニペットに上記htmlタグを登録しておきます。（※重要）最初は【 】内の説明も登録しておいて、慣れてきてから外すことをおすすめします。
今回は、購入されやすいAmazonと楽天のリンクを簡単に獲得して短時間でカッテネを設定してみます。 アンダーライン部分が行うこととなっています。
そのため、次のhtmlタグ（Amazonと楽天を表示するもの）をClipyのスニペットに登録します。
上記タグのAudiobook、楽天Kobo、Kindleの３つを消して、fiveをtwoに変えたタグです。
私は商品説明も省くことが多いです。
小さくて見やすいアフィリエイトリンクの塊を作ることを意識しているためです。
<div class="kattene">
<div class="kattene__imgpart"><a target="_blank" rel="noopener" href="【メインのURL①】"><img src="【画像URL】"></a></div>
<div class="kattene__infopart">
<div class="kattene__title"><a target="_blank" rel="noopener" href="【メインのURL②】">【商品名】</a></div>
<div class="kattene__description">【商品説明（なくても良い）】</div>
<div class="kattene__btns __two">
<div><a class="kattene__btn __orange" target="_blank" rel="noopener" href="【Amazon商品のURL】">Amazon</a></div>
<br>
<div><a class="kattene__btn __red" target="_blank" rel="noopener" href="【楽天商品のURL】">楽天</a></div>
</div>
</div>
</div>
これをhtml編集に貼り付けると、下記画像のように表示されます。今回はスマホユーザーの縦スクロールに合わせて、縦に並んでいますが、横に並べることも可能です。
②次にAmazonサイトを開きます。
現在Amazonはアソシエイト（アフィリエイト ）を可能にするために180日間で３件以上の売り上げを獲得することが条件となっています。
そのトライアル申請をアソシエイトセントラルで行うことにより、アソシエイトツールバーを使用することができるようになります。（この時点で３件の成果は不要です）
これはAmazonにアクセスすると上部分にツールバーとして表示され、簡単に見ている商品のアフィリエイト リンクを作成することができるツールです。
今回はこれを使用していきます。
②アフィリエイトを作成したい商品をAmazonで検索します。
そして検索一覧画面でアソシエイトツールバーから「テキスト」を選択します。
通常URLを選択します。
すると表示されるURLが長くなりますので、これを「⌘キー ＋ C」でショートカットコピーします。
これでアフィリエイトリンクをクリックすると検索後の一覧が表示されるようになります。もちろんアフィリエイトの効果もあるため、購入が行われると収益が発生します。
③画像リンクが欲しいので、検索した後の多くの商品が表示されている画面で使用したい画像を決定します、Macの場合は長押しで「イメージのアドレスをコピー」を選択します。 Windowsの場合は右クリックで行うことができます。
楽天市場にもツールバーがあります、楽天ウェブ検索をインストールしてエクステンションで使用可能になります。ですが、残念なことにSafariには対応していないため使いたい場合はGoogle ChromeやFire Foxで使用することになります。 そちらを使用する場合は楽天アフィリエイトではなく楽天市場を開きます。
⑤楽天アフィリエイトの検索欄でAmazonで検索した商品と同じものを検索します。上記方法だとAmazonでは検索結果がアフィリエイトリンクのクリックで開かれるのに対して、楽天アフィリエイトを使用する場合はいずれかのサイトの商品が表示されます。安くてお得なものを選ぶと購入してもらえやすいです。検索語の画面で 「商品リンク」をクリックします。
商品リンクページでは、「 リンクのみ」を選択します。
この時、左側のプレビューに表示されるアドレスではなく、下部分に表示されるアドレスを使用します。設置されているコピーボタンをクリックするだけで事足ります。
⑥ブログの記事編集画面に貼り付けます。
カッテネを設置したい位置を決めてカーソルを持ってきます。
ここでClipyをショートカットで起動します。（デフォルト「shift + ⌘ + v」）
スニペットからカッテネ のhtmlタグを貼り付けます。
⑦ htmlタグにClipyの履歴を埋め込んでいきます。
メインのURL①とメインのURL②にはAmazonのコピーしたリンクを貼り付けます。楽天だと個別店舗なのでリンク消失の可能性が高いためAmazonが推奨されます。
画像URLはAmazonでコピーした画像リンクを貼り付けます。
商品名を手入力します。必要でしたら商品説明を入力します。
Amazonリンクには上で使用したメインのURL①②と同じものを貼り付けます。
楽天リンクには楽天アフィリエイトでコピーしたURLを貼り付けます。
上の方のhtmlタグを使用している場合は、今回はAmazonと楽天の２つなので、fiveをtwoに変更します。使用しなかった「Kindle商品のURL」「楽天Kobo商品のURL」「Audiobook商品のURL」を一行（<div>〜</div>で一塊）消しておきます。
以上でカッテネの設置完了です。
文字で見ると最初はややこしく見えたかもしれません。
ですが、慣れると非常に楽に行うことができますのでオススメです。
Yahooショッピングを追加する場合
Amazonと楽天市場を並べると次に並べたくなるのはYahooショッピングだと思います。Yahooショッピングは少し手間がかかるため、補填としてこちらに追加方法を書いておきます。
まず、バリューコマース に登録してサイト申請する必要があります。
A8やもしもアフィリエイトのような無料のASPサイトです。
怪しいサイトではないので心配ご無用です。バリューコマースにしかない様々な公式ショップからのアフィリエイトもあるのでアフィリエイトをする人は登録しておいて損はありません。
サイト申請には数日かかりますが、その申請が通るとYahooショッピングのアフィリエイト リンクを作成できるようになります。PayPayモールも可能です。
ログイン後のトップページの上にある「広告」を選択します。
「提携情報」→「新規提携」を選択します。
ヤフーショッピングの自動提携機能用プロモーションがあります。
その右上にある「広告素材を選ぶ」を選択します。
「MyLink」（マイリンク）を選択して「再検索」を行います。
検索後の画面を下に少しスクロールするとMyLinkがあるので、「広告主のサイトを見る」をクリックします。
するとYahooショッピングが開きます。
そこでアフィリエイトを貼りたい商品を検索欄に入力して検索します。
検索後のページのURLをコピーして「コピーしたURLを貼り付ける」に貼り付けます。
なんでも良いので、テキスト欄に文字を入力しておきます。
これがないとMyLinkが作成できないためです。
入力したら、「MyLinkコードを取得」を選択します。
MyLinkコードが作成されるので、選択してコピーします。
このコピーをメモアプリか何かに貼り付けて欲しい部分だけ再度コピーします。
<a href= の後ろの部分（”から”でくくられている部分）がアフィリエイトリンクとなっているため、この部分をコピーします。
あとは、このURLをAmazonや楽天のアドレスをカッテネのhtmlタグに貼り付けたのと同じように貼り付けます。
公式ショップを追加する場合
同様の方法で公式サイトから貼りたいページをコピーしてバリューコマースで貼り付けします。MyLinkコードを獲得して、欲しい部分（アフィリエイトURL）を抜き出して使用します。
全部まとめると下記画像のようなアフィリエイトリンクの塊ができあがります。
カッテネのリンクがズレる場合の対処法
いかがでしたか。
アフィリエイトをされている方や興味のある方は一度カッテネを使用してみてください。
簡単操作でのリンク作成や自由なカスタマイズによる利便性を実感できるかと思います。
