サムネイル画像とは記事一覧ページやURLの埋め込み(クラシックで言うブログカード)に表示される内部リンクの画像のことをいいます。AFFINGER6ではこの画像の表示方法が大きく分けて3つ準備されていてなかなか思い通りに設定できないって方も多いのではないでしょうか?
今回はこの3つの表示方法が実際どのように表示されるのかやってみたいと思いますのでもしよかったら参考にしてみてください。
サムネイル画像の元となるアイキャッチ画像
サムネイル画像はアイキャッチ画像を縮小させたものになります。サイズは記事一覧などのサムネイルがガタガタに表示されないよう常に1200px×630px→1200px×675px(アスペクト比:16:9)で統一しましょう。
※テーマver20230501より、サムネイル画像のアスペクト比が1.91:1から16:9に変更されました( ACTION ver20230501アップデートのお知らせ )
- AFFINGER6の場合、デフォルトでPC閲覧時の横幅は1060pxで設定されていて1カラムにした場合はそれ以上。
- アスペクト比
1.91:1→16:9を基準としている。 ステ子が推奨している。
表示方法
最初に表示方法を「円」・「正方形」・「長方形」の3通りの中から選びます。更に選んだ表示方法の画像サイズを選択します。
実際に設定を変えてどのように表示されるか見ていきましょう。記事が複数並んでいる方が分かり易いと思いますので「記事一覧」の設定を変えていきます。
※サムネイル画像の設定は「記事一覧」と「ブログカード・埋め込みURL」に分かれてますので注意しましょう。
丸くする(円)
小サイズ
![円のサムネイル画像設定](https://carefree-find.com/wp-content/uploads/2023/02/c1be6cb3a427d5cef81dde92a8e64668.webp)
![円のサムネイル(小)](https://carefree-find.com/wp-content/uploads/2023/02/390ef994254ceb51491eedbbc56d977b.webp)
中サイズ
![円のサムネイル画像設定(中サイズ)](https://carefree-find.com/wp-content/uploads/2023/02/2f065ef2ab50b2d42613f0116467b18e.webp)
![円のサムネイル(中)](https://carefree-find.com/wp-content/uploads/2023/02/fbc92fac94210fa3433e19c0574db2ba.webp)
大サイズ
![円のサムネイル画像設定(大サイズ)](https://carefree-find.com/wp-content/uploads/2023/02/37cb23b0941a0ac9bf0564241d7b0d46.webp)
![円のサムネイル(大)](https://carefree-find.com/wp-content/uploads/2023/02/c37bd2495957a189bf88acdda76ef6a6.webp)
正方形にする
画像サイズの「中サイズ」・「大サイズ」の選択方法は「円」と同様です。
![正方形のサムネイル画像設定](https://carefree-find.com/wp-content/uploads/2023/02/da730b59d7a0ab2e7894eb98fa9d6c10.webp)
小サイズ
![正方形のサムネイル(小)](https://carefree-find.com/wp-content/uploads/2023/02/c2754a6defcdd8dbb8c0f9c61b2e6b0c.webp)
中サイズ
![正方形のサムネイル(中)](https://carefree-find.com/wp-content/uploads/2023/02/abb32bff963ea0cb06a74c3b5028d1b8.webp)
大サイズ
![正方形のサムネイル(大)](https://carefree-find.com/wp-content/uploads/2023/02/9411db3b208af2dff5f6a262ccf2d30c.webp)
フルサイズにする(長方形)
画像サイズの「中サイズ」・「大サイズ」の選択方法は「円」と同様です。
![長方形のサムネイル画像設定](https://carefree-find.com/wp-content/uploads/2023/02/40d8430c760aa38a8da5796d49598d7c.webp)
小サイズ
![長方形のサムネイル(小)](https://carefree-find.com/wp-content/uploads/2023/02/2bf33baf39ea4f26fc958026f7b05561.webp)
中サイズ
![長方形のサムネイル(中)](https://carefree-find.com/wp-content/uploads/2023/02/40eb0b8a35174201d46a5c205bdf53ff.webp)
大サイズ
![長方形のサムネイル(大)](https://carefree-find.com/wp-content/uploads/2023/02/5bc745f56e9d58ca4b2c9e9b90131ecd.webp)
メディア設定にする
メディア設定は下記検証結果、「フルサイズにする」と同じ画像サイズが表示されます。
![メディア設定のサムネイル画像設定](https://carefree-find.com/wp-content/uploads/2023/02/ee1a3cd1b67af18acaeb2bea6f55c700.webp)
メディア
メディアとは、サムネイル画像の元となるアイキャッチ画像や記事内で画像を使いたいときなどのワードプレスにアップロードした画像を保存しておく場所です。
設定する項目には「サムネイルのサイズ」・「中サイズ」・「大サイズ」があります。ACTIONマニュアルの注意書きには「当テーマとしてはサムネイルサイズ以外は使用していません」ともあります。
![カッツ](https://carefree-find.com/wp-content/uploads/2022/02/e74788fb13d11942f186b4c35422e2b3-300x300.webp)
サムネイル画像の設定で「メディア設定にする」を有効化しても何かしら別設定が影響しているのか設定したサイズ通りには表示されませんでした。
\このサイトで実際に設定していた数値/
![メディア設定](https://carefree-find.com/wp-content/uploads/2023/02/e3e7a1e3f2a345aae3476b3b9ed5ff48.webp)
アイキャッチ画像の横と縦の比率を1.91:1に近くなる合うよう1200px×630pxとしています。サムネイル画像も長方形を使うため比率を意識して幅・高さを合わしています。
メディア設定の「中サイズ」・「大サイズ」の数値をいろいろ変えて検証してみましたが結果は同じ。下図の通りになりました。
\サムネイル画像/
長方形 | 正方形 or 円 | |
フルサイズ | 100×52.5 | 100×100 |
大きくする | 200×105 | 150×150 |
さらに大きく | 300×157.5 | 300×300 |
画像見切れ | なし | 有り |
※表示方法をメディア設定にした場合も同じ結果となりました
\ブログカード・埋め込みURL/
内部リンクのサムネイル画像をそのまま表示にチェック | 内部リンクのサムネイル画像をそのまま表示しない | |
画像(小) | 100×52.5 | 100×100 |
画像(大) | 200×105 | 200×150 |
画像(さらに大) | 300×157.5 | 300×150 |
画像見切れ | なし | 有り |
この結果を踏まえると、ACTIONマニュアルの通り「当テーマとしてはサムネイルサイズ以外は使用していません」=メディア設定の「中サイズ」・「大サイズ」は特に気にせず数値を0に設定して問題無ないかと思います。
その他詳細設定
ポラロイド風にする
![ポラロイド風のサムネイル](https://carefree-find.com/wp-content/uploads/2023/02/11f3111f9782cce55ba1c4732caeab89.webp)
セロテープを付ける
![セロテープを付けたサムネイル](https://carefree-find.com/wp-content/uploads/2023/02/56f90dbe496fd0e94f66dce8a2330a42.webp)
丸角にしたサムネイル
![丸角にしたサムネイル](https://carefree-find.com/wp-content/uploads/2023/02/a42c8f388d419b520055b6be6960175e.webp)
右側に表示させたサムネイル
![右側に表示したサムネイル](https://carefree-find.com/wp-content/uploads/2023/02/06851a756172ae3a3d838c6d732717b1.webp)
おすすめする表示方法
あくまでも個人的な意見になりますが、丸型・正方形のサムネイルにする場合、画像のぼやけや見切れが生じてしまうためサイズを大きくするのは好ましくありません。そのままの画像を表示させるようにしましょう。
フルサイズにする場合は丸型・正方形を使う時とは違って画像を大きくしてもぼやけや見切れは生じませんので大き目のサイズを表示させるようにしましょう。画像が小さ過ぎると見えにくい上に記事抜粋文(画像横に表示される記事紹介文)とのバランスがあまり良くありません。
”ポラロイド風”・”セロテープを付ける”・”画像を右側にする”・”丸角にする”はお好みで設定して問題はないかと思います。
以上、サムネイル設定と画像をきれいに表示させる方法でした。