今回は記事一覧内のサムネイル画像の設定を解説をします。
設定画面でいうと下の箇所です。
サムネイルとは
サムネイル画像とは記事一覧やブログカードに表示される小さいアイキャッチのことです。
完成図
完成図はこんな感じです。
１、サムネイル画像を表示しない
２、正方形コース × 小サイズ
２、正方形コース × 小サイズ(丸)
３、正方形コース × 中サイズ
(省略)
４、長方形コース × 中サイズ
５、長方形コース × 大サイズ
サムネイル画像の設定手順
設定方法を紹介します。
手順１：設定画面へ移動
まずは設定画面へ移動します。
ここに移動してください。
これらの設定を整理すると３つの項目に分類されます。
- 使用する画像に関する設定
- 表示サイズに関する設定
- デザインに関する設定
この順番に解説していきます！
サムネイル画像を表示しない？
サムネイル画像を表示しない人はサムネイルを非表示にできます。
そういう人は話が早い！一番下のサムネイル画像を表示しないにチェックを入れてください。これで設定完了です！
手順２：使用する画像に関する設定
手持ちのサムネイル画像からどれを使うか選びます。
アイキャッチ画像はアップロードするときに裏で何枚か違うサイズのものがコピー生成されているんです。そのうちのどの画像を使うか決めます。
次の３枚の画像がコピー生成されています。(覚えなくていいです。)
手札の紹介
- フルサイズ(アップロードしたそのままのサイズ)
- サムネイル(小さく収縮されたサイズ：「メディア」の「サムネイルサイズ」で設定したサイズ)
- 150pxの正方形(自動で生成される。AFFINGERの独自サイズ)
前回の記事で選んだコースを思い出してその設定に変更してください。
正方形コース × 小サイズ
「正方形コース × 小サイズ」の人は150サイズの画像を使用します。
150サイズの画像を使うには丸くするか正方形にするを選びます。どちらか好きな方を選んでください。
正方形コース × 小サイズ以外
「正方形コース × 小サイズ」以外の人はサムネイル(もしくはフルサイズ)の画像を使用します。
前回の記事(アイキャッチ画像のアップロードの仕方！サムネイル画像を生成しながら)でサムネイル画像を生成する設定をした人はサムネイル画像を使用します。サムネイル画像はメディア設定にするにチェックを入れると選択できます。メディア設定＝サムネイル画像。
サムネイル画像を設定していない人はフルサイズを使用します(フルサイズは読み込みが遅くなります)。フルサイズにするを選ぶと選択できます。
まとめるとこんな感じです↓
| コース／サムネイルの横幅 | 小サイズ | 中サイズ | 大サイズ |
|---|---|---|---|
| １、正方形コース | 丸くする or 正方形にする※1 | メディア設定にする※２ | - |
| ２、長方形コース(インフィード広告使わない) | - | メディア設定にする※２ | メディア設定にする※２ |
| ３、長方形コース(インフィード広告使う) | - | メディア設定にする※２ | メディア設定にする※２ |
手順３：表示サイズに関する設定
サムネイルの表示サイズを小、中、大の３種類から選びます。
前回の記事で選んだコースを思い出してその設定に変更してください。
小サイズを選んだ人
小サイズを選んだ人はどこにもチェックを入れなくても大丈夫です。
中サイズを選んだ人
中サイズを選んだ人はPC（960px以上）のサムネイル画像を大きくするにチェックを入れます。
大サイズを選んだ人
大サイズを選んだ人はPC（960px以上）のサムネイル画像を大きくするにチェックを入れて一旦Save。その上でサムネイル画像をさらに大きく（β）にチェックを入れます。
手順４：デザインに関する設定
最後にサムネイルのデザインをお好みで変更します。
サムネイル画像をポラロイド風にする(セロテープを付ける)
サムネイル画像をポラロイド風にするにチェックを入れるとポラロイド風の枠が付きます。
さらにセロテープを付けるにチェックを入れると薄いオレンジ色のテープが表示されます。壁に写真が貼ってあるような感じです。
サムネイル画像を右側に変更する
右側に変更するにチェックを入れると画像が右側に移動します。
サムネイル画像を角丸に変更する
角丸に変更するにチェックを入れるとサムネイル画像の角が丸くなります。
以上！AFFINGERの記事一覧のサムネイル画像に関する設定を解説しました！