AFFINGER6のサムネイル(アイキャッチ)完全攻略ガイド：アフィンガー６
2023年12月28日
これからAFFINGERのアイキャッチやサムネイルを設定する人へ。
サムネイルやアイキャッチの設定は関連する設定がとても多く 全て繋がっています。部分部分で設定しても特に問題はありませんがその場合、表示がおかしくなったり、無駄な容量を食ったりとどこかでちょっとおかしな箇所が出てきます！できれば一から順に設定したいところです。
そこでここではサムネイルやアイキャッチに関連する記事を設定順にまとめました！この順にやっていけばサムネイルやアイキャッチがきれいに設定できるようになっています！
ちょっと長いですが サムネイルやアイキャッチの設定をきちんとやってみたい人はぜひ挑戦してみてください！
準備：サムネイル(アイキャッチ)の役割を知る！
まずはこの記事から読んでください！サムネイル(アイキャッチ)の基礎知識をまとめています。
サムネイルは表示される場所ごとに形状やサイズが異なります。それら全てに対応するにはどうすればいいか？答えは「全ての場所に合う最大公約数的なアイキャッチを作る」です。そうすることで画像１枚でどんな形状やサイズにも対応することができます！
次の章ではそんな「万能なアイキャッチ」の作り方を紹介します！
万能アイキャッチを作る！
それでは作業に入ります！
まずはどこで表示されてもきれいに表示される最大公約数的なアイキャッチを作ります！以下 これを「万能アイキャッチ」と呼ぶことにします。
作業１：アスペクト比について知る！
サムネイル作りに欠かせない知識！それが「アスペクト比」です。アスペクト比については次の記事で解説しているのでこちらをお読みください。
作業２：画像サイズを決める！
アスペクト比を元にしてアイキャッチの画像サイズを決めます。アイキャッチ画像のサイズについては次の記事で紹介しています。
作業３：アイキャッチ画像を作る！
いよいよ万能アイキャッチを作ります。万能アイキャッチ画像の作り方は次の記事で紹介しています。
これで万能アイキャッチが完成しました！
アイキャッチをアップロードする！
作成したアイキャッチ画像をアップロードする方法を紹介します。
記事ページにアイキャッチを表示する！
AFFINGER6ではアイキャッチを記事にセットしても記事ページに表示されない初期設定になっています。もしアイキャッチを記事ページに表示したい場合は設定をオンにする必要があります！この記事ではその方法について解説。さらにアイキャッチのデザインやいろんなカスタマイズについて解説します。
記事一覧のサムネイルを設定する！
記事一覧のサムネイル画像の設定を行います。
その他設定
他の表示場所の設定を行っていきます。
Twitterカードの設定
Twitterを使う人はOGP画像の形を設定します。正方形コースの人はカードサイズ：小を選択。長方形コースの人はカードサイズ：大を選択してください。
- 正方形コース→カードサイズ：小(summary)
- 長方形コース→カードサイズ：大(summary_large_image)
インフィード広告の設定
Googleアドセンスのインフィード広告を使う人は広告の縦横比を設定します。正方形コースの人は１：１、長方形コースの人は1.91：１に設定してください。
- 正方形コース→１：１
- 長方形コース→1.91：１