最近商品リンクをカッテネに変更したので、導入方法ともしもアフェリエイトで楽天・Amazonの商品リンクを作る方法を紹介します。
この記事が参考になる人
- 商品リンクにカッテネを導入したい
- カッテネのリンクをもしもアフェリエイトで作る方法が知りたい
目次
カッテネとは
このような商品リンクが作成できるものです。
パソコン表示↓
スマホ表示↓
全体的にスッキリしていて、思わず押したくなるようなデザインです。ボタンは最大5つまで表示することができます。
ぱすた
カッテネを導入する手順
カッテネを導入する方法は2つあります。
- プラグインを使用する
- html・cssを使用する
私はwordpressテーマにJIN（現在はSANGO）を使用していますが、プラグインで導入すると商品リンクの表示が崩れるという意見がいくつかあったのでhtml・cssで導入しました。
ですがhtml・cssでもボタンが小さかったり、商品紹介の文字に重なって表示されるということがありました。(スマホでは正常だがなぜかパソコン表示のみボタンが崩れる)↓
ただ2~3日経ってから確認してみると正常に表示されていたので、「なんかボタンの表示がおかしい」と思ったら数日待ってみると直っているかもしれません。絶対ではないです。↓
プラグインで導入する方法
1. wordpressの管理画面の[プラグイン]→[新規追加]の順にクリック
2. 検索画面にkatteneと入力するとプラグインが表示されるので、「今すぐインストール」をクリック。そのあと出てくる「有効化」をクリックで完了です。
投稿するとき
記事を投稿するときは、テキストエディタに下記のショートコードを貼り付けてカッテネの商品リンクを表示します。
【画像URL】: 商品リンクに表示したい画像のURLを貼る
【メインのURL】: 商品画像とタイトルをクリックした際に、表示したいページのURLを貼る
※プラグインのショートコードはデフォルトだとAmazonがメインURLになっているので、楽天の商品ページを表示したいときは”label” : “Amazon“の部分を楽天に変更する。
【商品のURL】: 紹介したい商品のページURLを貼る
【タイトル】: 商品タイトル
【説明】: 自由 (簡単にどういう商品なのかを説明すればOK)
ショートコードと下記で説明するhtml・cssのコードはカッテネの製作者様のサイトからコピーできます▼
参考 カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよWebFoodhtml・cssで導入する方法
wordpress以外でブログを書いている方はこちらの方法になります。またプラグインを増やしたくない、プラグインでカッテネを導入すると「なんかおかしくなる」という方はこちらでの導入をお勧めします。
ぱすた
導入方法は簡単です。cssをコピーして、style.cssに貼り付けるのみです。
JINテーマを利用している人
[外観]→[カスタマイズ]から[追加css]に貼り付けることができます。人によりますがおそらく何かしらのcssが書かれていると思うので、一行開けて貼り付けます。また何のコードかわかりやすくするため、カッテネのcssの直前にコメントアウトを書くことをおすすめします。
投稿するとき
下のhtmlをテキストエディタに貼り付けて商品リンクを表示します。
htmlでは【メインのURL】を貼る場所が2つあるので注意です。
例えばAmazonをメインURLにしたい場合、【メインのURL】2つと【商品のURL】合計3つに同じURLを貼ります。
ボタンの数を減らしたい場合
プラグインのショートコードでは不要なコードを削除するだけでOKですが、htmlでは不要なコードを削除したあと<div class=”kattene__btns__five”>の数を変更する必要があります。
もしもアフェリエイトで商品リンクを作る
今回はもしもアフェリエイトで楽天とAmazonの商品リンクを作っていきます。
またバリューコマースでYahoo!ショッピングのリンクを作成したい方はこちらの記事にまとめてありますので参考に▼
「カッテネ」バリューコマースでMyLinkを作成する方法
商品リンクを作成するには楽天・Amazonと提携する必要があります。
もしもアフェリエイトの場合、楽天は審査不要ですぐ提携することができますが、Amazonだと審査があります。
もしもアフェリエイト経由だとAmazonアソシエイトより審査が通りやすいので、こちらをおすすめします。私は12記事書いて、1回の審査で通りました。
html・cssの場合
1. もしもアフェリエイトのトップページから[プロモーション検索]→[提携中プロモーション]の順にチェック
※楽天・Amazon共に商品リンクの作り方は一緒なので、今回はAmazonを例にリンクを作成していきます。
2. Amazonの[商品リンク]をクリック
3. 検索で自分の紹介したい商品を探す(今回は腹巻にしました)。[商品リンクを作る]をクリック
4. 下の画面になるので種別を画像、画像サイズを中にする。ちなみに商品リンクの画像はリンク切れの起きにくいAmazonで取得することをおすすめします。
5. 商品画像の上で右クリックし、画像アドレスをコピーする。テキストエディタの “【画像URL】”に貼り付ける。
6. リンクのアドレスをコピーし、テキストエディタの …href=“【商品のURL】”…>Amazon</a>に貼り付ける。また今回はメインのURLをAmazonにしたいので“【メインのURL】”にもリンクのアドレスを貼り付ける。
7. 最後に【タイトル】、【説明】を入力する。これで完了！
楽天も今の流れと一緒です。商品リンクから「リンクのアドレス」をコピーして、”【商品のURL】“に貼り付ける。完了！
出来上がった商品リンクがこちら↓
プラグインの場合
プラグインの場合も流れは全く同じです。1つ注意なのがボタンの数を減らすときです。
{}だけでなく直前の,(カンマ)も消します。
},
{
“color”…
},
ボタンを楽天とAmazonだけにしたショートコードがこちら▼
まとめ
今回はカッテネでもしもアフェリエイトの商品リンクを作る方法について紹介しました。
カッテネはスッキリしていて見やすいのと、タイトルや説明・リンク先を自由に設定できるので自分の思い通りの商品リンクを作ることができます。
やはり手間がかかるのは否めないですが、慣れたらパパッとできちゃいます！
アフェリエイトにおいて商品リンクはとても重要になるので、この機会にぜひ導入を検討して見てください。
ということでこの辺で！
