下記のページでワードプレスの自作テーマにアイキャッチ画像の表示方法を解説しました。
【ワードプレス】テーマの作り方⑨：アイキャッチ画像を表示する
このページでは、このアイキャッチ画像の「仕組み」を解説します。具体的には、アイキャッチ画像がどのようにして表示されるか、アイキャッチ画像がどのようにリサイズされるかについて解説したいと思います。
仕組みを理解したい方だけでなく、アイキャッチやサムネイル画像のサイズやクロップがうまく制御できない方にも参考になる内容にしていますので、特にテーマ開発者やテーマをカスタマイズしたいという方は読んで見てください。
Contents
アイキャッチ画像が表示される仕組み
まずは簡単にアイキャッチ画像が表示される仕組みについて説明しておきます。
リサイズ画像の生成
アイキャッチ画像は投稿画面から登録できますが、アイキャッチ表示にはこの登録した画像がそのまま使用されるというわけではないです。
まずワードプレスはアイキャッチ画像が登録された時などに、その画像をリサイズした画像を生成します（このリサイズ画像の生成を、以後リサイズ処理と呼びます）。このリサイズ処理では一つだけではなく複数のサイズにリサイズされた複数のファイルを生成します。
このとき、リサイズされる画像のサイズは、the_post_thumbnail に指定可能なキーワードに対応するサイズになります。
ワードプレスには初期状態だと下記のキーワードが存在しますので、初期状態だと最大６つ分の画像が生成されることになります。
- ‘post-thumbnail’ ：アイキャッチ画像をデフォルトのサイズで表示
- ‘thumbnail’ ：アイキャッチ画像を「サムネイルのサイズ」で表示
- ‘medium’：アイキャッチ画像を「中サイズ」で表示
- ‘medium_large’：アイキャッチ画像を「中〜大サイズ」で表示
- ‘large’：アイキャッチ画像を「大サイズ」で表示
- ‘full’：アイキャッチ画像をフルサイズ（アイキャッチとして設定した画像の元々のサイズ）で表示
ただしリサイズ後の画像サイズが同じになって重複する場合は、そのうちの１つのみが生成されることになります（正確には生成されるが、同じサイズの画像ファイルで上書きされてしまう）。またリサイズが行われない場合で後述しますが、リサイズが行われない場合もあります。ですので生成される画像の数が５つとは限りません。
「サムネイルのサイズ」「中サイズ」「大サイズ」の具体的なピクセル数は、ダッシュボード（管理画面）から「設定」→「メディア」で確認することが可能です。
またデフォルトのサイズとは set_post_thumbnail_size 関数で指定したサイズとなります（指定しなかった場合のサイズは忘れてしまいました…）。
実際にアイキャッチ画像を登録してみると、アップロード先のフォルダにいろんなサイズの画像が生成されているのが確認できると思います。
リサイズされた画像は特に設定変更をしていない場合は下記フォルダに生成されます。
- ワードプレスインストールフォルダ/wp-content/uploads/[年]/[月]
また、このキーワードはテーマから add_image_size 関数を実行することで自分で追加することも可能です（add_image_size 関数には後述でもうちょっとだけ詳しく説明します）。
例えばアイキャッチ機能をサポートするための add_theme_support 関数を実行した後に、下記のように add_image_size 関数を実行することで、サイズを表すキーワード ‘my-thumb’ が追加されることになります。
function enable_thumbnail(){
add_theme_support( 'post-thumbnails' );
add_image_size( 'my-thumb', 400, 400, true );
}そして、このキーワードを追加した状態でリサイズ処理が行われると、追加したキーワードに対応するサイズの画像も生成されるようになります。
スポンサーリンク
リサイズ画像の表示
そしてページ表示時に the_post_thumbnail 関数が実行された際には、リサイズ処理により生成されたリサイズ画像を用いて画像の表示が行われます（画像の表示を行うための HTML が出力される）。
the_post_thumbnail 関数にはサイズを表すキーワードもしくはサイズそのもの（を表す配列）を指定して画像の表示サイズを指定することが可能です。
キーワードを指定した場合に表示される画像
特にキーワード指定の場合は、前述の通りリサイズ処理時にキーワードに対応するサイズに合わせてリサイズされた画像が生成されていますので、そのリサイズされた画像が表示（img タグの src 属性で指定）されます。
サイズを指定した場合に表示される画像
サイズを指定した場合は、下記のように表示に使用される画像が選択される（img タグの src 属性で指定される）ようです。
- そのサイズと一致する画像が生成されている場合：その画像を表示
- それ以外：フルサイズの画像を表示（img タグの width 属性と height 属性で表示サイズを指定されたサイズに調整）
srcset 属性にもリサイズされた画像を指定
さらに詳細を説明しておくと、上記は img タグの src 属性の話で、the_poset_thumbnail 関数で出力される HTML には img タグに srcset 属性含まれており、ブラウザのサイズに応じてレスポンシブに表示できるように複数のサイズの画像が srcset 属性で指定されています。
ここで img タグの srcset 属性に指定される画像も、リサイズ処理で生成された画像から選択されます。
最終的にはスタイル設定が適用されて表示
さらにさらに、アイキャッチ画像はページ表示時には CSS で指定されたスタイル属性が適用されて、さらにサイズが変わった状態で表示されることになります。
例えば下記のように style.css に img タグ（もしくはアイキャッチ画像に対する class や id）に対するスタイル設定を行なっておけば、
img {
max-width: 90%;
height: auto;
}ブラウザのサイズによって画像の横サイズが親要素の横サイズを超えてしまう場合には、縮小して表示されることになります。
表示についてまとめておくと、the_post_thumbnail 関数でアイキャッチ画像を表示した際には、まず引数で指定されたサイズに合ったリサイズ処理後の画像を選択し、さらにその画像にスタイル設定を適用した画像が表示されることになります。
またレスポンシブに表示できるように imgset 属性には、ブラウザの横サイズに合わせたサイズの画像が表示できるように、複数のサイズの画像が指定されています。
基本的にアイキャッチ画像が表示される仕組みはこんな感じだと思います（リサイズ処理が行われた後にキーワードに対応するサイズなどを変更したりすると動きが多少変わります）。
アイキャッチ画像がリサイズされる仕組み
次はリサイズ処理時に画像がどのようにリサイズされるかについて解説していきたいと思います。
実際にアイキャッチ画像を登録してリサイズ処理を行わせてみると、「指定したサイズの画像にならない…」「想定したサイズと違う…」と思ったことありませんか？
その謎が解けるように、ワードプレスでリサイズがどのように行われるかについて説明したいと思います。
リサイズに影響するパラメータ
このリサイズ処理におけるリサイズは、基本的に次の３つのパラメータに基づいて実行されます。
- アイキャッチ画像として設定された画像のサイズ
- キーワード（’large’ や ‘thumbnail’ など）に対応するサイズ（add_image_size 関数で追加することも可）
- クロップあり or クロップなし
今後これらのパラメータを画像サイズ（1.）、表示サイズ（2.）、クロップ設定（3.）と呼びます。
クロップというのは、画像の一部分のみを切り出す処理になります。トリミングという呼び方もします。画像のどの部分を切り出すのかも指定することが可能です（後述）。
表示サイズとクロップ設定はサイズを表すキーワード（’large’ や ‘thumbnail’ など）によって決まります。各キーワードに対応する表示サイズについては、前述の通りダッシュボードの「設定」→「メディア」より確認することができます。
各キーワードのクロップ設定については下記のように設定されています。
- ‘thumbnail’：設定による
- ‘medium’：クロップなし
- ‘medium_large’：クロップなし
- ‘large’：クロップなし
- ‘full’：クロップなし
‘thumbnail’ に関してのみ、クロップ設定がダッシュボードの「設定」→「メディア」から設定できるようになっています。
この設定が ‘thumbnail’ のクロップ設定となります。
ワードプレスに元から準備されている各キーワードに対する表示サイズとクロップ設定は下記のようになっています（ワードプレスのバージョンや使用しているテーマによっては違うかも）。
| キーワード | 表示サイズ | クロップ設定 |
| thumbnail | 150 x 150 px | あり |
| medium | 300 x 300 px | なし |
| medium_large | 768 x 0 px | なし |
| large | 1024 x 1024 px | なし |
| full | 画像サイズ | なし |
medium_large は縦方向サイズが “0” ですが、実際には無制限として扱われます。
また、add_image_size 関数でキーワードを追加する場合は、そのキーワードに対する表示サイズとクロップ設定は add_image_size 関数の各引数で指定した値となります。
- 第１引数：表示サイズの横方向ピクセル数
- 第２引数：表示サイズの縦方向ピクセル数
- 第３引数：クロップ設定。false を指定、もしくは省略した場合はクロップなし。true もしくは array でクロップ位置を指定した場合はクロップあり
第３引数に関しては、クロップありのリサイズでもう少し詳しく説明します。
上記の画像サイズ・表示サイズ・クロップ設定によりどのようなリサイズが行われるかについて解説していきます。このリサイズは、クロップ設定に応じて異なった方法で行われます
スポンサーリンク
クロップなしのリサイズ
クロップなしの場合は「アイキャッチ画像として設定された画像」が「表示サイズ」で指定されたサイズの矩形（長方形）に内接するようにリサイズが行われます。
リサイズは縦方向と横方向が同じ倍率で行われ、この倍率は下記により求められます。
- 倍率：下記のうちの小さい方の値
- 表示サイズの縦サイズ / 画像サイズの縦サイズ
- 表示サイズの横サイズ / 画像サイズの横サイズ
リサイズ後画像のサイズは下記のようになります。
- 縦サイズ：倍率 x 画像サイズの縦サイズ
- 横サイズ：倍率 x 画像サイズの横サイズ
内接に接するようにリサイズされますので、リサイズ後の画像は必ず矩形よりも小さいサイズ（もしくは同じサイズ）となり、リサイズ処理で生成される画像は元々の画像全体が含まれた画像となります。
クロップありのリサイズ
クロップありの場合はちょっと難しい…。
クロップありの場合は、下記の順に処理が行われてリサイズ（およびクロップ）が行われるようです。
- 下記のサイズの矩形を作成
- 縦サイズ：画像サイズと表示サイズの縦サイズの小さい方の値
- 横サイズ：画像サイズと表示サイズの横サイズの小さい方の値
- 作成した矩形に外接で接するように画像をリサイズ
- 指定された位置を表示サイズ分クロップ
図で説明した方が分かりやすいと思いますので次は図を使って説明します。
まず下の図のように、画像サイズと表示サイズに基づいて矩形を作成します。
次にその矩形に外接で接するように画像をリサイズします。
クロップなし同様に縦横同じ倍率でリサイズされ、倍率は下記のように計算されます。
- 倍率：下記のうちの大きい方の値
- 表示サイズの縦サイズ / 画像サイズの縦サイズ
- 表示サイズの横サイズ / 画像サイズの横サイズ
リサイズ後画像のサイズは下記のようになります。
- 縦サイズ：倍率 x 画像サイズの縦サイズ
- 横サイズ：倍率 x 画像サイズの横サイズ
外接で接するようにリサイズするため矩形から画像がはみ出ることになります（同じサイズになる場合もあり）。
さらに、表示サイズ分だけをクロップします。表示サイズからはみ出た部分が取り除かれる感じですね。下の図の例では中央部分をクロップしています。
これでキーワードで指定されたサイズの画像が生成されるというわけです。
最後のクロップで画像のどの部分がクロップされるかは add_image_size 関数でサイズを表すキーワードを作成する時に第３引数で指定することが可能です。
第３引数は配列を指定することができ、１つ目の要素で横方向のクロップ位置、２つ目の要素で縦方向のクロップ位置を指定することが可能です。
横方向のクロップ位置としては下記の３つが指定可能です。
- ‘left’：左側
- ‘center’：中央
- ‘right’：右側
縦方向のクロップ位置としては下記の３つが指定可能です。
- ‘top’：上側
- ‘center’：中央
- ‘bottom’：下側
上記以外が指定されると勝手に ‘center’ に置換されてリサイズ処理が行われるので注意しましょう。
また、add_image_size 関数の第三引数に true を指定することができ、true を指定した時は横方向のクロップ位置と縦方向のクロップ位置両方が ‘center’ として扱われ、画像の中央部分がクロップされることになります。
例えば下記のように add_image_size で ‘my-thumb’ を作成し、
add_image_size( 'my-thumb', 200, 200, array( 'right', 'bottom' ) );下図のような横長画像（600 x 300 px）をアイキャッチ画像として登録すると、
リサイズ処理で生成される画像は下の図のように、右側のみがクロップされた画像が生成されることになります。
クロップは画像を拡大して表示サイズをはみ出てしまった部分を取り除く処理です。
ですので、add_image_size 関数の第三引数で横方向と縦方向のクロップ位置を指定したとしても、はみ出ていない方向（つまり矩形に接している方向）にはクロップの位置指定が効きませんので注意しましょう。
リサイズが行われない場合
下記の場合、リサイズ処理時にリサイズが行われず、登録した画像をそのまま使用してページに表示されることになります。
- 表示サイズの方が縦横両方とも画像サイズよりも大きい場合
スポンサーリンク
リサイズ画像の例
最後に、クロップ設定や画像サイズ・表示サイズに応じて実際にどのようなリサイズ画像生成されるかの具体的例を紹介していこうと思います。ここまで説明してきた内容の具体的なイメージが掴めると思います。
もしご自身でリサイズの様子を確認される場合は下記の点に注意してください。
- add_image_size で表示サイズを追加しても、すぐにリサイズ処理は実行されない
add_image_size で表示サイズを追加し、その追加したサイズでアイキャッチを表示したとしても、リサイズ処理がまだ行われていない状態で画像が表示されるので意図した結果にならないケースが多いです。
確実にリサイズ処理を行うためには、add_image_size を追記後に functions.php を保存し、その後アイキャッチ画像を登録し直すようにしてください。登録し直す際は画像のファイル名を変えておくとより確実です。
アイキャッチに設定する画像
アイキャッチに設定する画像は２つ用意しています。
１つ目は下の横長（600 x 300 px）の猫ちゃん画像。
２つ目は下の縦長（300 x 600 px）の観覧車画像です。
これらの画像をアイキャッチ画像として設定し、リサイズ処理を動作させてリサイズ後画像を生成させます。
表示サイズ 200 x 100 px ・クロップなし
表示サイズ 200 x 100 px ・クロップなしのサイズを表すキーワード ‘my-thumb1’ を実行するために functions.php で下記を実行します。
add_image_size( 'my-thumb1', 200, 100 );この状態で猫ちゃん画像をアイキャッチ画像として設定すると、下のような画像が生成されます。
また観覧車画像をアイキャッチ画像として設定すると、下のような画像が生成されます。
リサイズは下の図のようなイメージで実行されます。
観覧車画像のリサイズ後を見てみると分かりやすいと思いますが、画像サイズと表示サイズとで縦長横長関係が逆になると、表示サイズよりもかなり小さくリサイズされる可能性があるため注意しましょう。
表示サイズ 700 x 400 px ・クロップなし
表示サイズ 700 x 400 px ・クロップなしのサイズを表すキーワード ‘my-thumb3’ を実行するために functions.php で下記を実行します。
add_image_size( 'my-thumb3', 700, 400 );この状態で猫ちゃん画像をアイキャッチ画像として設定しても、リサイズ後画像は生成されません。これは画像サイズよりも表示サイズの方が、縦横ともに大きいからです。
また観覧車画像をアイキャッチ画像として設定すると、下のような画像が生成されます。サイズは 200 x 400 px です。
リサイズは下の図のようなイメージで実行されます。
このように表示サイズが大きい場合はリサイズされない場合がありますので注意しましょう。
表示サイズ 200 x 200 px ・クロップあり
表示サイズ 200 x 200 px ・クロップありのサイズを表すキーワード ‘my-thumb2’ を実行するために functions.php で下記を実行します。クロップ位置は左下にしています。
add_image_size( 'my-thumb2', 200, 200, array('left', 'bottom') );この状態で猫ちゃん画像をアイキャッチ画像として設定すると、下のような画像が生成されます。サイズは 200 x 200 px です。アイキャッチ画像として設定した画像の左がクロップされていることが確認できると思います。
また観覧車画像をアイキャッチ画像として設定すると、下のような画像が生成されます。サイズは 200 x 200 px です。アイキャッチ画像として設定した画像の下がクロップされていることが確認できると思います。
リサイズは下の図のようなイメージで実行されます。
画像の中央に描写しているオレンジ枠は、クロップありのリサイズの解説で出てきた画像サイズと表示サイズに基づいて作成する矩形です。
画像サイズよりも表示サイズが縦横ともに小さい場合、その矩形は表示サイズと同じサイズになりますので、クロップすると必ず表示サイズ通りのリサイズ後画像を生成することができます。
またクロップ位置指定は左下にしていますが、実際にクロップされるのは１方向（左 or 下）のみになっている点も確認できると思います。
表示サイズ 500 x 400 px ・クロップあり
表示サイズ 500 x 400 px ・クロップありのサイズを表すキーワード ‘my-thumb4’ を実行するために functions.php で下記を実行します。クロップ位置は左下にしています。
add_image_size( 'my-thumb4', 500, 400, array('left', 'bottom') );この状態で猫ちゃん画像をアイキャッチ画像として設定すると、下のような画像が生成されます。サイズは 500 x 300 px です。
また観覧車画像をアイキャッチ画像として設定すると、下のような画像が生成されます。サイズは 300 x 400 px です。
リサイズは下の図のようなイメージで実行されます。
画像の中央に描写しているオレンジ枠は、クロップありのリサイズの解説で出てきた画像サイズと表示サイズに基づいて作成する矩形です。
縦横のどちら一方が画像サイズの方が表示サイズよりも大きい場合、作成する矩形のその縦 or 横サイズは画像サイズと同じになります。さらに外接するようにリサイズが行われますので、倍率は必ず１になります。
またこの場合は、リサイズ後画像は指定した表示サイズと異なる点に注意しましょう（作成した矩形のサイズになる）。
まとめ
このページではワードプレスのアイキャッチ画像が表示される仕組みと、アイキャッチ画像がリサイズされる仕組みを解説しました。
ワードプレスはリサイズ処理時（特に分かりやすいのはアイキャッチ画像設定時）にリサイズ処理を行なってリサイズ画像を生成します。
ページ表示時には、そのリサイズ画像を用いてアイキャッチ画像の表示を行います。
また、リサイズはクロップなしとクロップありとで処理の仕方が異なります。特にクロップありの場合は、リサイズ時の処理が複雑なので注意しましょう。
