Amazonアソシエイト不要で使えるカッテネの使い方は？カエレバ、Rinker、WPアソシエイトR2より使いやすい？

[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]

よく使うコードなのでワードプレスのテンプレートやブロックの再利用もしくはShortcoderやAdd Quicktagといったプラグインでショートコードを記録しておくと便利です。

私はいろいろ試しましたがAdd Quicktagが一番簡単で便利だと思いました。

カッテネを使うためだけのAdd Quicktagの設定と使い方はこちら

上のコードではAmazon、Kindle、楽天市場、楽天Kobo、audiobookのリンクが張れるようになっています。

カッテネにYahoo!ショッピングのボタンを加えるには？

ショートコードの中のラベルの名前を変更するだけで大丈夫です。

"label": "楽天Kobo"
　　　　↓
"label": "Yahoo!ショッピング"
もしくは
"label": "Yahoo!"

リンクのボタンに"Yahoo!ショッピング"が長すぎて入りきらない場合は”Yahoo!”と単純に短くしてもYahoo!ショッピングユーザーなら分かるので大丈夫です。

カッテネのリンクのボタンの色を変えたいときは？

ショートコードの中のカラーのところを好きな色に変えれば大丈夫です。

"color": "green",
　　↓
"color": "pink",

ただし、色はorange, blue, green, red, pinkの5色です。CSSで色の編集をすれば細かい色の設定までできるようですがここではごく簡単に済ませます。

空白ができないように注意です。

カッテネのリンクのボタンを減らしたいときは？

カッテネのリンクボタンを削除したいときは{　}で囲まれた範囲を削除します。

例えば楽天Koboとaudiobookのボタンを消したいと思います。以下の黄色マーカーになっているところを削除します。

[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]

楽天Koboを削除する際に { の前のカンマ","も忘れずに削除しましょう。

カッテネにAmazon、楽天、Yahoo!ショッピングだけで十分な場合

カッテネのリンクはAmazonと楽天市場とYahoo!ショッピングだけでいいんだよ、という方は以下のコードをAdd Quicktagに登録すれば大丈夫です。

[kattene]
{
"image": "【画像URL】",
"title": "【タイトル】",
"description": "【説明】",
"sites": [
{
"color": "orange",
"url": "【商品のURL】",
"label": "Amazon",
"main": "true"
},
{
"color": "red",
"url": "【商品のURL】",
"label": "楽天市場"
}, 
{ "color": "pink", 
"url": "【商品のURL】", 
"label": "Yahoo!" 
}
]
}
[/kattene]

カッテネショートコードにもしもアフィリエイトとバリューコマースから商品リンクをコピペ

これが一番時間のかかるところでもありますし、少し慣れが必要な部分でもあります。

今回は冒頭で紹介したホリエモンさんの「多動力」のリンクをAmazon、Kindle、楽天市場、Yahoo!ショッピングで作ってみたいと思います。

もしもアフィリエイトでAmazonと楽天市場を、バリューコマースでYahoo!ショッピングの提携を先に済ませておきましょう。

[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": "pink", 
"url": "【商品のURL⓸】", 
"label": "Yahoo!" 
}
]
}
[/kattene]

【入力手順】
１．画像URLを拾ってくる
２．タイトル（商品名）をつける。手入力可能
３．商品の説明を入れる。手入力可能
４．Amazonの商品リンクをコピペ
５．Kindleの商品リンクをコピペ
６．楽天市場の商品リンクをコピペ
７．Yahoo!ショッピングの商品リンクをコピペ

画像のURLをもしもアフィリエイト経由のAmazonからもってくる

もしもアフィリエイトにログインします。提携プロモーション検索→提携中プロモーション→Amazon.co.jpのところから商品リンクのボタンを押す。

検索バーで商品を検索し、該当する商品があれば「商品リンクを作る」クリックします。

【カッテネ】もしもアフィリエイトでAmazonや楽天の商品が検索してもでてこない場合の対処法

こんにちは。ナベトモ(@nabetomo13)です。広告リンク作成ツールとしてカエレバ、Rinker、WPアソシエイトR2などがありますが、Amazonの規約改定の影響で使いづらくなり、カッテネに移行する方も多いかと思います。特にAmazo...

画像の上あたりで右クリック→画像のURLをコピー

カッテネのショートコードの"【画像URL】"の黄色マーカーがついているところを空白も余すとこなく削除し、コピーした画像のURLをペーストする。

"image": "【画像URL】",
　　↓
"image": "https://images～",

画像のURLは下のソース欄のsrc="https://~.jpg"となっているところの”　”の中身だけをコピーして貼り付けてもできます。

カッテネショートコードのタイトルと説明を入力する

"title": "【タイトル】",　　　　　
"description": "【説明】",　

黄色マーカーの部分を削除し、必要な情報を入れる。特になんでもいいのですが私はタイトルにはAmazonの商品名、説明にはAmazonでの商品説明をコピペしています。

Amazonの商品リンクをもしもアフィリエイトから持ってくる

さきほど画像の上を右クリック→画像URLをコピーしましたが、同じ場所で今度は画像の上を右クリック→リンクのURLをコピーします。

ショートコード内のAmazonの商品のURL①にペーストする。空白ができないように注意。

"url": "【商品のURL①】",
　↓
"url": "https://af.moshimo.com/~~~",

なお、リンクを張った際にちゃんとaf.moshimo.comが最初にきているかチェックしましょう。

商品URLは下のソース欄の<a href="～～～”のところの”　”の中身をコピペしてもできます。

Kindleと楽天市場の商品リンクをもしもアフィリエイトから持ってくる

さて、ここまできたらKindleも楽天市場もやり方は同じです。

検索バーで「商品名　kindle」で検索し、「商品リンクを作る」をクリック

Amazonの商品リンクをコピーした時と同じように画像の上で右クリック→リンクのURLをコピーしてカッテネのショートコードの”【商品のURL②】”にペーストします。

次に楽天市場です。

もしもアフィリエイト→プロモーション検索→提携中プロモーション→楽天市場のところの商品リンクボタンをクリック→検索バーで商品を検索→「商品リンクを作る」をクリック

出てきた画面上の画像の上で右クリック→リンクのURLをコピーしてカッテネのショートコードの ”【商品のURL③】”にペーストします。

Yahoo!ショッピングの商品リンクをバリューコマースから持ってくる

最後にYahoo!ショッピングの商品URLをバリューコマースから持ってきます。

バリューコマースにログインします。

広告→提携状況→提携済みの中からヤフーショッピングを探し出し「広告素材を選ぶ」ボタンをクリック→左のサイドメニューからMyLinkを選択し再検索する

下の方にスクロールするとMyLinkの作成画面が出てきます。

「広告主のサイトを見る」をクリックするとYhaoo!ショッピングのページに移動するので検索バーで商品名を検索→該当の商品をクリックして商品ページに行き、商品ページのURLをコピーする。

MyLink作成画面で「コピーしたURLを張り付ける」のところにペーストする。

「広告となるテキストを入力する」は適当にいれて大丈夫です。

そしたら右下の「MyLinkコードを取得」をクリックします。

出てきたMyLinkコードをコピーします。

コピーしたコードをいったんエディタのブロックにペーストします。「あああ」と先ほど適当に名前をつけたリンクが張られると思います。

あああ　←こんな感じ

リンクの上で右クリック→リンクのURLをコピーしてカッテネのショートコードの ”【商品のURL④】”にペーストします。

ペーストしたら上の「あああ」リンクも作成したMyLinkも削除して大丈夫です。

これで入力項目はすべて埋まりました。この時点でプレビュー画面ではちゃんと広告がリンクボタン付きで出来上がっていると思います。

カッテネでうまくリンクが作成されない？白紙になる？

もし、プレビュー画面で冒頭にエラーコードが出現していたり、リンクが白紙の状態になっているとしたらコードに誤りがあるかと思います。

以下の点に注意してみてください。

・”{}”や”，”は正しく入力されていますか？誤って削除されていませんか？
・入力項目の”　”の中に無駄な空白はできていませんか？
・ブロックをClassic Paragraphに変更して作っても変わりませんか？