Mono Works

いろんなサイトの写真を見てまわっていると、画像の下にEXIF情報を表示されている方がちらほらいらっしゃいます。「みなさんマメですなあ」とか思ってましたが、Flickrから引っぱってきた写真なら自動でEXIF情報を表示させることができるんですね。使用するツールは、@drikinさん作のFlickrEx（ありがたや）。途中でFlickr側の仕様変更があったようなので、参考のリンク先をちゃんと確認してましょう。あと、Flickr側の公開設定でPublic（Anyone can see this photo）にしておく必要があります。ぽぽろんちさんは、これに気付かず半日くらい「表示されないなあ」と悩んでました（とほほ）

設定を済ませると、上記のように写真の下にEXIF情報が表示されるようになります。レンズ一体型カメラなので、レンズ表示のところが −（横棒）になってしまい味気ないですねえ。コンデジしか持ってないならレンズ表示しなければ、「いいじゃないの〜」というお言葉が聞こえてきそうですが、将来的にレンズ交換できるカメラを使うことになるかもしれないじゃないですか。そうなると、この設定が活きてくるわけです。いや、ぜひ活かしたい･･･

設定方法は、以下のとおり。

EXIF情報を設定するための設定（header.php）

下記をテーマ編集「header.php」内の</head>の直前に配置。

<!– FlickrEx –>
<script type=“text/javascript”>
  var FLICKREX_EXIF_FORMAT = “%Camera%（%Lens%）
  %Exposure% sec, F %Aperture%, ISO %ISO Speed%, %Exposure Bias% EV, %Focal Length%“;
</script>
<script>(window.jQuery && parseFloat(window.jQuery().jquery) > 1.5) || document.write(’<script src=“//flickrex.drikin.com/stable/vendor/jquery-1.9.0.min.js”><\/script>’)</script>
<script src=“//flickrex.drikin.com/stable/flickrex.min.js”></script>
<script src=“//flickrex.drikin.com/stable/exifex.min.js”></script>
<!– end of FlickrEx –>

2行目は、ブログに表示させるEXIF情報を設定する部分で、自分用に変更してます。

EXIF情報の表示スタイルを変更（style.css）

Exif情報を小さく表示して、リンクの下線を消すため、下記をテーマ編集の「style.css」に追加。OS、ブラウザによってはBODYのリンク要素も変更が必要かも。あと、設定後は、いったんリロードしないと反映されないっぽい。

/* FlickrEx用のスタイル */
.flickr-exif {
  font-size: smaller;
}
a.flickr-exif {
　text-decoration: none;
}

スマホで見たら幅だけギュッと圧縮されてたので

うち特有の問題っぽいけど、元の縦横比を保ったまま縮小表示されるようにするため、imgタグに下記クラスを手動で追加。うーん、なんか簡単な方法はないものか。最初からテーマ見直すのも面倒だし… header.phpに下記スクリプトを追加

<script>
  jQuery(function(){
    jQuery('img')
    .addClass("alignnone")
  });
</script>

【参考リンク】

・[D] Flickr画像に自動的にExif情報を付加するブログパーツ FlickrEx

・[D] 【重要】FlickrExを既にお使いの方へのお願い

・drikin/FlickrEx ・ GitHub

・Kohichi Aoki(@drikin)さん | Twitter