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

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

写真ブログの作り方

1ヶ月ほど前、新しく写真ブログを立ち上げました。

https://photo.maro-log.net/

photo.maro-log.netは「まろろぐ」に統合しました。
まろろぐ
あなたもまろろいでみませんか?

本格的に写真を始めたくなって、撮った作品を皆さんに見ていただく場としてブログを選びました。
「個展を開く」とか「写真集を発売する」というような大層な腕前ではなく、ド素人が楽しみのために手軽に写真を掲載する「場」として、ブログは最適なのではないでしょうか?

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

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

スポンサーリンク

テーマとスキン

WordPressのテーマには、使い慣れた「Simplicity2」を選びました。

Simplicity
Wordpressテーマ「Simplicity(シンプリシティー)」を作成しました。 Simplicityには主に、以下の7つの特徴があります。 シンプル 内部SEO施策済み 拡散のための仕掛けが施されている 端末に合わせた4つの

Simplicity2を選んだ理由として、「使い慣れている」他にも

  • デザインがシンプルであること
  • 設定に関してかゆいところに手が届くこと
  • SEOに対して強いこと
  • 動作が軽快であること

が挙げられます。

また、Simplicity2には「スキン」という機能があって、スキンを選ぶだけである程度大まかなデザインを選ぶことができるというメリットがあります。
他のテーマのように、一から自分でデザインを作り込んでいくという手間が省けます。

Simplicityのスキン機能

写真を目立たせたいために、「シック」という「白黒」をメイン基調にしたスキンを選択しました。

ヘッダー画像をディスプレイの横幅いっぱいに広げるために、こちらの記事を参考にしています。

Simplicityに画面幅いっぱいのヘッダー画像を設定する方法
Simplicity1.4から、テーマカスタマイザーだけで、以下のような画面幅いっぱいのヘッダー画像を設定できるようになりました。 このヘッダー画像をブラウザ幅いっぱいにするカスタマイズ方法は、フォーラムなどにも結構問い合わせがあったの

ヘッダー画像をディスプレイの横幅いっぱいに広げる

ここまで、CSSなどを一切使わず、カスタマイザの機能ですべて設定することが可能です。

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

写真をきれいに見せたいために、画像を圧縮・最適化するための「EWWW Image Optimizer」などのプラグインは使っていません。
多少ページの読み込み速度がおそくなったとしても、画像が荒くなってしまっては元も子もありません。

写真を「魅せる」ために使ったプラグインを紹介します。

Easy FancyBox

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

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

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

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

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

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

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

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

Meta Slider

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

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

ブログのトップページにスライダーを設置する[WordPress]
ブログのトップページにスライダーを設置する[WordPress]
8月にぼくのブログの本家「まろろぐ」から分離させた 「まろくっく」というブログがあります。もともと「まろろぐ」の中のカ...

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がダウンしてしまうと、自分のブログの写真が見えなくなってしまうという懸念もあります。

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

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

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

Flickrが画像の幅1800ピクセルにして保存しているようなので、WordPressにアップする前に、すべての写真を1800ピクセルにリサイズしています。

2017/03/25 訂正
Flickrで、サイズはいろいろ指定できるそうです。

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

リサイズ超簡単!Pro 手順のステップ化,多彩なサイズ指定により,画像を美しく,超簡単にリサイズ! Exif情報にも対応
画像をリサイズするときにEXIF情報が削除されないように、「Exif情報の継承」にチェックを入れています。

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

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

あとは、写真を撮りまくって、記事を投稿するのみです。
たまに「まろふぉと」もご覧いただけるとうれしいです。

まろふぉと
カメラ初心者のまろろぐフォト部

また、春になって写真を始めたいという方もたくさんいらっしゃると思います。
そういった方々に、写真ブログを立ち上げる際の参考になれば幸いです。

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

WEBのシステムを作ったり保守したりするSE/プログラマというものをしています。
ブログやってますがブロガーではありません。週末WEB随筆家です。
まろと呼んでください。
スポンサーリンク

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

フォローしていただけるとうれしいです