【Cocoon】Amazon商品リンクで楽天・Yahooなどのボタンが正常に表示されない時の解決方法!

この記事は約4分で読めます。

私のブログテーマはCocoon

ブログ執筆に必要なものが全て揃っているのに、完全無料の素晴らしいテーマです。

さて、私はAmazon・楽天・Yahooへのアフィリエイトリンクが一括で表示される、CocoonのAmazon商品リンク機能を使っています。

私のブログの性質上、アフィリエイトリンクを使い回すので便利なんですよねこれ。

しかしある日、本来はAmazon、楽天とYahooのリンクボタンが表示されるはずなのに、下記のように表示されない状態になっていることに気付きました。

上のシャープペンリンクにボタンが表示されていません。下が正常な表示。

一応Amazonへのリンクだけが生きている状態。

これ、いくら調べても解決方法が見つからなかったんですが、ひょんなことから自分で解決できました。

もしかしたら同じ症状で困っている人が居るかもしれないので、メモがてら書き記します。

あとタイトルにも書きましたが、恐らく楽天やYahooから商品リンクを作って、同じような症状が出た人にも対応するのではないかと思います。

YouTube始めました!

症状

再度書きますが、症状は下記の通り。

  • ブログテーマCocoonのテンプレート機能を使用
  • Amazon商品リンクを作成すると、商品リンクのブログカード上にAmazon・楽天・Yahooのリンクボタンが表示されない

これまでカラフルなボタンが3つ並んでいた光景に慣れ親しんでいたので、見た目としてもあまりよろしくない感じです。

解決方法

では早速解決方法を。

端的に言うと以下の通り。

  1. WordPressのブログ編集画面から、Cocoon設定>テンプレートを開く
  2. 問題が発生しているテンプレートの編集画面を開く
  3. ビジュアル編集画面になっているならテキスト編集画面にする
  4. 不要なコードを削除する
  5. 保存して問題が発生しているページを確認しにいく

以上です。

これだと何が何やらなので、キャプチャ画像を交えて説明しますね。

1.WordPressのブログ編集画面から、Cocoon設定>テンプレートを開く

2.問題が発生しているテンプレートの編集画面を開く

この画面です。使う人は使う、使わない人は使わないのではないでしょうか?

3.ビジュアル編集画面になっているならテキスト編集画面にする

あれ、何か違うぞ、と気付くでしょうか?

4.不要なコードを削除する

この場合、具体的には以下のコードです。

<span id="productTitle" class="a-size-large product-title-word-break">---</span>
先ほどの画面キャプチャと見比べてみてください。

5.保存して問題が発生しているページを確認しにいく

各種ボタンが復活しましたね。

これで一件落着です。

原因

原因はさっきの不要なコードだということは皆さんもおわかりになったかと思います。

つまりは、HTML部分に原因があった、ということなんです。

ではそもそも、何故そんなコードが入ったのか、根本的な原因はなんでしょう?

実は先程の邪魔なコードが入る前に、一段階踏んでいます。

次のキャプチャ画像をご覧ください。

そのままコピペするとこんな感じに。

私はAmazon商品リンクテンプレートを新規登録する時、入力が面倒なので対応しているAmazonページの商品名をコピペしてからビジュアル画面で編集していました。

コピペすると、上記のように文字のサイズが変わるので、ビジュアル編集画面でいらない文字を消したりサイズを元に戻したり。

すると何が起こるのか。

実はビジュアル編集画面上では、適正なサイズの文字になったように見えますが、HTML編集画面で見ると不要なコードが書き込まれたままなんです。

これが商品リンクの正常な動作を阻害していたということです。

まとめ

再度まとめると、HTMLに不要なコードが書き込まれていたために商品リンクの表示がおかしくなっていた、と言うことです。

その要因はコピペ

と言うことで今後はコピペせず、ちゃんとイチから手打ちします…。

それではまた。