こんにちは！
今日は、物販アフィリエイトでよく利用する楽天アフィリエイトを見栄え良く配置する方法を紹介します。楽天のアフィリエイトは、商品の広告コードを貼り付けるだけで広告が貼れる手軽さが魅了ではありますが、
- 若干見た目がスマートでない
- CocoonテーマでAmazon風にスッキリとした見た目にしてしまおう！
ということで紹介していきますね。
目次
従来の楽天アフィリエイトと変更後の見た目
テーマCocoonで楽天アフィリエイトを利用するには、楽天アフィリエイトで載せたい商品の広告コードを作成し、テキストモードで貼り付けたい場所に広告コードを貼り付ければいいのですが、そのままコードを貼り付けると
若干枠とかが大きかったりなんか見栄えがいまいちな上に触るとおかしくなったりとちょっと手間がかかる
例↓
これを、こんなふうにスッキリとした見た目にするやり方を紹介しますね。
準備
楽天アプリケーションIDの取得方法
「楽天アプリケーションID（楽天デベロッパーID）」を取得するには、アプリ情報の確認ページにグインして情報を取得します。
アプリケーションはIDを取得するには、「アプリID/デベロッパーID」と書かれた部分の値を取得してください。
アプリIDがない方は新規登録が必要です。右上の「アプリID発行」より新規登録してください。
アプリ名「商品検索アプリ」
アプリURL：「あなたのブログのURL」
画像の番号を入力し、作成を押します。
楽天アフィリエイトIDの準備
※楽天アプリケーションIDの登録でも、楽天フィリエイトIDは記載されていますのでそちらがわからない方は以下の方法で確認下さい↓
楽天アフィリエイトID取得ページに移動します。
ログインしていない場合は、ログインしてください。
すると「アフィリエイトIDの確認」という画面が表示されるので「アフィリエイトID」を取得します。
Cocoonテーマに楽天アプリケーションIDと楽天IDを登録する
楽天アフィリエイトIDと楽天アプリケーションIDを登録するには、テーマ設定を開きます。
WordPress管理画面から「Cocoon設定」を選択してください。「API」タブから「楽天アフィリエイトID」「楽天アプリケーションID」の2箇所を入力して保存します。
入力したら変更して保存してください。
使い方
- ブックマークレットをブックマークに保存する。
ブックマークレットの保存方法 - 楽天市場で商品を検索する
- 商品ページを開いたまま、ブックマークしたブックマークレットをクリック
自動でショートコードが作成されます。↓こちらをコピー
- 本文内に貼り付けます（ビジュアルモードでOK）↓
- プレビューで確認してみると（下が楽天アフィリエイトの広告コードを貼り付けたもの）
画像では、Amazonのボタンもありますが、登録がされていない方は楽天のみのボタンを登録し、Amazonボタンは非表示にしておきましょう！（やり方は、以下の表示の設定から確認下さい。）
Cocoonで楽天市場やAmazon、ヤフーの商品リンクがスッキリと貼れる方法を紹介しました。設定が少し難しいと思う方は、楽天の広告コードをテキストに貼り付ける方法でも大丈夫なのでまずはチャレンジしてみてくださいね！
表示の設定
標準設定のままだと、Amazonと楽天とヤフーショッピングのボタンが出たままになっていますので表示の設定を行います。
◇Amazonのボタンを消したい場合◇
Cocoon設定→API→Amazon→「Amazon検索ボタンを表示する」のチェックマークを外すとボタンが消えます。
⬇こんな感じで、楽天ボタンだけになりました。
さらに、楽天ボタンを押してテキストリンクと同じページに飛ぶ設定はこちら
Cocoon設定→API→楽天→「検索ボタンのリンク先を詳細ページにする」に✓を入れるとテキストのリンク先と同じになります！
まとめ
楽天アフィリエイトの広告を見栄え良く配置する方法！Cocoonへの設定とやり方を紹介しました。最初の設定が少し難易度が高いかも知れませんが、設定をしておくと非常に便利な機能となります。楽天市場の商品を販売したいと思われる方はチャレンジしてみて下さい！