写真ブログの作り方(画像を魅せるプラグインと写真のEXIF情報の活用)[WordPress]

シェアしていただけるとうれしいです

みなさんこんにちは。さかのうえのまろ(@sakanoueno_maro)です。

本格的に写真を始めたくなって、撮った作品を皆さんに見ていただく場としてブログを選びました。

まろふぉと(写真部) | まろろぐ
「作品紹介」を中心に、「カメラ初心者講座」、「撮影機材」の紹介など、まろろぐフォト部の写真撮影の活動を紹介しています。

「個展を開く」とか「写真集を発売する」というような大層な腕前ではなく、ド素人が楽しみのために手軽に写真を掲載する「場」として、ブログは最適なのではないでしょうか?

文章を発表するためのブログとは違い、写真ブログは「写真が命」。
写真をできるだけきれいに見せるためのブログに仕上げたつもりです。

自分のための忘備録として、「写真ブログの作り方」を残しておきます。

写真を「魅せる」ためのプラグイン

きれいに撮った写真をできるだけそのままの形で読者に見ていただきたいですね。写真を「魅せる」ために使ったプラグインを紹介します。

Easy FancyBox

Easy FancyBox

Simplicityの場合、画像を記事中に貼り付けると、横幅が680ピクセルになります。
そのままでもいいのですが、できればもう少し大きく写真を見せたいもの。

そこで、画像をクリックするとディスプレイ内に大きく拡大表示してくれるjQueryの「FancyBox」というものを使っています。

「FancyBox」自体はJavascriptのファイルで公開されていますので、自分で組み込むことも可能ですが、プラグインを使ってカンタンにインストールすることができます。
幾つかプラグインがあるようですが、「Easy FancyBox」というものを使ってみました。

インストールして有効にするだけで簡単に使えます。

画像を記事中に挿入するときに、リンク先に「メディアファイル」を選ぶだけです。

画像を記事中に挿入するときに、リンク先に「メディアファイル」を選ぶだけです。

画像をクリックすると、下記のように「おしゃれに大きく」表示されます。

画像をクリックすると、下記のように「おしゃれに大きく」表示されます。

Meta Slider

Meta Slider

トップページで、投稿している記事を「スライダー」で魅せるために使っています。

こちらは料理カテゴリの「まろくっく」でも使っていまして、過去記事で導入方法を紹介しています。

ブログのトップページにスライダーを設置する[WordPress]
最近、といいますか、このところ、「スライダー(Slider)」を設置しているブログやサイトを目にする機会が増えました。駅で見かける「電子広

HK Exif Tags

HK Exif Tags

写真を「魅せる」だけではなく、撮影時のカメラの情報を見せるために使っています。

JPEG画像には、写真を撮影したときの

  • カメラの機種
  • 焦点距離
  • 絞り値
  • シャッタースピード
  • 感度(ISO)

などが情報として埋め込まれています。これらの情報を「EXIF情報」といいます。

通常であれば画像を圧縮・最適化するための「EWWW Image Optimizer」などのプラグインを使って「EXIF情報」も削除してしまうのですが、撮影時の情報を「EXIF情報」から取得して表示してくれる「HK Exif Tags」というプラグインを使ってみました。

HK Exif TagsでEXIF情報の表示

このプラグイン、最終更新が3年前ということで、少々古いプラグインで導入に対して不安があったのは事実ですが、ソースを見たところ、JPEG画像からEXIF情報を取り出して表示しているだけなので、悪影響はないと判断して使っています。

元のソースでは、EXIF情報を表示する部分はstyleタグでべた書きされていたので、外部のCSSでデザインを変更できるようにソースを書き換えています。

「wp-content/plugins/hk-exif-tags/hk_exif_tags.php」の187行目を下記のように書き換えます。

Simplicityの子テーマの「style.css」に下記のCSSを追加しました。

撮影日時を追加する(2017/03/22追記)

「HK Exif Tags」は、EXIF情報を取得するために、WordPressの「wp_get_attachment_metadata()」関数を使っています。
参考URL関数リファレンス/wp get attachment metadata

「wp-content/plugins/hk-exif-tags/hk_exif_tags.php」を書き換えて、撮影日時も表示するようにしてみます。

160行目辺りに下記のソースを追加します。

「$imgmeta[‘image_meta’][‘created_timestamp’]」に撮影日時がLinuxタイムスタンプ(1970年1月1日からの秒数)で格納されています。この値をPHPの「date()」関数で「Y/m/d H:i」形式に変換しています。
参考URLdate — ローカルの日付/時刻を書式化する

これを、「HK Exif Tags」の「hk_exif_tags_images_process()」関数の戻り値に追加してやります。

こんな感じで「撮影日時」が追加できました。

EXIF情報から撮影日時を追加

EWWW Image Optimizerなどの画像最適化プラグインを使う場合は

EWWW Image Optimizerなどの画像最適化プラグインを使う場合は、EXIF情報を削除してしまっては撮影時の情報を表示することができません。
そのような場合はEXIF情報を削除しないように設定します。EWWW Image Optimizerの場合はここのチェックを外します。

EWWW Image Optimizerの場合はここのチェックを外します。

写真画像は外部サービスに頼らずに同じサーバーに保存

写真ブログを立ち上げるにあたって、たくさんの写真ブログを拝見しました。

例えば、「はてなブログ」などのブログサービスを使っている方は、画像を保存するための「容量」が厳しいためか、Flickrなどの外部サービスに写真を保存し、その画像を貼り付けている方が多いです。

WordPressを使っている方でも、そうしている方が多いです。
Flickrでも写真を公開できるし、自分のブログでも写真を公開して「一石二鳥」というところなのでしょう。
Flickrから画像をWordPressの記事に挿入できるプラグインもあります。

ぼくもはじめはその方法を取ろうとしたのですが、Flickrでアップしてから自分のブログの記事に挿入するという「手間」が面倒くさかったのと、XSERVERは一番下のX10のプランでも200GBの容量がありますので、今のところ「写真画像でディスク容量を圧迫する」ということは全くありません。

また、Flickrなどの外部サービスを利用することで、画像の読み込みが遅くなったりするという懸念もありましたし、そもそもFlickerがダウンしてしまうと、自分のブログの写真が見えなくなってしまうという懸念もあります。

今のところ、同じサーバー内に写真画像を保存することで、メリットこそ感じていますが、デメリットは感じていません。

写真はリサイズしてからアップロード

とは言っても、写真の画像は半端なく大きいので、そのままアップするとディスク容量を食うことは間違いないし、無駄に読み込み時間がかかってしまいます。

そこで、WordPressにアップする前にすべての写真を横幅1200ピクセルにリサイズしています。

リサイズにはこちらのフリーソフトを使っています。
参考URLリサイズ超簡単!Pro 手順のステップ化,多彩なサイズ指定により,画像を美しく,超簡単にリサイズ! Exif情報にも対応

リサイズ超簡単!Pro 手順のステップ化,多彩なサイズ指定により,画像を美しく,超簡単にリサイズ! Exif情報にも対応

「リサイズ超簡単!Pro」を起動して、【ステップ 1】から【ステップ 5】まで設定をして、「変換開始」ボタンをクリックすると、指定のフォルダにリサイズされた画像ができあがります。

ポイントは、

  • 【ステップ 3】- サイズで、「横サイズ優先」で「1200」(ピクセル)にしているところ。
  • 【ステップ 5】- フォーマットで、
    • 保存品質が劣化しないように「JPG保存品質」を「100」にする。
    • 画像をリサイズするときにEXIF情報が削除されないように、「Exif情報の継承」にチェックを入れる。

です。

あとは写真を撮って記事を投稿するのみ

記事数が増えることで、新しい仕組みを取り入れたくなることも出てくるでしょうけど、今のところはこれらの仕組みで満足しています。

あとは、写真をたくさん撮って、記事を投稿するのみです。

ブログのオリジナリティを高めるために、自分で撮った写真を記事に掲載したいという方も多いと思います。そういった方々の参考になれば幸いです。

では、みなさん楽しいブログライフをヽ(´ー`)

いわゆる「画像直リンク」、画像の複製は固くお断りいたします。
スポンサーリンク

シェアしていただけるとうれしいです

フォローよろしくお願いします

関連記事