画像は、以下のいずれかを使うことがほとんどだ。
- スマホで撮った写真
- 画面キャプチャ
- 著作権フリーの写真素材
目次
スマホで撮った写真を使う場合
写真をスマホからパソコンに移動させるには、Dropbox経由で移動させると便利だ。
画像キャプチャやモザイクにはこのソフト
Windowsで、画面キャプチャを使って説明する画像作成はネット上で評判の良いScreenpressoを使うことにする。
以下のリンク先からScreenpressoをインストールする。
画像のリサイズとEXIF情報の削除
Windows用では、EXIF削除と画像リサイズがフォルダ単位で一括処理できるリサイズ＆EXIF削除ツール「リサイズ超簡単Pro」がおすすめだ。
リサイズとは
画像のサイズとは画素サイズのことで、すなわち画像のデータ容量となる。これが必要以上に大きい画像とWEBページが重くなり弊害がでる。画像のサイズは表示サイズ以上に大きなものはいらないのでサイズを小さくする必要がある。これがリサイズだ。
EXIF情報とは
自分で撮影した写真には、自動的にEXIF情報が付与されていることが多い。EXIF情報とは、撮影した際の様々な属性情報のことで、撮影場所の位置情報（緯度、経度）も含まれる。この情報が付与されたままの写真を記事にアップしてしまうと、サイト訪問者にその写真の撮影場所が地図で確認することができてしまうので非常に危険だ。
画像を記事へ貼り付ける
WordPressでは、一旦「メディアライブラリ」というサーバー上の場所に画像がストックされ、記事への画像貼り付けは「メディアライブラリ」から記事へ貼り付けることになる。
画像をメディアライブラリにアップロードすると、
- サムネイル 150×150（150x150.jpg）
- 中サイズ 300×225（300×225.jpg）
- 大サイズ 680×510（1024×768.jpg）
- フルサイズ 2592×1944（2592×1944.jpg ←アップした画像サイズ）
とカッコ内の4種類の大きさの画像が生成されてサーバーに保存される。（※大サイズのみ画像サイズ幅1024と表示サイズ幅680が相違しているがなぜだろうか。）
記事作成のときには、このうちどれかを選択して貼り付けることになる。
このサイズ選択の内容はカスタマイズでき、フルサイズ以外は画像が自動生成しないように幅、高さともに「０」を設定しておく。
では、アップロードする画像のサイズはどれくらいが適切なのか？
WordPressの記事の横幅は、テーマ「Simplicity2」ではPC画面で幅680ピクセルだ。
なので、特に理由がなく投稿画面幅いっぱいの画像を貼り付ける時には「大サイズ」の画像を貼り付けることになる。
ブラウザ「FireFox」で画面上のサイズを測るアドオンはこれ。
https://addons.mozilla.org/ja/firefox/addon/539/
結論
画像のリサイズは、幅1024ピクセルにする。
アイキャッチのプラグインをインストール
「Auto Post Thumbnail」は、記事内に貼り付けた最初の画像が自動的にアイキャッチに設定されるプラグインだ。
メディアライブラリに準備する画像はフルサイズ１つであっても、記事に貼り付けた画像を使って自動的に150×150サイズの画像をアイキャッチに適用される。
アイキャッチとは
文字通り目に留まる画像のこと。
記事一覧などで記事タイトルの横に表示することで、記事内容やタイトルについてひとめでイメージをつかむことができる。
本来の操作では、投稿画面の右下に「アイキャッチ画像を設定」ボタンからアイキャッチ画像を設定するが、
プラグインにより、記事内で初めに貼り付けた画像が自動的にアイキャッチ画像として設定される。
アイキャッチフリー素材
ネット上には著作権フリーのアイキャッチ用画像素材が提供されているサイトが多数ある。
もちろん自分で撮影したり画像作成してもよいが、適度に利用するのは有効だろう。
Pixabay
https://pixabay.com/ja/
JETPACKでPhotonをOFFにする
設定した画像がサイトに即反映しない場合、JETPACKのPhotonという画像キャッシュ機能がONになっていることが原因の場合があるので一度OFFにして試してみる。
Photonとは
サイトの画像アクセラレーションおよび編集サービスです。つまり、ホストの負荷が軽減され、読者のためにイメージが高速化される機能。
PhotonをOFFにする方法
jetpack＞設定＞メディア＞画像と写真をスピードアップ をOFFにする。
ヘッダー画像を貼り付ける
サイトのヘッダー画像がないので、画像を貼り付けてみる。
管理画面＞外観＞ヘッダーを開く。
左メニュー＞ヘッダーをクリック。
「新規画像を追加」をクリックして画像を貼り付けようとすると、貼り付け画像のサイズが1070×100px画像に限定されているので「選択して切り抜く」→「画像切り抜き」というボタンが出てきて強制的に切り抜きすることになる。
もし高さ100pxの高さを変更したい場合、「ヘッダーの高さpx（デフォルト：100）」欄の値を100から300などに変更すると、ヘッダーの表示枠が広がるので、そのうえで上記の画像を貼り付け作業をすると、「選択して切り抜く」→「画像切り抜き」の際に、サイズが自動的に高さ300pxの範囲に変更されている。
また、表示高さに収まっている場合は、「切り抜かない」を選択できるようにもなっている。
EXIF情報のチェック
ローカルに保存した画像のEXIF情報は、右クリックで確認することができる。また、Chromeの機能拡張「Exif-viewer」を使うと記事上の画像のEXIF情報を確認することができる。
まちがってEXIF情報付きの画像をアップしてしまった時
サイトに貼り付けた多数の画像からEXIFデータを一つ一つ削除するのは大変な作業だ。
これを一括で処理できるプラグインが「EWWW Image Optimizer」だ。
ただし、私が利用しているxdomainのレンタルサーバーではセキュリティ対策上、execコマンドが使えないサーバー仕様により「EWWW Image Optimizer」が動作しないことが判明した。利用するには「WPX」や「Xサーバー」などの有料の別ラインのサービスへ契約変更する必要があるようだ。
そこで今回は、「EWWW Image Optimizer」でついていた、試用サービスとしてフリーAPIが提供されていて500画像まで無料で利用できるおまけサービスを利用してEXIF情報削除を試みて成功した。今回は画像数が２～300程度だったので対応できたが、もし500以上だったらどうなっていたことかと想像すると冷や汗ものだ。
アップされたEXIF情報は個人情報をさらしつづけていることになるので放置はできるわけもなく、対応の苦慮していただろう。
EXIF情報は必ず削除してから記事に貼り付けることを肝に銘じておこう。
まとめ
記事に使う画像はどうやって用意するの？
- 自分で取った写真を使う
- 自分で画面スクリーンショットや図解画像やイラスト画像を作成する
画面スクリーンショットはScreenpressoがすごい。 - フリー画像素材を利用する
フリー素材はPixabay
画像を使う準備作業
- 撮影した写真をパソコンへ移動するにはドロップボックスが便利。
- 必ずEXIF情報は削除する。
- 画像サイズは利用する最大サイズ（フルHDは1920px×1080px）まで縮小してから使う。
Windows用では、EXIF削除と画像リサイズがフォルダ単位で一括処理できるリサイズ＆EXIF削除ツール「リサイズ超簡単Pro」がおすすめだ。
確認ツールの紹介
ブラウザ「FireFox」で画面上のサイズを測るアドオンはこれ。
https://addons.mozilla.org/ja/firefox/addon/539/
EXIF情報確認ツールは？
ローカルに保存した画像のEXIF情報は、右クリックで確認することができる。
また、Chromeの機能拡張「Exif-viewer」を使うと記事上の画像のEXIF情報を確認することができる。