アイキャッチとサムネイル画像の編集と設定

記事ごとに設定するアイキャッチ画像とサムネイル画像と、その設定についてちょっと説明して行きます。

サムネイル画像とは、ワードプレスの記事ごとに設定できる、縮小されたサイズの画像の事です。

29wptouchなどで、記事を一覧表示した時などに小っちゃな画像が出て来たりしますが、あれがサムネイル画像ですね。

ワードプレスの記事の設定画面でその記事のアイキャッチを設定出来ます。

必ず設定しなければいけないわけでは無いですが、投稿記事毎にサムネイル画像を設定したい場合は忘れないように設定しましょう。

アイキャッチ画像の設定

記事のアイキャッチ画像は、各投稿記事の編集画面で出来ます。

右サイドバーの「アイキャッチ画像を設定」という所をクリックで設定可能です。

その項目が無ければ右上の「表示オプション」から「アイキャッチ画像」にチェックを入れましょう。

画像は投稿と同じようにアップロードするか、ライブラリから選択します。

他にも関連画像がある場合は、ここでアイキャッチ用に専用の画像をアップする必要は無く、すでにアップしてある画像をトリミング（切り取り）して表示する事が出来ます。

まずはトリミングしたい画像を選択、右上の「画像を編集」をクリックします。

次に、画像の上でドラッグする事でトリミングが出来ます。
正方形に切り取りたい場合は、右の縦横比をや選択範囲を見て調整しましょう。

切り取る範囲が決まったら、一番左上にあるトリミングアイコンを押すと切り取りが出来ます。
切り取ったら「保存」を忘れずにクリックしましょう。

これでこの記事のアイキャッチ画像の範囲を指定出来ます。
アイキャッチで使う画像は、すべて範囲をトリミングしておいた方がいいですね。

ちなみにこれらの画像を投稿記事内で使う場合はフルサイズで表示されます。

「アイキャッチ画像　ワードプレス　設定」で検索

画像サムネイルのメディア設定

ワードプレスでは大きな画像をアップロードした場合、それよりも小さなサイズを自動的に生成してくれます。

縮小したサイズを表示する時にわざわざ大きい容量のサイズの画像を呼び出すと、それだけ表示速度が落ちるため、自動的に小さいサイズを選んで出力してくれるってわけです。

例えばこのような設定をしてた場合。

1000×1000のサイズをアップすると、同時に500×500のサイズと、200×200のサイズと、100×100のサイズも自動的に生成してくれます。
それぞれよく使うサイズよりもちょっと大きいサイズで設定しておくと、ページ表示の時に無駄が無いです。

例えば、29wptouchのスマホ表示だと、記事一覧ページで68×68の小さい画像を表示します。
この時、サムネイル生成サイズが150×150に設定してあるより、100×100に設定してあった方が、読み込む画像のサイズが小さくなるため表示速度が向上します。

つまり、サムネイルを100×100以下でしか表示しないのであれば、サムネイル生成サイズも100×100で十分なわけです。
ブラウザによって拡大表示する人もいるので、1.2～1.5倍くらいでの設定がお勧め。

これらの画像再生は、画像をアップロードした時に作られるため、後から設定しても以前の画像は反映されません。

その場合は「Regenerate Thumbnails」という再生成プラグインがあるので、こちらを利用しましょう。
WPプラグイン検索で「Regenerate Thumbnails」で出てきます。

メディア設定については、こちらの記事でも説明しています。
●WordPressの基礎と初期設定

「ワードプレス メディア設定」で検索