プチIT化

【JINユーザ】カッテネ×Amazon、商品リンクの作成方法

こんにちは、わたあめです。

わたあめ
わたあめ
ブログで商品紹介リンク、どうやって作ればいいの?

商品管理プラグインはいくつかあって、Rinkerやカエレバなど色々とあり、どれにしようか迷いますよね。今回はカッテネ(kattene)というプラグインを導入したので、備忘兼ねて使い方を載せていきます!

カッテネ(kattene)とは、以下のような商品リンクを貼るためのプラグインです。

最近読んだ、わたあめのオススメ本です。早起きのやる気が格段にアップして5時起き出来るようになりました。

いくつか検討しましたが、わたあめが使いたいな~と思ったのは、こちらのプラグインでした。理由は後述させていただきますね!

今回は、カッテネでAmazonの商品リンクのみを作成する手順になっています。カッテネではリンクは本来5つまで作成することが可能ですが、今回は1つのみ、となります。
CSS・HTMLで設定する方法もありますが、簡単で分かりやすいショートコードの設定方法でいきます。
事前にAmazonアソシエイトの登録が済んでいることが前提です。

それでは、早速いってみましょう!!

カッテネ(kattene)インストール方法

プラグインのインストール

まずは、プラグインをインストールします。

  1. WordPressにログインします。
  2. [プラグイン]>[新規追加]をクリックします。
  3. [今すぐインストール]ボタンをクリックします。

プラグインの有効化

プラグインが使えるように、有効化します。

  1. [プラグイン]>[インストール済プラグイン]をクリックします。
  2. "Kattene"の[有効化]リンクをクリックします。
わたあめ
わたあめ
準備は以上で完了です!簡単!

カッテネ(kattene)商品リンクの配置方法

コードの準備

  1. 以下のコードをコピーします。Wordpressのテキストエディターに貼り付けます。([テキスト]タブでなく、[ビジュアル]タブの編集画面で貼り付けます。)
商品の説明

上の日本語の部分:Amazonの画像URL・商品のタイトル・商品の説明・Amazonの商品紹介ページURLは、これから書き換えていきます。

Amazonの画像URL

Amazonの商品の画像のURLを取得して貼り付けます。

  1. Amazonアソシエイトのページにログインします。
  2. [ホーム]タブから、リンクしたい商品を検索します。
  3. 検索結果から、リンクを作成したい商品の[リンクを作成]ボタンをクリックします。
  4. [画像のみ]タブをクリックします。
  5. 商品の画像がプレビューされているので、画像の上で右クリックし[画像アドレスをコピー(C)]をクリックします。
  6. コピーしたコードの"Amazonの画像URL"の部分を⑤でコピーしたテキストで置き換えます。こんな感じです。
    "image": "Amazonの画像URL",

    "image": "https://ws-fe.ZZZ/XXXX............"

商品のタイトル

商品名を記入していきます。商品名をベタ打ちすれば良いのですが、Amazonの方で名称がコピーできちゃうので、私はそうしています。

  1. Amazonアソシエイトのページにログインします。
  2. [ホーム]タブから、リンクしたい商品を検索します。
  3. 検索結果から、リンクを作成したい商品の[リンクを作成]ボタンをクリックします。(ここまでは前章と同じ手順です。)
  4. [テキストのみ]タブをクリックし、[1. リンクをカスタマイズする]枠の[リンクテキスト]の文字列をコピーします。
  5. コピーしたコードの"商品のタイトル"の部分を⑤でコピーしたテキストで置き換えます。こんな感じです。
    "title": "商品のタイトル",

    "title": "わたあめ通信の秘密 ~すぐできる5つの習慣~",

商品の説明

商品の説明を記載します。著者やメーカーなどの情報を記入します。

  1. コピーしたコードの"商品の説明"の部分を書きます。自分で打ち込みます。こんな感じです。
    "description": "商品の説明",

    "description": "わたあめ ベストセラー1位",

Amazonの商品紹介ページURL

商品紹介ページのURLを取得して、貼り付けます。

  1. Amazonアソシエイトのページにログインします。
  2. [ホーム]タブから、リンクしたい商品を検索します。
  3. 検索結果から、リンクを作成したい商品の[リンクを作成]ボタンをクリックします。(ここまでは前章と同じ手順です。)
  4. [テキストのみ]タブをクリックし、[3. この商品リンクのHTMLを取得する]枠の[リンク]のラジオボタンを選択し、文字列をコピーします。
  5. コピーしたコードの"Amazonの商品紹介ページURL"の部分を書きます。こんな感じです。
    "url": "Amazonの商品紹介ページURL",

    "description": "https://www............",

以上で完了になります。

わたあめ
わたあめ
お疲れさまでした~!!

カッテネ(kattene)を選んだ理由

わたあめがカッテネを選んだ理由としては、以下です。

  • デザインがシンプル!見栄えが良い方がクリックされやすいと考えた。(自分だったら見栄え大切!)
  • Amazonでデフォルトで用意されているリンク枠は縦長でページにピッタリでなく、右側に空白の場所が出来てしまうのが気になっていた。
  • Rinkerはダウンロードにpixivアカウントを作成する必要があった。(単に登録が面倒だった。)
  • "create by ~"や"Powered by ~"みたいな文がナシなのが素敵。
  • Rinkerは30日以上売上が無い場合は、うまく動作しなくなるとのこと。(2020年8月現在)

さいごに

コピー貼りつけ、が多くなってしまいますが、見やすいサイトを作るためには…!と思いつつ、URLコピーして必要ショートコードを生成するバッチとか作れたら良いな~なんて考えています。

とにかく、素敵なプラグインを開発してくれた開発者さまに感謝です!!

それでは、また。