この前ブログで本を紹介しようと思い、ヨメレバを使ってブログパーツを生成したところ、「画像大」を選んでいたのですが、表示される画像が小さくなってしまいました。
楽天ブックスでは、ある時点以前に出版された書籍については、小さな画像しか用意していないようです。
という訳でヨメレバの画像が小さいときは、以前のブログパーツの仕様を参考にして、Amazon（アマゾン）の画像へリンクを張っています。
以前のヨメレバとカエレバでは
以前のヨメレバとカエレバでは特に指定がない場合、Amazon の検索機能を利用して、書籍や商品を検索していました。
すると必然的に画像も、Amazon が提供するものを利用することになります。
Amazon が提供する画像は大体どれも大きかったので、自分好みにサイズを調整でき、とても便利でした。
過去に生成してブログに貼り付けたヨメレバとカエレバは、現在でも Amazon が提供する画像を表示しています。
ヨメレバとカエレバの仕様が変更に
ところが 2019年01月に、その仕様が変更になりました。
現在のヨメレバとカエレバでは特に指定がない場合、楽天市場の検索機能を利用して、書籍や商品を検索しています。
すると必然的に画像も、楽天市場が提供するものを利用することになります。
-
- 楽天市場の画像を使った場合
-
- Amazon の画像を使った場合
ただ古い書籍や商品の場合、提供される画像が小さなものしかないので、ちょっと困ります。
そんなときは以前の仕様を参考にして、Amazon の画像へリンクを張ることにしました。
画像アドレスの置き換え
Amazon の商品画面に表示される画像のアドレスを取得して、ヨメレバやカエレバに使われている楽天の画像アドレスと置き換えます。
Amazon の画像アドレスを取得
Amazon の画像へリンクを張るには、目的の商品画面を表示して、そこに表示されている画像のアドレスを取得する必要があります。
Amazon の商品画面
作業手順：
- Amazon のホームページを表示する。
- 検索窓から目的の商品を検索し、その商品のページを開く。
- 商品のページに表示された画像を右クリック。
- 「画像アドレスをコピー(C)」をクリック。
ヨメレバやカエレバの書き換え
Amazon で取得した画像アドレスを使って、ブログパーツ「ヨメレバ」や「カエレバ」の中の楽天市場の画像アドレスを書き換えます。
<div class="cstmreba">
<div class="booklink-box">
<div class="booklink-image">
<a href="アフィリエイトの記述1" target="_blank" rel="nofollow">
<img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/XXXX/XXXXXXXX.jpg?_ex=400x400" style="border: none;" />
</a>
<img src="アフィリエイトの記述2" width="1" height="1" style="border:none;">
</div>
<div class="booklink-info">
～
</div>
<div class="booklink-footer"></div>
</div>
</div>作業手順：
- エディターを使って、ヨメレバの HTMLコードを開く。
- <div class=”booklink-image”>タグの中の、<a>タグの中にある<img>タグを探す。
- <img>タグの src の値（https://thumnail.image.rakuten.co.jp から始まる）を、Amazon の画像アドレスで書き換える。
- 正しく表示されるか確認。
あとがき
ボクの場合ブログパーツを生成するときは、ほとんどの場合「画像大」を選びます。
だから、Amazon の画像アドレスをそのまま使ってしまいました。
もし「画像小」や「画像中」である場合は、画像アドレスの末尾を修正する必要があります。
仕様が変わる前に生成したブログパーツには、Amazon の画像アドレスが使用されていたので、それを参考にすると判りやすいでしょう。
コメント