FlickrExを導入してみた
写真をFlickrからリンクしてきたとき、写真の下にExif情報を自動表示してくれる"FlickrEx"を導入してみました。
かんたんな手順
- ブログ設定の"デザイン設定"から"カスタマイズ"->"+モジュールを追加"
- 本文に本家様の"初級編"からスクリプトを丸コピー。タイトルは適当に。
<script type="text/javascript"> //var FLICKREX_API_KEY = "18c9f79a96fd34c3b3f16a93fb0a5d3c"; //var FLICKREX_EXIF_FORMAT = "%camera% / %Focal Length% / f/%aperture% / ISO %ISO Speed% / %Exposure% sec / %Exposure Bias% EV / %Software%"; //var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img"; </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="//github.com/drikin/FlickrEx/raw/stable/flickrex.min.js"></script> <script src="//github.com/drikin/FlickrEx/raw/stable/exifex.min.js"></script>
- "//var FLICKREX_EXIF_FORMAT ="の行から"//"を削除して記述有効化。
- "var FLICKREX_EXIF_FORMAT ="の後に表示したいものを書く。
- 文字デザインを変えるときはCSSでも。"デザインCSS"に書く。
- なお、モバイルでは表示されない模様です。
見た目のカスタマイズ
付加されたExif情報には.flickr-exifというクラス名が適応されてるので、CSSを追加することで文字サイズなどの見た目を調整出来ます。たとえばExif情報を少し小さく表示したかったら
.flickr-exif {
font-size: small;
}
みたいな感じでカスタマイズできます。
導入にあたり以下のエントリーが参考になりました。ありがとうございます!
ブログに載せるFlickr写真にExif情報を自動表示 by FlickrEx - always one step forward
[D] Flickr画像に自動的にExif情報を付加するブログパーツ FlickrEx - Drift Diary XV
最後に、現在こんな記述で運用しておりますの紹介。↓
- サイドバーモジュール側
<script type="text/javascript"> //var FLICKREX_API_KEY = "18c9f79a96fd34c3b3f16a93fb0a5d3c"; var FLICKREX_EXIF_FORMAT = "<strong><i>%Object Name%</i></strong><br>%camera% | f/%aperture% | %Exposure%sec | ISO%ISO Speed% | %Exposure Bias%EV | %Software%"; //var FLICKREX_EXIF_JQUERY_SELECTOR = "#content img"; </script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="//github.com/drikin/FlickrEx/raw/stable/flickrex.min.js"></script> <script src="//github.com/drikin/FlickrEx/raw/stable/exifex.min.js"></script>
- CSS側
.flickr-exif {font-size: x-small;}