【収益化】ヨメレバ・カエレバで楽天提供の画像が小さいときはアマゾンで代用します

その他 インターネット
この記事は約5分で読めます。

この前ブログで本を紹介しようと思い、ヨメレバを使ってブログパーツを生成したところ、「画像大」を選んでいたのですが、表示される画像が小さくなってしまいました。

楽天ブックスでは、ある時点以前に出版された書籍については、小さな画像しか用意していないようです。

という訳でヨメレバの画像が小さいときは、以前のブログパーツの仕様を参考にして、Amazon(アマゾン)の画像へリンクを張っています。

ブログパーツ「カエレバ」でも同様に、画像が小さくなることがあります。
スポンサーリンク

以前のヨメレバとカエレバでは

以前のヨメレバカエレバでは特に指定がない場合、Amazon の検索機能を利用して、書籍や商品を検索していました。

すると必然的に画像も、Amazon が提供するものを利用することになります。

芸術作品

Amazon が提供する画像は大体どれも大きかったので、自分好みにサイズを調整でき、とても便利でした。

過去に生成してブログに貼り付けたヨメレバカエレバは、現在でも Amazon が提供する画像を表示しています。

ヨメレバとカエレバの仕様が変更に

ところが 2019年01月に、その仕様が変更になりました。

現在のヨメレバカエレバでは特に指定がない場合、楽天市場の検索機能を利用して、書籍や商品を検索しています。

すると必然的に画像も、楽天市場が提供するものを利用することになります。

ただ古い書籍や商品の場合、提供される画像が小さなものしかないので、ちょっと困ります。
そんなときは以前の仕様を参考にして、Amazon の画像へリンクを張ることにしました。

画像アドレスの置き換え

Amazon の商品画面に表示される画像のアドレスを取得して、ヨメレバやカエレバに使われている楽天の画像アドレスと置き換えます。

Amazon の画像アドレスを取得

Amazon の画像へリンクを張るには、目的の商品画面を表示して、そこに表示されている画像のアドレスを取得する必要があります。

Amazon の商品画面

Amazon の商品画面

作業手順:

  1. Amazon のホームページを表示する。
  2. 検索窓から目的の商品を検索し、その商品のページを開く。
  3. 商品のページに表示された画像を右クリック。
  4. 「画像アドレスをコピー(C)」をクリック。
マウスオーバーで拡大画像が表示される商品は、1度画像をクリックしたのち、新たに開いた画像一覧の大きな画像の上で右クリックします。

ヨメレバやカエレバの書き換え

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>

作業手順:

  1. エディターを使って、ヨメレバの HTMLコードを開く。
  2. <div class=”booklink-image”>タグの中の、<a>タグの中にある<img>タグを探す。
  3. <img>タグの src の値(https://thumnail.image.rakuten.co.jp から始まる)を、Amazon の画像アドレスで書き換える。
  4. 正しく表示されるか確認。
カエレバの場合は、<div class=”kaerebalink-image”>タグの中を探します。

あとがき

ボクの場合ブログパーツを生成するときは、ほとんどの場合「画像大」を選びます。
だから、Amazon の画像アドレスをそのまま使ってしまいました。

プログラマーの男性

もし「画像小」や「画像中」である場合は、画像アドレスの末尾を修正する必要があります。

仕様が変わる前に生成したブログパーツには、Amazon の画像アドレスが使用されていたので、それを参考にすると判りやすいでしょう。

【デザイン】ヨメレバ・カエレバ・トマレバ・タベレバを左揃えで大きな画像に!
つい先日、ヨメレバ・カエレバ・トマレバというブログパーツを使いはじめました。 ブログパーツのスタイルを格好良くしたくて、スタイル定義(CSS)をネットでいろいろと探してみたのですが、どれも中央揃えでブログのデザインに合いません。 ということで、左揃えのスタイル定義(CSS)を自分...
【デザイン】ヨメレバ・カエレバ・トマレバ・タベレバを更に大きな画像に!控えめボタンで
ひとの好みは、十人十色ひとそれぞれです。 ということで、ヨメレバ・カエレバ・トマレバ・タベレバの画像をさらに大きくした CSS を作ってみました。 今回の主な変更点 画像を大きくしたので、パソコン表示では横に並ぶボタンが、2つずつになりました。 ただしモバイル表示では、画像の大きさは前回...

コメント

タイトルとURLをコピーしました