eN戦記

review and others blog

HK Exif Tagsをカスタマイズして写真に重ねてExif情報を表示する【WordPress】

投稿日:2019/11/22

カテゴリ:WEB カメラ

タグ:

SONY ILCE-7R (35mm, f/2.8, 1/500 sec, ISO100)

WordPressで↑の様に写真に重ねてExif情報を表示する方法を紹介します。

exif表示用のプラグイン「HK Exif Tags」を多少カスタマイズして表示位置をずらしますが、プラグインのphpを編集したり、テーマによって調整が必要なので、多少HTML+CSSに精通していないと難しいかもしれません。予めご了承ください。

HK Exif Tagsをインストール

プラグインを新規追加から「HK Exif Tags」を検索し、インストール+有効化します。

デフォルトの状態では、画像の下にspanタグでexif情報が生成されます。

この状態の見た目で問題ない人は、設定をいじる必要はありません。

phpを編集

$result = $matches[0] . '<span style="display:block; color:#888; font-size:small; font-weight:normal;">';
$result = $result . $pmake . ' ' . $pcamera . ' (' . $pfocal_length . ', ' . $paperature . ', ' . $pshutter . ', ' . $piso . ')';
$result = $result . '<br></span>';

プラグインエディターから「hk_exif_tags.php」を開きます。187~189行目に生成されるHTMLが書かれています。

phpの編集は関係ない部分を消してしまったリすると、管理画面にログインできなくなったりしますので、自信のない方は触らない方が無難です。万が一「hk_exif_tags.php」を弄ってエラーがでてしまった場合は、WordPress.orgからHK Exif Tagsをダウンロードしてきて、FTP経由で「hk_exif_tags.php」を上書し、初期化しましょう。

$result = $matches[0] . '<span class="exif">';

187行目のspanタグに適当なクラスを付けstyleを消します。styleの内容はテーマファイル(style.css)内に記述していきます。(「style=””」の形式でデフォルトのようにphp内に書いても大丈夫です)

(このプラグインは6年ほど更新されてませんが)phpファイルはプラグインをアップデートすると上書きされてしまう場合があるので注意してください。デフォルトのspanに対してcssを適用できるHTML構造をしてるテーマなら、cssだけの編集でもいけると思います。article>span{ }で指定など

CSSサンプル

.exif{
 display: block;
  color: #fff;
  text-shadow: 0 0 2px #333;
  font-size: 10px;
  position: relative;
  top: -30px;
  left: 10px;
  text-align: left;
}

画像の左下にexifを表示する例。テーマのCSS(style.css)に追記してください。
お使いのテーマの余白などにより位置がずれる場合があるので、適宜調整してください。

.exif{
 display: block;
  color: #fff;
  text-shadow: 0 0 2px #333;
  font-size: 10px;
  position: relative;
  top: -30px;
  right: 10px;
  width: 100%;
  text-align: right;
}

右下に表示したい場合は、画像に指定されている横幅(widht)と、.exifのwidthを揃えてください。

画像の横幅がばらばらの場合は、この方法だと難しいかもしれません。imgとspanをdivで囲えればdivに対して絶対位置指定で右下に表示できてスマートな気がしますが、imgも巻き込んでdivを出力するのは難しいと思います。

PR

筆者

eN

フリーランスでウェブデザイナーをしています。資格:2級ウェブデザイン技能士、第二種電気工事士
ご意見、ご要望などありましたらお問い合わせよりお気軽にご連絡ください。

Amazon

カテゴリ:WEB カメラ

タグ:

投稿日:2019/11/22

^