当ブログで書籍を紹介するときによく利用しているツール「ヨメレバ」で、「書籍の画像が異常に大きくなる現象」が発生している(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の場合)して、「画像アドレスをコピー」することでわかる。
『こころ』の場合、画像のURLは次のとおり。
https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL320_.jpg
このまま使うとサイズが大きいので、ファイル名の「320」という数字を「240」や「200」など適正なサイズに変更する。
▼240
URL: https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL240_.jpg
▼200
URL: https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL200_.jpg
▼180
URL: https://images-fe.ssl-images-amazon.com/images/I/5151ONVXkML._SL180_.jpg
▼参考サイト
カエレバでAmazonの好きな画像を使う方法 – 情報管理LOG