スポンサーリンク

PHOTO YODOBASHI みたいにオシャレに EXIF を表示したい！

Wordpress
2020.01.02
スポンサーリンク
スポンサーリンク

めざせ！ PHOTOYODOBASHIみたいな EXIF 表示

まりん
まりん

写真愛好家の方なら必ずと言っていいくらい訪れるサイト。
ヨドバシカメラが運営されている PHOTO YODOBASHI
そして、マップカメラが運営されている KASYAPA

まりん
まりん

カメラの機種名やシャッタースピード、絞り値などが、写真画像の右下にオーバーレイで表示されていたり、写真の下にコンパクトに１行で見やすくさりげなく表示されているので、とっても参考になるんですよね。

X100F 実写レビュー
2430万画素の「X-Trans CMOS III」センサーを搭載したX100シリーズの最新モデル。高速画像処理エンジン「X-Processor Pro」を搭載し、その描写力はさらなる高みへ。
photo.yodobashi.com
https://news.mapcamera.com/KASYAPA.php?itemid=26114
news.mapcamera.com
ゆい
ゆい

先日、写真画像のEXIFを表示するプラグインを導入したけど、表示がちょっと違う感じだったよね。。。そう、こんな風に・・・

画像の下にリスト表示されるという・・・

画像のExif情報を表示しよう！【exifography】プラグイン
Exifってご存じでしょうか？ Exchangeable image file format の略で、「エグジフ」って読みます。 Exifとは、デジタルカメラで撮影した画像データに、撮影した画像データに、撮影日時やデジカメの機種、絞り値、ISO感度などの情報を記録してくれるので、これにより写真の撮影情報の詳細を確認する...
web.no-koto.net

Exifography をカスタマイズ

まりん
まりん

ということで、PHOTO YODOBASHI みたいに表示できるようにカスタマイズしてみました。

まずは、プラグイン【Exifography】の設定変更だけでなんとかならないか、やってみます。

リスト表示

上がデフォルト状態なのですが、これを次のようにリスト<ul><li>を<div>と<span>に変更してみます。

インライン表示
まりん
まりん

インラインで１行表示にできたけど、英語の項目名がちょっとどうかなぁ・・・？　なんとかならないかしら・・・

ということで、さらにExifographyの設定を変更してみましょう。

 「Turn off item label」にチェックを入れます。
「Separator for EXIF label」の ： を削除します。

そうすると・・・

まりん
まりん

はい。シンプルな１行表示になりましたね。

ただ、最後の 320 というのは ISO なんですけど・・・
出来ればここは「ISO:320」と表示したいところですね。

これについては、あとでCSSを使ってなんとかしてみましょう。

CSSで「ISO:」を表示しよう

ここまでで、１行のシンプルなExif表示ができましたが、「ISO」という表示がないのがイマイチなので、CSSを使って工夫してみます。

まずは、Exifを表示している箇所のHTMLコードを確認しましょう。

<div id="wp-image-894" class="exif">
	<span class="camera">iPhone 8 Plus </span>
	<span class="focal_length">3.99mm </span>
	<span class="aperture">&#402;/1.8 </span>
	<span class="shutter_speed">1/30s </span>
	<span class="iso">320 </span>
</div>
まりん
まりん

コードを見ると、各表示項目ごとに class が設定されていることがわかります。
ISOの項目は、その名のとおり「ISO」というクラス名が付いているので、それを利用してあげると良いですね。

.iso:before {
  content:"ISO:";
}

クラス「ISO」の前に「ISO:」という文字列を挿入するというCSSです。

まりん
まりん

はい。Exif表示に「ISO:」を追加することができましたね。

画像の右下にExifを表示させる

ゆい
ゆい

これまでのカスタマイズで、KASYAPA みたいな表示ができるようになったけど、やっぱり、PHOTOYODOBASHI 風に画像の右下にさりげな〜く表示できると良いな。できないのかな？

まりん
まりん

なかなか注文がシビアですねぇ・・・
でも、頑張ってやってみましょう！

まずは、HTMLソースを確認

ここで、ひとつ問題点が出てきました。

WordPressでエディターを使って画像を挿入する場合、単純に<img>タグで挿入するか、<a><img></a>のようなリンクで挿入するかの２種類となるのですが、画像の右下に入れ込むような形で Exif を表示するなら、少し工夫が必要になります。

ということで、画像挿入した箇所のHTMLソースを見てみましょう。
WordPressのエディタ（ここでは、テーマ「cocoon」でブロックエディタの「クラシック」を利用）で画像を挿入しており、基本、次のようになります。（細かい部分は省いています。）

<p>
  <a href="https://web.no-koto.net/wp-content/uploads/IMG_8902-scaled.jpg">
    <img src="https://web.no-koto.net/wp-content/uploads/IMG_8902-1024x768.jpg" alt="" width="1024" height="768" />
  </a>
</p>

<p><a><img>タグの組み合わせで画像が挿入されていますね。
これのどこが問題かと言うと、どのタグにもclassが設定されていないので、CSSでExif情報を画像右下に表示させることが出来ないんです。（※もし、方法をご存じの方は、コメントにて教えてくださいませ。）

もちろん、画像挿入するたびに手動で<p>を<div>タグに書き換えて、適宜のクラス名を追記しても良いのですが、それは面倒ですよね。

functions.phpのカスタマイズ

まりん
まりん

なので、画像を挿入すると自動的に<p>を<div>に置き換えて、ついでにクラス名も追記してくれるようにしてみたいと思います。

画像挿入する際に、自動的に<p>を<div class="imageblock"> に置き換えてくれるように、functions.php に次のコードを追記します。

Wordpressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。 

function image_wrap($html, $id, $caption, $title, $align, $url, $size, $alt){
	$html = '<div class="imageblock">'."\n".$html."\n".'</div>'."\n";
	return $html;
}
add_filter('image_send_to_editor','image_wrap',10,8);
【WordPress】記事内に画像を挿入するときのHTMLをカスタマイズする | Wood-Roots:blog
ダッシュボードの「メディアを追加」から画像を選び、「投稿に挿入」をクリックするとimgタグが記事に挿入されます。この挿入されるHTMLをもうちょっと自分好みにできればいいなと思い、編集する方法について調べてみました。PHPコードをfunctions.phpに記...
wood-roots.com

※ 上記の記述をそのまま利用させていただきました。ありがとうございます。

point

カスタマイズ後、画像挿入するとHTMLソースは次のように変化します。
なお、既に挿入されている画像については、元のままです。（あくまでも挿入時に自動変換される仕組み）

<div class="imageblock">
  <a href="https://web.no-koto.net/wp-content/uploads/IMG_8902-scaled.jpg">
    <img src="https://web.no-koto.net/wp-content/uploads/IMG_8902-1024x768.jpg" alt="" width="1024" height="768" />
  </a>
</div>

HTML編集とCSS追記

まりん
まりん

さあ、ゴールが見えてきました。
もうひと頑張りです。

画像挿入した箇所をHTML編集して、</div>の前にExif表示のためのショートコードを追記します。

<div class="imageblock">
<a href="https://web.no-koto.net/wp-content/uploads/IMG_8902-scaled.jpg">
<img class="aligncenter size-large wp-image-894" src="https://web.no-koto.net/wp-content/uploads/IMG_8902-1024x768.jpg" alt="" width="1024" height="768">
</a>

iPhone 8 Plus 3.99mm ƒ/1.8 1/30s 320 

</div>

そして、次のCSSを追加します。

.imageblock {
  position:relative;
}
.exif {
  position:absolute;
  bottom:15px;
  right:10px;
  color:#fff;
  font-size:12px;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.8));
}
まりん
まりん

はい。完成です。
これで、PHOTOYODOBASHI のように画像右下にExif情報を表示させることができました。

下の画像は、実際に挿入した画像にExif情報を表示したものです。

iPhone 8 Plus 3.99mm ƒ/1.8 1/30s 320 

まとめ

まりん
まりん

いかがですか？
画像にExifを表示させると、やっぱり写真ブログらしい雰囲気がでますよね。

iPhone 5 4.12mm ƒ/2.4 1/1085s 50 
SIGMA DP1 Merrill 19mm ƒ/8 1/125s -3/10EV 100 
スポンサーリンク

コメント