このブログでも使っているFlickrの写真をブログに埋め込む方法を紹介します。Flickrのインタフェースは最近1年で大きく変わっているので、将来この方法は使えなくなるかもしれません。2014年8月時点での手順になります。
基本的な手順
- Flickrで掲載したい写真を表示
- 右下の矢印をクリック
- HTMLを選択
- 掲載する画像サイズを選択
- ラジオボタンもHTMLを選択
- コードをコピーする
- ブログにコードを貼り付ける
このようなコードがコピーされるはずです。
<a href="https://www.flickr.com/photos/teps4545/14625108652" title="Hidden Valley Sunset by teps4545.photo, on Flickr"><img src="https://farm4.staticflickr.com/3866/14625108652_9478036d28_k.jpg" width="2048" height="1365" alt="Hidden Valley Sunset"></a>
写真はFlickrでの公開範囲をPublicにしているものが良いです。また、5.で「Embed」を利用することもできるのですがコードがiframeタグを使っているため下記に紹介するレスポンシブルデザインでの対応できなくなります。
応用編
写真をクリックするとFlickrのページを別ウインドウ、別タブで開くようにする
コピーしたコードでは写真をクリックするとFlickrウェブサイトに移動してしまい、その後、元の記事に戻ることが難しくなってしまいます。aタグに「target=”_blank”」を追加することで解決できます。
<a href="https://www.flickr.com/photos/teps4545/14625108652" title="Hidden Valley Sunset by teps4545.photo, on Flickr" target="_blank"><img src="https://farm4.staticflickr.com/3866/14625108652_9478036d28_k.jpg" width="2048" height="1365" alt="Hidden Valley Sunset"></a>
レスポンシブルデザインに対応させる
imageタグにあるheightとwidthの指定を削除することで解決できます。ブログのテンプレートに左右されますが縦横比を保ちながら適切なサイズに縮小してくれます。拡大はしないのでFlickr画像のサイズはウェブサイトの横幅に近いものを選んでいます。このブログでは「Large」 を選んでいます。
<a href="https://www.flickr.com/photos/teps4545/14625108652" title="Hidden Valley Sunset by teps4545.photo, on Flickr"><img src="https://farm4.staticflickr.com/3866/14625108652_9478036d28_k.jpg" alt="Hidden Valley Sunset"></a>
写真のExif情報を掲載する
これができるのでFlickrを選びました。長くなりそうなので次回紹介します。
