PR

カッテネの使い方を誰でもできるように画像60枚以上使って超詳しく説明します

カッテネ使い方 ブログ

カッテネはAmazonや楽天の商品を見やすく美しい商品リンクで表示してくれるとても優秀なプラグインです。

パソコンでの表示例
パソコンでの表示例
スマホでの表示例
スマホでの表示例

しかしちょっと難しい。

僕が初めてカッテネを使い始めたときは2日くらいパソコンと格闘してようやく導入することができました。

そのつまずいたところを画像を60枚以上使用して、カッテネをインストールするところから実際に商品リンクを表示させるところまで説明していきたいと思います。

ついでにうまく使いまわせるような工夫もします。

カッテネを使って商品リンクを作るのに僕はもう慣れたので10分もあればできます。初めてなら少なくとも1時間はみておいていただいたほうが良いと思います。

ゆっくりじっくり確実にいきましょう

約9000文字の記事ですので、1時間程度のまとまった時間を使用するか、きりのいいところで数回かに切って作業することをオススメします。

本記事でわかること

本記事で分かることです。見たい項目には目次からジャンプすることができます。

  • カッテネのインストール方法
  • ブロックエディタでのカッテネショートコードの貼り付け方
  • カッテネ用のAmazonアソシエイト,楽天アフィリエイト,バリューコマース,もしもアフィリエイトからのURLの取得方法
  • 取得したURLの貼り付け方
  • 使用しないボタンの減らし方
  • 再利用可能ブロックの登録方法・使用方法
  • Cocoonテンプレートの登録方法・使用方法

カッテネのプラグインを使用する前にあらかじめ

これらのASPに登録&プログラム提携しておいてください。ここでは既に提携できているものとして話を進めていきますので、よろしくお願いいたします。

登録は無料です。提携できてないときは下のボタンから提携申請しましょう!

スポンサーリンク

katteneプラグインをインストールする

まずはカッテネのプラグインをWordPressにインストールしましょう。

  1. ダッシュボードから「プラグイン」を選択
  2. 「新規追加」を選択
  3. 検索窓に「kattene」と入力し検索
  4. 「今すぐインストール」ボタンを押す
クリックで拡大
katteneで検索

検索するときは必ずローマ字の「kattene」で検索してくださいね。カタカナの「カッテネ」だと見つかりません。

これでWordPressにカッテネがインストールされました。

そしたら忘れずに「有効化」をしましょう。

クリックで拡大
有効化する

カッテネをインストール後、有効化を忘れてしまう方がいらっしゃるようです。注意してください。

投稿ページにカッテネのショートコードを貼り付ける

インストールしたカッテネを使って実際に商品リンクを作ります。今回は 「図解・最新 難しいことはわかりませんが、お金の増やし方を教えてください! 」

という本のリンクを作成していきます。

ショートコードをコピーする

下にある「Copy」ボタンを押してショートコードをコピーしましょう!

Copy
[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]
出典 Web Food

コピーしたらそのままで!次の項目でショートコードを貼り付ける場所を説明していきます。

WordPress編集画面での操作

  • ①ブロックの追加ボタン(+のマーク)を押す
  • ②ウィジェットのプルダウンメニューを選択
  • ③ショートコードを選択
  • ④コピーしたショートコードを貼り付け
  • ⑤一度プレビューで確認
ブロックの追加ボタン(+のマーク)を押す
ブロックの追加
ウィジェットのプルダウンメニューを選択
ウィジェット
ショートコードを選択
ショートコード
ショートコードを貼り付ける位置
ショートコードをここに入力
ショートコードを貼り付ける
ショートコードを貼り付け
ショートコードを貼り付けたあと
ショートコード貼り付け後
一度プレビューで確認
プレビューで確認

プレビューをみるとこんな感じです。画像なしでボタンが5個。タイトルと説明があり。

私のカッテネはカスタマイズをしているため、ボタンの形などが初期と異なります。ご了承ください。

カッテネのカスタマイズはカッテネカスタマイズ!CSSコピペでスマホのボタン表示を縦型にしようの記事を参考にしてください

次は、アマゾンアソシエイト・楽天アフィリエイト・バリューコマース、あともしもアフィリエイトからのURLをコピーしにいきます。

URLの取得

Amazonアソシエイトから画像URLとメインのURLを取得する

Amazonアソシエイトから画像URLとメインのURLを取得します。

Amazonアソシエイトに合格していない方はもしもアフィリエイトからAmazonの情報を入れることになります。

その場合も後で説明します。まずはAmazonアソシエイトです。

  • Amazonアソシエイトにログイン
  • 商品を検索
  • 画像URLを取得
  • 画像URLをカッテネに貼り付け(ついでにタイトルと説明を記入)
  • メインのURLを取得
  • メインのURLをカッテネに貼り付け

画像を追いながら順番にやっていきましょー

AmazonアソシエイトのページをGoogleで検索するなどして開いてください。

サインインを押す
サインイン
パスワードを入力してログイン
パスワード入力
キーワードを入力して商品を検索
商品検索
目的の商品のリンク作成ボタンを押す
リンク作成ボタン
「画像のみ」タブ選択、画像サイズを「中」に設定
画像のみ「中」
画像の上で右クリックをし、画像アドレスをコピーする
画像アドレスをコピー

これで画像URLのコピーが完了しました。ブログの編集画面に戻ります。

カッテネの【画像URL】にコピーしたURLを貼り付ける
画像URLを貼付
貼付後、タイトルと説明も記入

これで一度プレビューで確認しましょう。

プレビュー画面
プレビューで確認

画像とタイトルと説明(著者)が表示されました。まだボタンやリンクを押してもエラーページにいってしまいます。

続いて、メインのURLを取得しにいきます。再びAmazonアソシエイトのページに戻ってください。

  • 「画像のみ」のタブから「テキストのみ」のタブに変更
  • 「リンク」を選択
  • 表示されたURLをコピー
URLをコピー

これでメインのURL(=AmazonのURL)を取得できました。ブログ編集画面に戻ります。

メインのURLを貼り付ける
メインのURLを貼付

これでAmazonの設定が完了しました。

KindleのURLを取得する

では電子本のKindleのURLを取りに行きましょう。先ほどのAmazonアソシエイトの画面にもどってください。

商品のリンクをクリック
商品のリンクをクリック
  • ①Kindle版を選択
  • ②「テキスト」ボタンを選択
  • ③通常URLを選択
  • ④表示されたURLをコピー
URLをコピー

これでKindleのURLが取得できました。ブログ編集画面に戻り、カッテネにURLを貼り付けます。

商品URLを貼付

楽天アフィリエイトからURLを取得する

続いて楽天アフィリエイトからURLを取得します。AmazonのURLが取得できれば、ここは同じような作業ですので難しく考える必要はありません。

楽天アフィリエイトのページをGoogleで検索するなどして開いてください。

ログイン
楽天アフィリエイトにログイン
ユーザーID、パスワードを入力してログイン
ユーザーIDほか入力
商品を検索
商品を検索
目的の商品の「商品リンク」を選択
商品リンクを選択

ちなみに1段目の商品と2段目の商品の違いは、1段目が紙の本で2段目が電子版です。

リンクのみを選択後、コピーのボタンを押す
リンクのみをコピー

これで楽天のURLがコピーできました。再びブログの編集画面に戻ってください。

商品のURLの貼り付け
商品URLを貼付

これで楽天のリンクもうまく作ることができました。

Yahoo!ショッピングからURL取得

続いて、Yahoo!ショッピングのURLを取得します。

Yahoo!ショッピングのアフィリエイトはバリューコマースからおこなえます。

ですのでまずはバリューコマースのページにいきログインしましょう。

メールアドレスとパスワードを打ち込んで、ログイン
バリューコマースにログイン
広告→提携状況→提携済み を選択
提携済みを選択

提携済みのプログラムから「ヤフーショッピング 自動提携機能用プロモーション」を探す。

広告素材を選ぶをクリック
ヤフーショッピングを探す
「MyLink」を選択して「再検索」ボタンを押す
Mylinkを選択して再検索
広告主のサイトを選択
広告主のサイトを選択
商品名を入力し、検索する
商品を検索

検索結果からよさそうな商品を選ぶ

商品を選択

選択した商品のページのURLをコピーする

URLをコピー

バリューコマースのページへ戻ってください。

  • コピーしたURLを①へ貼り付ける
  • 広告となるテキストを入力する(文字は何でもいいです)
  • MyLinkコードを取得を押す
Mylinkコードを取得
  • 「このMyLinkコードを選択」を押す
  • コード全体が選択されるので、右クリックでコピーする
コードを選択してコピー

ブログ編集画面に戻る。

新しい段落にコピーしたコードをそのまま貼り付ける。カッテネのショートコードにはまだ貼り付けません

新しい段落に貼付

MyLink(今回で言えば「なんでもOK」のテキストリンク)ができるので、それを右クリック。

リンクのアドレスをコピーを選択。

リンクのアドレスをコピー

コピーしたアドレスをカッテネに貼り付ける

アドレスを貼付

これでYahoo!ショッピングのリンクも貼り付けることができました。

もしもアフィリエイトからURLを取得する

Amazonや楽天の商品リンクをもしもアフィリエイト経由で作成する場合の手順を説明していきます。

もしもアフィリエイトを使用していない方は読み飛ばしてくださいね。

では、もしもアフィリエイトのページにいきログインをしましょう。

もしもにログイン
ログインIDとパスワードを入力してログイン
ログインIDとパスを入力してログイン
プロモーション検索→提携中プロモーションを選択
提携中プロモーションを選択
Amazonのプロモーションから商品リンクを選択
商品リンクを選択
商品名を入力し、検索する。
カテゴリーをしぼったほうが商品を見つけやすいです。
商品を検索
目的の商品の「商品リンクを作る」ボタンを押す
商品リンクを作る
  • 種別:画像+文字 を選択
  • 画像サイズ:中を選択
  • プレビューの画像の上にマウスをもっていき右クリック
  • 画像アドレスをコピーを選択
画像アドレスをコピー

これで、画像URLの取得ができました。ブログ編集画面に戻ります。

”image":"【画像URL】", ←の【画像URL】を削除し、コピーしたURLを貼り付ける
コピーしたURLを貼付
貼付後、タイトルと説明を記入

続いて、【メインのURL】を取得します。再びもしもアフィリエイトの画面に戻ってください。

商品リンクを作るボタンを押した後の状態です。

先ほどの画像ではなく、今度はテキストリンクの上にマウスをもっていき、右クリック
リンクのアドレスをコピーを選択
リンクのアドレスをコピー

これでメインのURLの取得が完了です。ブログ編集画面に戻ります。

【メインのURL】を削除し、コピーしたURLを貼り付ける
メインのURLを貼付

これでAmazonのURLを貼り付けることができました。

Kindleと楽天についても同様に

  • Amazonまたは楽天のプロモーションから商品リンクを選択
  • 商品名を入力して検索(カテゴリを指定するとなお良い)
  • 商品リンクを作るボタンを押す
  • 種別:画像+文字、画像サイズ:中にする
  • テキストリンクの上で右クリックしてリンクのアドレスをコピー

これでそれぞれのURLを取得することができます。

そしてブログ編集画面に戻り、コピーしたURLを【商品のURL】に貼り付ければOKです。

audiobookボタンを削除する

あとひといきでカッテネの作業が全て終わります。頑張ってついてきてください。

カッテネは5つのボタンを指定できますが、毎回5個のボタンを使うことはあまりありません

いらないボタンを削除していきます。

カッテネショートコードのカンマ「,」から中カッコ「}」までを消します。カンマの消し忘れに注意してください。

カンマから中カッコまでを消す
不要なボタンを削除した後の状態
ボタンを削除した後の状態

書籍の紹介ではない場合、Kindleも削除します。そのときも同じく、「,」から「}」まで削除するようにしてください。

これで全ての設定が終了しました。

必ずプレビューで全部のボタンを押して、商品がうまく表示されることを確認しましょう。

設定終了後のカッテネをプレビューで確認する
プレビューで確認

プレビューがこんな風になればOKです。これでカッテネを使って商品リンクを作成することができました。

リンクの文字「Amazon」や「楽天」はカッテネのショートコードを入力しなおせば「Amazonで探す」などに変更可能です。

気になるかたはやってみてください。

カッテネのショートコードを使いまわせるようにする

先ほどの項目でカッテネの設定は完了しました。

これからはよりすばやく設定するための方法です。

カッテネのショートコードを再利用ブロックに追加する

毎回ショートコードを作者様のページWeb Foodや本記事からコピーしていては手間がかかりますので、手軽にWordPressの編集画面から呼び出せるようにします。

  • 無記入のカッテネのショートコードを選択
  • 縦に三つ点が並んでいるマークを選択
  • 再利用ブロックに追加を選択
再利用ブロックに追加
  • 名前に「カッテネ」と入力
  • 保存をクリック
カッテネを保存

これでカッテネのショートコードのブロックを保存できました。

カッテネのショートコードを呼び出す

保存したショートコードブロックを呼び出します。

  • ブロックの追加ボタン(+のボタン)を選択
  • 一番下の「再利用可能」を選択
  • 「カッテネ」を選択
カッテネを選択

カッテネのショートコードが表示されたはずです。そしたら

  • ツールバーから縦向きの点三つ(・・・)を押して
  • 通常のブロックへ変換を選択
  • ※最近のワードプレスのバージョンは「通常のブロックへ変換」ボタンの位置が変わったので注意!
ツールバーから・・・を押して、通常のブロックへ変換
最近のワードプレスの人は次の画像で確認
通常のブロックへ変換
▼最近のワードプレスの場合のボタン位置▼
最新バージョンの通常のブロックへ変換

再利用ブロック右上の「編集」を押してしまうと、呼び出すカッテネのショートコード自体が編集されてしまいますので注意してください

これでどの記事でもカッテネのショートコードを呼び出して使いまわすことができます。

Cocoon向け:テンプレート機能を使って同じ商品リンクを何回も呼び出す。

私のブログはテーマがCocoonです。Cocoonには便利なテンプレート機能があります

一回商品リンクを作って、登録してしまえば後は何回でも別の記事にでもすぐにリンクを貼り付けることができるようになります。

しかもリンク切れなどで編集が必要になったときは登録した内容を変更するだけで、貼ったリンク全てに反映されますので、とても便利です。

Cocoon利用者向けになってしまいますので、それ以外のテーマをご利用の方はすみませんが読み飛ばしてくださいませ。

テンプレートを使用する手順

  • カッテネでつくった商品リンクのショートコードをまるまるコピーする
画像が見切れてしまいましたが、[kattene]から[/kattene]まで全て選択してコピーしてください。
全て選択してコピー
Cocoon設定からテンプレートを選択
Cocoon設定→テンプレート
新規追加を選択
新規追加
赤枠で囲った部分の内側で右クリック→貼り付け
貼り付け
  • タイトルを入力(あなたがわかりやすいタイトルを付けましょう)
  • ビジュアルエディターのリストに表示にチェックがあることを確認
  • 保存する
保存

これで、テンプレートの保存ができました。投稿画面に戻りましょう。

  • ツールバーから「テンプレート」を選択
  • 先ほど保存した名前のショートコード(ここではお金の増やし方を教えてください)を選択
ツールバーに「テンプレート」が見当たらない場合は何か適当に段落作って文字を入力してみるといいかも
テンプレート
ショートコード[temp id=○○]が表示入力されます。

[temp id=32]←僕のブログだと32個目のテンプレートなので、32です。

これでカッテネの商品リンクが貼れています。

お疲れさまでした。

以上を持ちまして、WordPressでのカッテネの使い方を誰でもできるように超詳しく説明します。の全工程を終了します。

本記事は約9000文字ですので、まじめに読んでいただいた方にはめちゃくちゃ時間がかかったと思います。

ですが、これで一つレベルアップできたと思えばその時間はとても有意義なものになりました。

ほとんど全ての工程に関して画像を入れて説明してきましたので、わかりやすく説明できたと思っています。

それでもカッテネの使い方がわからない人は本記事にコメントいただいたり、お問い合わせからメールいただいたり、ツイッターのDMでお知らせください。

できる限りお答えしたいです。

最初はカッテネの使用に時間がかかりますが、慣れれば5分や10分くらいで作れるようになります。

キレイな商品リンクを作って、ガシガシあなたのブログで商品をオススメしてください!

本当にお疲れさまでした。

カッテネを私のようにカスタマイズをして使用したい方はカッテネカスタマイズ!CSSコピペでスマホのボタン表示を縦型にしようの記事を参考にしてください。

コメント

  1. はじめまして。突然のコメント失礼します。
    私もコクーンを利用し、カッテネの導入を検討していました。
    貴サイトが一番わかりやすかったので、ブクマさせていただきました。
    手順を見ながらカッテネを導入していきたいと思います。

    大変参考になる記事ありがとうございました。
    これからも頑張ってください。

    • ユウさま
      コメントありがとうございます。「一番わかりやすかった」と、これほど嬉しいコメントはないです。
      これからも僕ができなくて困ったこと、みんなが困りそうなことに対面したら、わかりやすく解説する記事を作っていきたいと思います。

  2. この記事、めちゃくちゃ役に立ちました♪
    ありがとう!!!

    • どういたしまして♪

  3. ユウさん

    このページは神でした。
    一つひとつ読みながら、自分のブログにちゃんと表示が出たときは
    感動しました。
    嬉しかったです。
    私もこうして、誰かのお役に立てるように頑張りたいです。
    ありがとうございました。

    • 追河 チチ様

      一生懸命やってできたときは本当にうれしいですよね。
      頑張ってブログを発展させていってください!

      応援します。

  4. はじめまして。
    【 カッテネ 】の使い方をwebで調べている中で、唯一最後まで読み進められるサイトでした。
    感謝しています。
    本当にありがとうございました。

    • Chiharuさん
      カッテネの設定お疲れさまでした。コメントありがとうございます。これからの励みになります。

  5. ひとりでは絶対にたどり着けなかったです。
    「この通りに進めていけば絶対に大丈夫」と思える
    すごく丁寧で分かりやすい記事でした。
    ありがとうございました。

    よろしければ、「参考にしたい記事」というブログタイトルで
    この記事を紹介させていただきたいのですがいかがでしょうか?

    もし都合が悪ければそのときはおっしゃってください。
    お返事お待ちしております。
    よろしくお願いいたします。

    • Yさん
      僕の記事が役に立ってよかったです!
      Yさんのブログで遠慮なく紹介してください。とてもありがたいです。

  6. はじめまして。
    とてもわかりやすくて感激しました!
    アフィリエイト外の商品リンクも作りたくてカッテネにたどり着いたのですが、何度もエラーになってしまい投げ出しそうになっていたんです* *
    本当にありがとうございました。

    • ぽこさん
      本記事を参考にしていただきありがとうございました。
      無事に目的が達成できたようでうれしいです。
      エラーが何回も出るとつらいし投げ出したくなりますよね。
      お疲れさまでした。ぞんぶんにカッテネ使ってくださいね

  7. […] カッテネの設置は峠の雑記ブログが分かりやすかったので是非。 […]

  8. […]  https://kenjineer0224.com/kattene/ カッテネの使い方を紹介している記事(峠の雑記ブログさん) […]

  9. めちゃくちゃわかりやすくて、ブログ始めたての私でも出来るようになりました!!
    ありがとうございました!

    • めろんぱんさん

      お役に立てたようでうれしいです。

  10. はじめまして(^^♪
    ワードプレス初心者ですが、とっっってもわかりやすい説明で
    無事に商品リンクが貼れました!!
    この記事を書いてくださって
    ホント~にありがとうございます!!

    わたしも機会があれば、Twitterで紹介させていただいて
    大丈夫でしょうか??

    • るみっくまさん
      お役に立てたようで嬉しいです!
      是非ご紹介ください。よろしくお願いします。