クリエイティブライフハック

写真とオンラインメディアの話をしよう。ブログ、ソーシャルメディア、オウンドメディア、ホームページ、ハンドメイドマーケット、Etsy、minne、Creema、iichi…

オンラインメディア

ブログに貼る写真に撮影データを表示する方法。

投稿日:2014/11/25 更新日:

プロの写真家さんや趣味の写真家さんなどは、ブログに写真をたくさん載せることになります。シャッタースピードや絞り、ISOなどの撮影データも一緒に載せているブログもあります。

撮影データを掲載する理由は、その時なぜその設定で撮ったのかを思い出すためのメモであったりもするだろうし、そうでない理由もあります。

スポンサーリンク

ひとつひとつの写真に撮影データを手動で書き込む作業はとても大変です。
そこで、ブログに自動で撮影データを表示する方法をご紹介します。

ただし、WordPressのプラグインを利用するので、アメブロや他のブログサービスでは使えません。

Exif情報

Exifとは

ブログに貼り付けるJPGやPNG画像は、見える情報だけではなく数値や文字などの撮影データを記録しておくことができます。
最近のデジタルカメラやスマホカメラは、撮影時に撮影データを付記することもできるようになりました。撮影時に記録されるデータ以外にも付け加えたいデータがあれば編集ソフトで修正や追加をすることも可能です。

そのような文字や数値のデータをExifといいます。

Exifに含まれる主な情報

撮影日時/カメラメーカー名/カメラモデル名/解像度/シャッタースピード/絞り/ISO感度/焦点距離/撮影場所の情報/サムネイル画像
などがあります。

Exif情報の注意点

WordPressの写真に自動で撮影データを表示する方法をご紹介するのですが、その前にExif情報に関する注意点を書いておきます。
先程も書いたように、画像にはいろんな見えない情報が記録されています。
その中で特に気をつけないといけないデータが2つあります。

  • 撮影場所の情報
  • サムネイル画像

です。

撮影場所の情報

自宅での撮影など撮影場所を知られたくない写真は、ブログに掲載したりSNSに投稿するのは止めましょう。もしくわ、Exif情報を削除するツールを使って表示されない事を確認してから掲載するようにしましょう。

サムネイル画像

もうひとつ、写真に写った顔や名前などにモザイクをかけたつもりでも、サムネイル画像はそのままという人がいます。
気をつけましょう。Exifビューワーで見えちゃいます。

Exif情報自動表示プラグイン HK Exif Tags for WordPress

さて、Exif情報の注意点を理解した上でブログに撮影データを載せます。

HK Exif Tagsのインストール

管理ページ > プラグイン > 新規追加
で「HK Exif Tags」を検索してインストール及び有効化するだけです。

HK Exif Tags

「HK Exif Tags」のダウンロードはこちら

icon-download HK Exif Tags

Exif情報の表示例

Exif情報の表示例

上の画像では、2行目にキャプションもありますが、デフォルトのままでは表示されません。1行目だけでOKならば設定やカスタマイズは必要ありません。

スタイルの指定

デフォルトのHTMLコード

デフォルトの書き出されるHTMLコードは

<span style="display:block; color:#888; font-size:small; font-weight:normal;">

のようになっています。

私の場合は、クラスを指定してCSSにスタイルを追加しました。

<p class="data">

HTMLの修正

「プラグイン編集」から「HK Exif Tags」を選択して

プラグイン編集

hk-exif-tags/hk_exif_tags.php
を編集します。

プラグインファイル

プラグインファイルの修正は間違えると使用できなる場合があるので注意が必要です。
FTPで直接プラグインファイルを編集できる人は、その方が簡単で安全かもしれません。

Exifデータの追加

hk-exif-tags/hk_exif_tags.php
の160行目あたりにExifデータを追加設定します。

作成日時、コピーライト表示、クレジット、タイトル、キャプション
を追加しました。

Exifdata-plus

Exifデータの表示

Exif情報の表示例

のように、改行してタイトルとキャプションを追加しました。

同じプラグインファイルのもう少し下のところに設定箇所があります。

exif

参考: icon-bookmark HK Exif Tags フォーラム
参考: icon-bookmark WordPressのhk exif tagsで呼び出せる項目を追加する方法

p.data にスタイル指定

あとは p.data にスタイルを指定しました。

p.data {
text-align:center;
}

いかがでしょうか、WordPressに慣れていないと少し難しい箇所もありますが、落ち着いてやれば問題なくできると思います。
ぜひ、お試しを!

今日も元気に楽しく♪

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter で畑本伸一|CreativeLifeHackをフォローしよう!

-オンラインメディア
-, ,

運営者プロフィール

畑本伸一

icon-maleSINTO Hatamoto (畑本伸一)
写真とオンラインメディアの話が大好きです。ワードプレス、インスタグラム、ピンタレストの活用方法、初心者ハンドメイド作家さん向けの商品写真の撮り方、編集方法、オンラインメディア活用などをセミナー講師としてお伝えしています。 I Love Fujifilm X-E2
icon-arrow-circle-right 詳しいプロフィール

共著

Facebookページ「Creative Life Hack」TwitterGoogle+ページ「自分メディアの育て方」instagramPinterestFeedly RSS

Copyright© クリエイティブライフハック , 2016 AllRights Reserved.