はてなブログをFlickr写真を張り付けたときに大きさを変更する方法

通常、Flickrの埋め込みタグはこんな書式になる。

<a data-flickr-embed="true"  href="https://www.flickr.com/photos/digirogawak7/26306728804/in/datetaken/" title="P1070809.JPG"><img src="https://farm8.staticflickr.com/7011/26306728804_b618e29143_z.jpg" width="640" height="481" alt="P1070809.JPG"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

一方、はてなブログの機能で貼り付けるとこんな書式になっている。

<p><a class="http-image" href="http://www.flickr.com/photos/41605751@N02/15046917778" target="_blank"><img class="http-image" src="http://farm4.staticflickr.com/3853/15046917778_1a759fc48b.jpg" alt="http://www.flickr.com/photos/41605751@N02/15046917778" /></a></p>
<p><a href="http://www.flickr.com/photos/41605751@N02/15046917778">photo by digirogawak7</a></p>

上の埋め込みタグにある赤い文字の部分がない。

下のように赤い部分を付け足してあげると

<p><a class="http-image" href="http://www.flickr.com/photos/41605751@N02/15046917778" target="_blank"><img class="http-image" src="http://farm4.staticflickr.com/3853/15046917778_1a759fc48b.jpg" width="640" height="481" alt="http://www.flickr.com/photos/41605751@N02/15046917778" /></a></p>
<p><a href="http://www.flickr.com/photos/41605751@N02/15046917778">photo by digirogawak7</a></p>

これが

http://www.flickr.com/photos/41605751@N02/15046917778

photo by digirogawak7

こうなる。アスペクト比が変なのは、元画像に合わせた比で数字を入れていないから。あれ、解像度も低いな・・・。っと!よく見ると、引用している写真のファイル名自体が違うのでそこを変えないと、ただ小さな画像が引き延ばされて表示されるだけだな。

というわけで、そう簡単にはできないことが判明。

http://www.flickr.com/photos/41605751@N02/15046917778

photo by digirogawak7

こんなことするんだったら、Flickrの埋め込みタグをコピペしたほうが楽かも。

解像度を選ぶオプションがあればいいのに。