LightboxにExifを表示させる方法

  • このエントリーをはてなブックマークに追加
  • Pocket
LightboxにExifを表示させる方法

前回の記事では写真をクリックした時、写真を拡大表示させるプラグインをご紹介しました。LightBoxで写真を拡大表示することはできますが、Exif情報は表示することができません。

 WP Lightbox 2有効化サンプル

Exifを表示

LightBoxの写真情報にはExifデータの表示がありません。ユーザービリティーを高めるため、LightBox内にExifデータを表示させます。

Exifが表示されない

【HK Exif Tags】のプラグインを一部、編集します。/wp-content/plugins/hk-exif-tags の中にhk_exif_tags.phpというファイルがあるのでテキストエディタなどで開きます。

LightBoxプラグインを編集

編集するのは187行目あたりにある部分です。

変更前

$result = $matches[0] . '<span style="display:block; color:#888; font-size:small; font-weight:normal;">';
編集するコード

変更後

$result = $matches[0] . '<span style="display:block; color:#888; font-size:small; font-weight:normal;" class="wp-caption-text">';

【class=”wp-caption-text”】を追加します。

wp-caption-textを追加

テーマのCSSによっては【wp-caption-text】というクラスが影響をうけるため、Exif情報が中央寄せ、左寄せになる場合があります。

編集後

HK Exif Tagsのプラグインを編集後、ページを更新して写真をクリックしてみると、LightBoxにExifデータが表示されるよになります。

Exifが表示される

左寄せになってしまったExifデータを中央寄せにします。すでにwp-caption-textというクラス名がstyle.cssのファイルに存在しているため、このファイルの中身を編集します。

テキストを左寄せ

css(レイアウト)を変更する際にはChromeのデベロッパーツールを使い、プレビューしながら行うとラクです。

中央から左寄せに

style.cssをテキストエディタで開き、wp-caption-textの内容を変更します。

text-align:center; → text-align:left;

CSSの編集

Exif情報が左寄せになりました。

修正後

サンプル

CSSが反映されてない場合はF5で更新してみてください。

この記事で使用/紹介された機材
コメント

関連記事

この記事の著者

栃木県日光市出身。O型の水瓶座。
プログラマーとして都内のWEBクローラー開発会社に勤務。
WEBの設計〜デザイン、WEBアプリ作成、コーディング、SEO、広告出稿関連業務、蛍光灯の交換、写真係を担当。
2012年から始めたブログ(ダーフク.com)にて記事掲載用の写真を撮影するために購入した単焦点コンパクトデジタルカメラRICOH GR Digital Ⅳにハマる。それ以来、ブログ上でカメラに関する記事を書き始め、現在に至る。

この著者の最新の記事

コメント

  1. コメントはコチラからどうぞ!

  1. この記事へのトラックバックはありません。

コメント

※コメントの投稿について
  • 画像がアップロードされるまで時間がかかる場合があります。
  • 返信される際は、「このコメントに返信する」ボタンを押して、コメントをご記入ください。
  • この記事の著者

    Google+CameraBlog

    最近のコメント

    Twitter

    ページ上部へ戻る
    Top