ご訪問ありがとうございます。
このブログはワードプレスの無料テーマCocoonを使用しています。
運用して1年経ちますがようやく最近になって記事内に商品リンクを入れるようになりました。
たらこっこ@nikonikotarakoです。
楽天の商品リンクを貼ろうと思ったら画像が表示されない！
なにごとも最初はうまくいかないものですね。
なんやかんやと色々いじってみて解決したので備忘録としてまとめています。
こんな人は読んでみて！
- Cocoonを使っている人
- 自分はまだ初心者の域を超えていないと思っている人
- 楽天アフィリエイトリンクがうまく貼れない人
- 楽天アフィリエイトリンクを貼れたけどなんだかちょっと違う？という人
Cocoonで楽天アフィリエイトリンクを貼る方法は？
ワードプレスの無料テーマCocoonを利用して1年になります。
Cocoonは何か困った事があった時にフォーラムで質問する事ができるのでありがたいですね。
私も一度どうにもこうにも困った時に質問しました。
真夜中にもかかわらず複数人の方に回答をいただいて無事に解決できました。
フォーラムについてはこちらの記事で触れています。
さて、本題の楽天アフィリエイトリンクを貼る方法ですがCocoonのページに詳しく説明されているので参考にしてみてください。
（自分で説明しないのかよ！という感じですが…）
このやり方でいざ楽天アフィリエイトリンクを貼ってみました。
ところが…画像が表示されない！！
楽天アフィリエイトリンクで画像が表示されない問題
どんな問題が発生したのか見てください
《記事作成画面》
楽天アフィリエイトのコードをテキストエディタに貼り付けてビジュアルモードで確認するときちんと画像が表示されています。
《プレビュー画面》
ところがプレビューしてみると画像が表示されず真ん中に『スクロールできます』の表示が出ています。
うーん…
どうすればいい？
調べてみるとスクロールする設定があるそうなので、そこをいじってみることにしました。
Cocoonの横スクロール設定
Cocoonのコンテンツ内で横に長い表などを入れた時に、それをスクロールして見ることができる設定があるんですね。
その設定方法はこちらです。
（また自分で説明しないのかよ！という感じですが…）
早速やってみました。
- WordPressの管理画面から「Cocoon設定」を選ぶ
- Cocoon設定の本文タブを選ぶ
- 本文タブの下のほうにある「レスポンシブテーブル」までスクロール
- 「横幅の広いテーブルは横スクロール」の項目を見てみる
⇒ スクロールさせたい場合：チェックを入れる
⇒ スクロールさせたくない場合：チェックを外す
私の設定を見てみるとチェックが入っていました。
スクロールさせたくないのでチェックを外す。
さぁこれで画像は表示されるのか…
無事に画像が表示されました！！
解決！！
楽天アフィリエイトのリンクがお洒落じゃない？
ワードプレスでブログ運営をする前は楽天ブログを利用していました。
楽天ブログに楽天の商品リンクを貼る時には楽天アフィリエイトのサイトから貼っていました。
当然ワードプレスでもその方法が使えると思ったのでその方法で貼っていました。
ためしに私も参考にしているアフィリエイトの本を貼ってみます
|
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/1a822333.af16008d.1a822334.bf548670/?me_id=1213310&item_id=19014984&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F0511%2F9784800720511.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
貼れたけど…
なんかちょっとお洒落じゃないような気がする。
他のブログでもっとスッキリとお洒落なやつを貼っているのを見たことがあるけど…
楽天アフィリエイトで作成するとこうなってしまうんですね。
でも冒頭で紹介したCocoonの『楽天商品リンクの使い方』の説明のとおりに貼るとこうなります。
![アフィリエイトで夢を叶えた元OLブロガーが教える本気で稼げるアフィリエイトブログ 収益・集客が1．5倍UPするプロの技79 [ 亀山ルカ ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0511/9784800720511.jpg?_ex=128x128)
お洒落になりました！！
解決！！
ボタンを非表示にするにはどうする？
ようやく楽天商品リンクをお洒落に貼ることができるようになりました。
今度は別の問題が…
楽天の商品を紹介したいのにAmazonとYahoo!のボタンも出ちゃう。
AmazonとYahoo!では取り扱いが無いのに…
別の記事で紹介したベビーカー。
AmazonとYahoo!でも取り扱いがあるのかボタンをポチっとしてみました。
《 Amazon 》
まったく違う商品が表示されました。
《 Yahoo!ショッピング 》
商品の取り扱いがありませんでした。
楽天商品リンク（全ボタン非表示）を使ってみた
Cocoonのショートコードを見てみるとこんな感じ。
この楽天商品リンク（全ボタン非表示）を使ってみることにします。
ショートコードの中から楽天商品リンク（全ボタン非表示）をクリックするとこのようなコードが出てきます。
[ rakuten id=”商品番号” kw=”キーワード” amazon=0 rakuten=0 yahoo=0 ]
さきほどのベビーカーのショートコードを見てみます。
[ rakuten id=”eurovossbaby:10007125” kw=”【楽天市場】【マイクラライト・ダットウェイ正規販売店】micralite ファストフォールドイギリスUK発のSUVベビーカー：BE MY BABY“ ]
“商品番号”のところに赤い部分
“キーワード”のところに青い部分 を入れます。
⇩ ⇩ ⇩
[ rakuten id=”eurovossbaby:10007125” kw=”【楽天市場】【マイクラライト・ダットウェイ正規販売店】micralite ファストフォールドイギリスUK発のSUVベビーカー：BE MY BABY” amazon=0 rakuten=0 yahoo=0 ]
これで表示させてみるとこんな感じになりました。
もっと効率的なやり方があるのかもしれませんが、ひとまず楽天アフィリエイトの商品リンクを思ったとおりに貼れるようになりました。
これも解決！！
まとめ
Cocoonで楽天アフィリエイトの商品リンクを貼った時に起こった問題点の解決方法をまとめてきました。
運営1年で初心者と言ってよいものかどうか疑問ですが、次から次へと起こるわからない問題に四苦八苦しながらやっています（苦笑）
これからもボチボチ頑張っていこうと思っています。
最後まで読んでいただきありがとうございました。
