「ヨメレバ」の画像サイズが異常に大きくなる場合の対処法

シェアする

スポンサーリンク
very giant panda

当ブログで書籍を紹介するときによく利用しているツール「ヨメレバ」で、「書籍の画像が異常に大きくなる現象」が発生している(2018.4.17 10:56時点)。

このブログだけに起こる現象なのか、他のサイトでも起こっているのかどうか不明だが、とりあえず記事にしておく。

※2018.4.19追記:原因が判明(「「ヨメレバ」の画像サイズが異常に大きくなる原因が判明」参照)。


例えば『こころ』(夏目漱石(著), 新潮社, 2004)のリンクを「ヨメレバ」で作成すると、次のように画像が異常に大きくなる。

画像サイズは「中」を指定しているのに。

スポンサーリンク

原因

画像がなぜ大きくなるのか。

原因は「画像サイズのコントロール」がうまくいっていないからだ。

リンクの左に表示される書籍の画像は「楽天ブックス」のを使用しているようだ(以前はAmazonの画像を使用していたと思う)。

画像ファイル名の末尾に「?_ex=200×200」と記述することにより、サイズを「200×200」のサムネイルで表示しようとしている。

が、当ブログではサムネイル画像でなはく「大きな画像のまま」表示される。

とりあえずの対処法

あくまでも「とりあえず」の対処法だが、画像のimg要素にサイズ(例えばwidth)を指定すれば、画像を縮小することができる。

例えばimg要素の中にwidth=”120″を追加する。

<img width=”120″ src=”https://thumbnail.image.rakuten.co.jp/@0_mall/……

と、画像は次のように小さくなる。

これが「ベスト」な対処法かどうかはわからない。

「ヨメレバ」の仕様が元に戻ればいいのだが。

とりあえずの対処法2

一番手っ取り早い対処法は「リンク先をAmazon(とKindle)のみにする」という方法だ。

しかし、「楽天ブックス」もリンクに含めたい場合は次のように対処する。

画像を楽天ブックスからではなくAmazonから取得する方法がある。

『こころ』の場合、「ヨメレバ」は楽天ブックスの次の画像ファイルを使用している。

https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/0137/9784101010137.jpg?_ex=200×200

上記のURLを次のAmazonの画像URLに変更する。

https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL240_.jpg

とすると、次のようにそこそこ適正に表示される。

Amazonの画像URLは「ヨメレバ」の「画像リンク(アマゾン)」に表示されている画像を右クリック(PCの場合)して、「画像アドレスをコピー」することでわかる。

Amazonの画像リンク

『こころ』の場合、画像のURLは次のとおり。

https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL320_.jpg

このまま使うとサイズが大きいので、ファイル名の「320」という数字を「240」や「200」など適正なサイズに変更する。

▼240
240
URL: https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL240_.jpg

▼200
200
URL: https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL200_.jpg

▼180
180
URL: https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL180_.jpg

▼参考サイト
カエレバでAmazonの好きな画像を使う方法 – 情報管理LOG

WordPressでHTMLタグを簡単に表示する | 明日やります

HTMLタグ/イメージタグ/画像のサイズを指定する – TAG index

スポンサーリンク

シェアする

twitterをフォローする
twitterをフォローする

ブログを購読する
ブログを購読する

follow us in feedly RSS