長年、「カエレバ」「ヨメレバ」などのブログツールを利用させていただいていたのですが、
Amazonアソシエイトの規約の変更のため、「カエレバ」では、現在、Amazonの写真を使うことができなくなりました。
非常に残念です。今回の規約の変更で最大の変更点は、APIをコールする回数の制限だとされています。
そのため、「カエレバ」は、その点で若干の変更を余儀なくされました。
私は、写真を使うときは、ほとんどAmazonに頼りきりだったので、大変困ってしまいました。
そんなときに見つけたのが、「カッテネ」というツールです。
「カエレバ」は、非常に便利なツールでしたが、私が、唯一残念に思ったのは、検索しても、その商品が出てこないことが結構あるということでした。
詳しい方の話によると、これは、APIを利用したブログツールのためだったそうです。
しかし、「カッテネ」は、そういうことがありません。これは、非常に助かります。
ということで、早速、使わせて頂こうと思ったのですが、私には、どうしても、設定の仕方、使い方が、わかりませんでした。
そして、まる１日悩んだ末になんとか私なりに、設定の仕方がわかりました。
今回説明するのは、Amazonのコードの貼り方ですが、もしもアフィリエイト経由でAmazon、楽天を利用するときも基本的に考え方は、ほぼ同じだと思います。
このやり方が、100％正しいのかは、わかりませんが、ちゃんと表示されて動作していますので、私は、このやり方で納得しました。もし試してみる方は、自己責任でお願いします。
また、私が、今後このツールを利用させてもらうときに、また使い方を忘れてしまわないための記事でもあります。
目次
まずは、「カッテネ」のプラグインをインストールしてみました
最初に結論から書くと、どちらにしても「カッテネ」のプラグインは、インストールしておいた方がよいと思いました。
それでないとCSSを使ったときに表示は、されますが、私の場合、外枠が表示されませんでした。外枠が表示されたほうが見栄えがよいと思います。
まずは、「カッテネ」の製作者様のサイトで、プラグインをインストールしました。
※「カッテネ」製作者様のページ
そして、動作確認用のコードも貼り付けてみましたが、ダメです。私の環境なのか？私のやり方が、間違っているのか？貼り付けても動作しませんでした(^_^.)
そして、他の方のサイトを調べているうちに、「カッテネ」の利用の仕方には、以下の２つの方法があることがわかりました。
１、プラグインをインストールしてショートコードを使う方法
２、CSSとHTMLコードを使う方法
みなさんの意見を拝見させていただくと、使用するテーマによっては、デザインが崩れる可能性があるため、２番のCSSとHTMLコードを使うことをおすすめするという意見に共感しました。
どちらにしても、プラグインとショートコードでは、私の場合、動作しなかったので、CSSとHTMLコードで「カッテネ」を利用させて頂く事に決めました。
「カッテネ」に使うCSSコードとHTMLコードについて！
私には、さっぱりわからなかったので、ネットで探すと、以下のサイトでCSSコードとHTMLコードを公開してくださっていました。記事のタイトル名も同じなので、恐らく「カッテネ」の製作者様の別サイトではないでしょうか。
カエレバやヨメレバより使い方が簡単なカッテネ作った|クリックもされやすいよ
https://ryotaryota.com/page-75
上記のサイトで、まずCSSコードをコピーしてワードプレスのスタイルシートに貼り付けてみました。
CSSコードの貼り付け方
１、まず、ワードプレスの管理画面を開きます。左側のメニューの外観にマウスカーソルを合わせて、次にテーマエディターをクリックします。
２、テーマの編集の画面が表示されますので、余白にコピーしたコードを貼り付けます。
３、コードの貼り付けが終わったらファイルを更新をクリックします。
これで、CSS側の設定は、完了です。
次にHTMLコードを文中に貼り付けてみました
HTMLコードも先ほどのサイトに書かれていますのでコピーさせていただきました。
テキストモードにして文中に貼ったのですが・・・
ここで、問題です。
私は、こういうのが苦手なので、具体的にどのコードをどこに貼ったらいいか悩みました。
そして、色々やってみたのですが、どうしてもうまくいきません。
デザインが崩れたり、クリックしたら404エラーになったりしました。
具体的に、HTMLコードのどこにどのコードを貼るか？
私は、「カエレバ」のときもそうですが、Amazonを使っていました。
そのため、「カッテネ」でもAmazonのリンクを貼ってみました。
以下は、Amazonのみの場合です。
もしもアフィリエイト経由の場合も考え方は、同じだと思います。
先ほどのサイトを閲覧させていただくとHTMLコードには、いくつかAmazonのコードを貼る箇所がありました。
引用元：ЯyotaЯyota様のサイトより一部を抜粋させていただきました。
URL
https://ryotaryota.com/page-75
それが、以下の箇所です！
【メインのURL】が２箇所、【画像URL】、【タイトル】、【説明】、【商品のURL】です
補足情報！
Amazon、kindle、楽天ブックスなどのボタンの減らし方について！
※私のようにAmazonしか貼らない場合は、製作者様のサイトにボタンの減らし方がちゃんと書かれていますのでそちらをお読みください。
さてここにどのコードを貼るのか？相当悩みました。
ひとつずつ説明していきます。
まず、その前に、製作者様が、実際に「カッテネ」で作られたリンクで、どこに移動するのかチェックさせてもらいました。
「商品の写真」、「商品名」、「Amazonのボタン」、この３箇所は、すべてAmazonの商品紹介ページへ移動しました。
【メインのURL】
２箇所有りますが、同じコードを入力しました。
ここに挿入するURLコードは、
※ちなみに今回、使用しているブラウザは、グーグルクロームです。
１、Amazonアソシエイトサイトにログインしてキーワード検索欄に紹介したい商品名などを入力します。
２、商品名の入力が終わったら右側にある検索ボタンをクリックします
すると商品の一覧が表示されますので、その中で目当ての商品のリンク作成をクリックします。
３、カスタマイズとHTML取得 のページが開きます。初期設定のテキストと画像を選んでみます
するとプレビューに商品が表示されます。商品の写真の上で右クリックしてリンクのアドレスをコピーをクリックします。そのURLを【メインのURL】の場所に挿入します。
※注意事項
初めは、私もミスしてしまいましたが、【メインのURL】の【 】も削除して先ほどのコードを入力します。
【 】の中にコードを入力してもうまくいきません。【 】も削除します。
【画像URL】
ここに挿入するURLコードは、
１、先ほどリンクを取得したリンクのデザイン変更とカスタマイズの画面を開いたままにしておきます。
２、今度は、画像のみのタブをクリックします
そうしたら、プレビューに商品だけの写真が表示されているはずです。
写真のサイズを中に変更します
３、プレビュー画面に商品の写真がありますので、その写真の上で、右クリックして画像アドレスをコピーをクリックします。このURLを【画像URL】の場所に挿入します
※注意事項
【画像URL】の【 】も削除して先ほどのコードを入力します。
【 】の中にコードを入力してもうまくいきません。【 】も削除します。
【タイトル】
１、先ほどリンクを取得したリンクのデザイン変更とカスタマイズの画面を開いたままにしておきます。
２、テキストのみのタブをクリックします。この場合は、普通にリンクを取得すればOKです。
選択するをクリックしてコードをコピーします。このコードが、【タイトル】の場所に入力するコードになります。
※注意事項
【タイトル】の【 】も削除して先ほどのコードを入力します。
【 】の中にコードを入力してもうまくいきません。【 】も削除します。
【説明】
これに関しては、ここに好きな説明を書き込みます。不要なら削除してもいいと思います。
商品の説明を書く場合も【 】も削除して書き込みます。
【商品のURL】
こちらも、先ほどの【メインのURL】と同じコードを入力します
もちろん、【 】も削除して入力します。
※これは、Amazonのボタンしか使用しない場合です。キンドル、楽天、楽天ブックスのボタンも使用する場合は、それぞれのサイトの商品紹介ページのURLを貼る必要があります。
私は、Amazonのボタンしか使用しないので、ここでは、説明していません。
最後に本当に有効なリンクかどうか確認してみます
動作が、有効なリンクでないと意味がありません。
確認の仕方は、とても簡単です。
Amazonのリンク動作確認ツールを使います
１、Amazonアソシエイトにログインします。上部のメニューのツールにマウスカーソルを合わせます。次に、リンク動作確認ツールをクリックします。
２、確認の仕方は、出来上がった「カッテネ」ツールの上で、３箇所確認します。
●写真の上で右クリックして先ほどと同じように、リンクのアドレスをコピーをクリックします。
●商品名の上で右クリックして同じくリンクのアドレスをコピーをクリックします。
●Amazonのボタンの上で右クリックして同じくリンクのアドレスをコピーをクリックします。
３、３つのコードを動作確認ツールに入力して確認します。
コードを入力したら、リンクを確認をクリックします
すると以下のように正常な結果が出ました！
最後に、「カッテネ」という素晴らしいツールを作ってくださった製作者様に心より感謝いたします。
その人気の高さから、みんなが、待ち望んでいたツールだったと思います。