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

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

編集するのは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”】を追加します。

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

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

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

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

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

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

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

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

今回の記事ではブログに写真をアップする際の注意点をお伝えしたいと思います。

「できるだキレイ（高画質）に見てもらおう！」と考えた時に写真を大きなサイズのままアップロードすればキレイに見てもらえると思うかもしれません。

しかし、大きいサイズ（横幅3000〜4000ピクセルオーバー）の写真をアップしてもデメリットが多くなるだけです。

大きい写真をアップロードした時のデメリット

• 写真をアップロードするのに時間がかかる。
• ファイルサイズが大きいため、サーバーのストレージを圧迫する。
• ページを表示させるのに時間がかかる。

できるだけ短時間でサクサクとページを閲覧できるほうがユーザーにとって良いサイトになりますね。

写真の最適なサイズとは？

ブラウザの大きさ

そもそもユーザーはどれ位のサイズのブラウザを使っているのでしょうか？

下の画像はこのサイトの1ヶ月のアナリティクスの【画面解像度】の集計結果です。

最も多いのが【320 x 568ピクセル（スマートフォン）】で16％。その次が【1920 x 1080ピクセル（フルHD）】12％。最も解像度の高い【2560 x 1440ピクセル（WQHD）】は3％未満です。

スマホからのアクセス増

下の画像はPC（デスクトップ）、モバイル、タブレットのアクセスの割合を表した分布図です。スマートフォンからのアクセスがPCと肩を並べつつあります。

ブログでは大きなサイズの写真は必要ない

もちろん例外もあります。例えばカメラメーカーやレンズメーカーが、どれだけ写真の解像度が高いかをアピールしたい時に、写真のオリジナルファイルをHPにアップする場合があります。

当然、それらの写真をクリックすると思いっきり拡大された写真がブラウザに表示されます。横や縦にスクロールしなければ写真全体を見ることができません。

もしかすると「写真の細かな部分まで見たい！」という熱心なユーザーもいるかもしれません。

しかし、PCの小型化やスマホやタブレットユーザーが増加する時代に、個人の写真ブログでオリジナル写真ファイルをアップロードする必要は無いように思います。

写真ファイル容量の大きさ

下の画像は写真フォルダからランダムで10個の写真ファイルをピックアップしたものです。画像の縮小はされていません。SIGMA QUATTROで撮影された写真は【5,424 x 3,616ピクセル】と非常に大きな写真です。

写真10枚でファイルサイズが126MB。とても大きいですね。

今度は同じ写真を1920 x 1080ピクセルに縮小して書き出して見ました。※アスペクト比が合っていないので正確に1920 x 1080になってませんのでご了承ください。

サイズを小さくすると126MBから一気に4.3MB（約1/30）に縮小されました。

サイズ縮小前（4,896 x 3264）と（1,620 x 1,080）後のファイルサイズを比較してみました。

13.5MB→359KBまでサイズが縮小されます。

FullHDサイズ（1920 x 1080ピクセル）あればPCで閲覧するには十分なサイズと言えるのではないでしょうか。

FUJIFILM X-E2 (23mm, f/2, 1/250 sec, ISO800)

更に写真ファイルサイズを小さくする

「ちりも積もれば山となる。」ブログに掲載される写真の量が増えれば、写真ファイルだけで数メガから数ギガに達するかもしれません。

JPEG miniというソフトを使えば、縮小された写真を画像劣化することなく更にファイルサイズを小さくできます。

JPEG mini

Mac/Windowsで使えるソフトです。

JPEG mini

JPEG mini Liteという無料版もあります。まずは無料版で画像劣化することなく、どれ位ファイルが小さくできるか試してみてはいかがでしょうか。

 JPEG miniの使い方

使い方は非常にカンタン。JPEG miniを起動すると黒いウィンドウが表示されます。

ファイルサイズを小さくしたい写真を黒いウィンドウの中にドラッグ・アンド・ドロップします。それだけでPL。

写真10枚をJPEG miniを使いファイルサイズ小さくしてみました。すると4.3MBが2.5MB（1/1.7）まで縮小されました。この差は大きいですね。

適切な写真サイズとファイルサイズのダイエットを行いブログに写真を掲載したいものですね。

ブログの使い勝手の良し悪し

まずはプラグインを導入する前の状態です。

プラグイン導入前

写真をクリックした時の挙動

写真をクリックすると別のページにジャンプしてしまいます。写真を大きく表示することはできますが前のページに戻るときには「戻るボタン」をクリックしなければなりません。

さらに前のページが最初から読み込まれるためページのロードに時間がかります。使い勝手が非常に悪いブログになってしまいます。

WP Lightbox 2

別のページにジャンプすることなく、現在のページでブラウザの横幅いっぱいに写真を表示できるプラグインです。

プラグインダウンロードリンク

WP Lightbox 2をインスタントし有効化させるとWP Lightbox 2の設定画面が追加されます。設定画面は【設定】→【WP Lightbox 2】の中にあります。

それぞれの設定項目の説明です。

WP Lightbox 2の設定

• Auto-lightbox Image links  →  写真をクリックした時にLightBox表示になります。
• Enable lightbox in comments →  コメント内の写真をクリックした時にもLightBoxが有効化されます。
• Show download link →  「ダウンロード」のリンクをLightBox内に表示。
• Target for download link: →  「ダウンロード」のリンクをクリックした時、【_blank】に設定すると別タブ（別ウィンドウ）にジャンプします。
• Show image info on top →  チェックを入れると画像情報が写真の上に表示されます。（チェックを外すと写真の下に。）
• Shrink large images to fit smaller screens →  ブラウザの横幅に写真をフィットさせて表示させます。（チェックを外すと画像サイズが大きい場合、ウィンドウから写真がはみ出ます。）
• Animation duration →  LightBoxに変化する際のアニメーションの継続時間。100〜300くらいが調度良いと思います。
• Help text →  注意事項や備考などを表示させたいときに。（Photo by dafuku など。）

【Show image info on top】にチェックを入れ、【Help text】に文字を入力した状態です。

【Show image info on top】のチェックを外し、【Help text】を空にした状態です。

WP Lightbox 2のプラグイン導入後のサンプルです。

 WP Lightbox 2サンプル

今回の記事ではExifを自動表示できるプラグインとその使い方をご紹介いたします。

 使用するプラグイン

HK Exif Tags

プラグイン無しの状態だと写真が表示されているだけです。

サンプル

Exif情報を表示するのに最適なプラグインです。使い方はカンタン。インストール後に有効化するだけです。

HK Exif Tags有効化後は写真の下にExif情報が自動的に表示されます。

サンプル

Exif情報の内容

表示されるのは5つの情報です。

1. カメラ機種
2. 実焦点距離
3. F値
4. シャッタースピード
5. ISO感度

レンズ名を表示させる

自動的に表示されるのは実焦点距離なので、レンズ名は表示されません。しかし、プラグインを利用し特定の文字列を置換することでレンズ名を自動で表示することができます。

Real-Time Find and Replace

Real-Time Find and Replaceというプラグインをインストール→有効化させます。

ツールの項目にReal-Time Find and Replaceが表示されます。【Add】をクリック。

四角い枠が2つ表示されます。左側に置換前の文字列。右側に置換後の文字列を入力します。

56mmの実焦点距離といえばFUJINON XF56mm F1.2Rです。なので、『56mm』を『XF56mm F1.2 R』に置換します。

置換する文字列はHTMLのソースの中から探します。

• Windows Chromeの場合→Control ＋ U（右クリックでソースを表示）
• Mac Chromeの場合→Control ＋ Option ＋ U

注意しなければならない点は、単純に置換前の文字列を『56mm』に指定してしまうと、記事中の『56mm』という文字が全て変換されてしまいます。

なので変換前、変換後の文字列を下記のように指定しました。

• 変換前→(56mm,
• 変換後→(XF56mm F1.2R,

置換後の文字列を見てみると『56mm』が『XF56mm F1.2R』になりました。

他のレンズも同様に実焦点距離をレンズ名に置換してみます。

• 18.3mm→GR Lens 28mm
• 60mm→XF60mm F2.4R macro

設定例

変換後はExif情報がこのように表示されます。（※訂正Lenz→Lens）

サンプル

ズームレンズの場合

GRやXF56mm、XF60mmは単焦点レンズなので実焦点距離は固定です。しかしズームレンズはズームすれば焦点距離がかわります。もしズームレンズを使って偶然にも焦点距離が56mmや60mmになってしまった場合は文字列がマッチしてしまうので、置換されてしまいます。

また、XF18-55mmやXF18-135mmに置換したい場合だと実焦点距離毎に1mmずつ置換作業をしなければならないのは実用的ではないですね。

なので、Real-Time Find and Replaceを使いレンズ名を表示させる場合は単焦点レンズのみの方が良いと思います。

最初にやる事は、このテンプレートを使いサンプルの写真を何枚か入れてみてブログの雰囲気を確かめて見ることをオススメします。写真を入れることで、テンプレートの雰囲気、特徴を実感する事ができます。

写真を追加する

最初の投稿記事のタイトルは『HELLO WORLD！』となってます。その下に【編集】というリンクが張ってあるのでクリックしてみます。

【メディアを追加】をクリック。

メディアを挿入する画面に変わります。

写真をウィンドウの枠の中にドラッグします。

写真がアップロードされます。

写真を記事の中に挿入する時は右下の【投稿に挿入】ボタンをクリック。

記事に写真を反映させるには【変更をプレビュー】ボタンをクリック。

ウィジェットの削除

見た目の問題ですがサイドバーのウィジェットは、いつでも追加／削除できます。不要なウィジェットは削除しました。

写真がこんな感じで反映されました。しかし写真が上下くっついてしまっており、見た目がイマイチですね。

写真の下にスペースを空ける

写真の右側にカーソルを持って行き、エンターキーを押すと写真の下に空行が入ります。

写真の下にスペースが作られました。バランスがよくなりましたね。

アイキャッチを設定する

忘れては行けないのがアイキャッチ画像です。アイキャッチ画像は記事一覧に表示される画像に使われたり、やFacebook、TwitterなどのSNSに投稿された時に表示されるサムネイルの役割を果たします。重要な設定なので必ず行うようにしましょう！

設定方法はカンタンです。右下の【アイキャッチ画像を設定】をクリック。

アイキャッチ画像を選択するか、アップロードします。

アイキャッチ画像が設定されると下の画像ような状態になります。

デフォルトのテーマにアイキャッチ画像を設定してみました。記事先頭に写真が大きく表示されインパクトが出ます。

テーマを追加する

デフォルトのテーマを変更してみます。【外観】のメニューから【テーマ】を選択。

【新規追加】ボタンをクリック。

検索窓に「Photo」や「Pinterest」などのキーワードを入れて検索すると写真ブログ風のテーマが見つかります。

無料で使える写真ブログテーマ

私がチョイスしたオススメの写真ブログテーマをご紹介いたします。全て無料で使えます。

Fukasawa

ダウンロードリンク

IH Photographer

ダウンロードリンク

Alizee

ダウンロードリンク

Garfunkel

ダウンロードリンク

Pinbin

ダウンロードリンク

WordPressのテーマは他にも沢山あります！いろいろ検索してみてくださいね！！「コレだ！！」というテーマに出会える事を祈ってます！

バージョンを最新版にする

インストールされたWordpressは最新でない場合があります。メニューバーの矢印の数字は更新できるテーマやプラグインの数を表してます。

このマークをクリックします。

『いますぐ更新』ボタンをクリックするとWordpressが最新版になります。

『Wordpressは正常に更新されました』と表示されます。再度、ログインし直します。

プラグインの更新

WordPressの更新を終えたらプラグインも更新しておきましょう。「プラグイン」とはWordpressに便利な機能を追加できるものです。チェックをいれて『プラグインを更新』ボタンをクリック。

プラグインの有効化

注意点はプラグインは『有効化』させなければサイトに反映されません。プラグインはインストールと有効化をセットで行います。

Akismetを有効化

ブログに限らず、世界中にあるホームページはスパムに狙われます。そのスパムをほぼ100％に近い数字で防いでくれる便利なプラグインがAkismetです。

WordPressには必須のプラグイン。スパムを防ぐために必ず有効化させておきましょう。

『Akismet アカウントを有効化』ボタンをクリック。

Akismet API キーの取得方法

Akismetを有効化させるにはAkismet APIキーが必要です。『APIキーを取得』ボタンをクリック。

別サイトにジャンプします。『Get an Akismet API Key』をクリック。

アカウントを作成します。下記項目を入力。

• メールアドレス
• ユーザー名
• パスワード

続いて【Approve（承認）】をクリック。

「Name your price」の下の【SIGN UP】をクリック。

スライドバーを一番左に移動させます。

氏名（First name）（Last name）を入力→【CONTINUE】をクリック。

Akismet API キーが表示されます。その下の【Same your Akismet API Key】をクリック。

無事にAkismetプラグインが有効化されました。

WordPressの新規サイトを表示

WordPressのバージョンアップ、プラグインの更新・有効化、Akismetの有効化を済ませたらサイトを表示してみましょう！左上のホームページの名前の部分をマウスでドラッグすると『サイトを表示』が出てくるのでクリック。

WordPressで作成したサイトが表示されました。写真を掲載したり記事を書いたり、好きなテーマにしたりとブログを作り始められる状態になりました。

次の記事では写真ブログにオススメのWordpressテーマを紹介いたします！

WordPress対応のレンタルサーバー比較

写真ブログはテキストメインのブログよりも多くのデータ容量を使用します。1つの記事に1000文字入力すれば1000バイト（約1KB）ですが、写真は1枚アップロードすると数百キロバイト〜数メガバイトになります。

写真データの保存容量

もちろん、フォーマットや画像サイズによって写真のデータ量は変わりますが「写真をタクサン、しかも高画質で掲載したい！」という場合には、ある程度の容量を確保しておく必要があります。

仮に写真1枚のデータが300KB（キロバイト）だとすると、、

• 100枚：29MB
• 1,000枚：293MB
• 10,000枚：2.8GB
• 100,000枚：28GB

というデータ量になります。

注意点

写真データをアップロードすると同時にサムネイル用の画像（オリジナルの写真よりも小さいサイズの写真）も自動的に生成されます。

その他、Wordpressのプラグインやテンプレートを使用するときも、多少データを消費するので余裕を持って多目に見ておきましょう。

比較表(全てWordpress対応)

以下のレンタルサーバーは全てWordPressに対応しており、且つインストール操作がとてもカンタン。初めてレンタルサーバーを使う人にはハードルが低めです。

※2014年11月23日現在

この中でオススメのプランは500円／月、容量120GBのチカッパプランと980円／月、容量200GBのGMO SD-11プランです。もし、ブログをこの先数十年〜運営するとなると50GBでは多少、不安があります。

また、データのバックアップも考慮しなくてはいけないので、その分の領域は残しておかなかればなりません。そう考えると100GB以上は確保しておきたいです。

100GBあれば動画ファイルも余裕で保存しておけますね。

CameraBlogの場合

このブログはKDDIのCPIレンタルサーバーを使って運営されてます。

CPIシェアードプラン（容量無制限）

プラン	料金	容量
CPIシェアードプランACE01	3,880円／月(年払い)	無制限

掲載する写真の数が多いのと、今後数十年運営していくことを考えると一番不安になるのが容量問題。CPIのシェアードプランなら容量無制限なので不安材料が一つ減ります。

サイトの運営開始時期2014年4月〜11月（7ヶ月）の期間で既に3,480MB（34GB）使用済み。

• 1年後：57GB
• 10年後：570GB
• 30年後：1,700GB

数十年後のことを考えると膨大なデータ量になりますね。料金は高めですが最終的にこのレンタルサーバーに決めました。ただ、一般的にはこれ程の容量は必要ないと思うので参考までに。

WordPressを使うメリットとデメリット

WordPressで写真ブログを始める前にメリットとデメリットをおさえておきましょう。

デメリット

• 広告非表示の場合お金がかかる。
• メンテナンス（バージョンの更新作業）を自分で行う必要がある。
• 操作になれるまで時間が必要。

レンタルサーバーによっては、無料でWordpressが使えるものもあります。しかし、広告が表示されてしまうことがあります。また、Wordpressは定期的にバージョンがアップしてます。

特にバージョンを上げる際に難しい操作は必要ありません。（何回か指示に従ってクリックするだけでOK）

データベースやファイルのバックアップはフリーのプラグイン（Wordpressの追加機能）を使用すればOK。

メリット

• 情報が豊富。（分からないことがあってもGoogleで検索すれば情報が出てくる）
• テンプレートが豊富。
• ブログサービス（amebloやfc2、excite blog）に依存しないので、ブログ管理機能を全て自分でコントロールできる。
• ほとんどのレンタルサーバーにWordpressインストール機能がついており、知識がなくてもすぐに始められる。
• 写真をブラウザに大きく表示したり（LightBox）Exif情報を表示することもプラグインを追加することで可能。
• 画像を添付してコメントができる（プラグイン使用）

テンプレートが豊富

WordPressはとにかく無料で使えるテーマが豊富です。国内外問わず美しいデザインのテーマに満ち溢れてます。選ぶのに時間がかかりそうです。

LightBoxプラグイン

プラグイン（Wordpress追加機能）を使えば写真をクリックした時に別ページにジャンプすることなく画面いっぱいに写真を表示できます。

Exifデータ自動表示

写真家としてはExifデータ（カメラメーカー、レンズ、絞り、シャッタースピード、ISO感度）は是非知っておきたい情報です。

掲載した写真に手入力でExifデータを入力するのは面倒な作業です。しかしWordpressのプラグインを使用すれば自動でExif情報を表示できます。

WordPressのインストールがカンタン！

数年前まで、Wordpressをサーバーにインストールする作業はとても大変でした。自分でデータベースを作成し、設定ファイルを書き換える必要がありました。

しかし、現在ではWordpressを使うハードルがグッと下がりわずか数クリックでWordpressをインストールするすることができるようになりました。

「Wordpressカンタンインストール（クリックだけでインストールできる）」に対応したサーバーも今では当たり前になりつつあります。

まず最初に何から始めるか！？

WordPressを使うにはレンタルサーバーの契約が必要です。レンタルサーバーも種類が沢山あり、どれを選んでよいのかわかりません。次の記事では写真ブログをWordpressで始めるためのオススメのレンタルサーバーを紹介します。