AFFINGER6のサムネイル(アイキャッチ)完全攻略ガイド:アフィンガー6

AFFINGER6(アフィンガー6)のサムネイル(アイキャッチ)の設定を一から解説します!

実はAFFINGERのサムネイル(アイキャッチ)設定ってとても難しいんですよ。おそらくAFFINGERの設定の中で一番難しいかも。というのも関連する設定が多すぎるんです!これらのすべての設定を調和させないと必ずどこかでヘンな表示の箇所が出てきます!あちらが立てばこちらが立たず状態!

すべての設定を調和させるためにはゴールから逆算してアイキャッチを作っていく必要があるんですが これが大変!そこで今回!これまで投稿した記事を一つに繋げ設定の流れをフローチャートにしてみました!順番にやればきちんとサムネイル(アイキャッチ)設定ができます!長くなりますが最後までお付き合いください。

サムネイル(アイキャッチ)設定を完璧にこなしてみんなに自慢しましょう!

準備:サムネイル(アイキャッチ)の役割を知る!

まずは基礎知識としてこの記事からお読みください!「サムネイル(アイキャッチ)とは何か」?そしてその「役割」についてまとめています。

読むとわかるように、サムネイルって表示される場所によって形状やサイズが異なるんです。これら全てに対応するには「それぞれに合う画像を一枚ずつ作って当てはめていく!」のが一番単純なやり方ですがこれは大変すぎて現実的ではないです。じゃあどうするかというと、「全てに合う最大公約数的なアイキャッチを作る」です。こうすることで画像1枚だけでどんな形状やサイズにも対応することができます!

次の章ではそんな「全てに合う万能なアイキャッチ」を作っていきます!


万能アイキャッチを作る!

それでは作業に入っていきます!

まずはサムネイルが表示される場所やサイズにすべて対応する万能なアイキャッチを作りましょう!

以下 わかりやすいようにこれを「万能アイキャッチ」と呼ぶことにします。

作業1:アスペクト比について知る!

サムネイル作りに欠かせない知識!それが「アスペクト比」です。アスペクト比については次の記事で解説しているのでこちらをお読みください。

作業2:画像サイズを決める!

アスペクト比を元にアイキャッチの画像サイズを決めます。アイキャッチ画像のサイズについては次の記事で紹介しています。

作業3:アイキャッチ画像を作る!

いよいよ万能アイキャッチを作ります。万能アイキャッチ画像の作り方は次の記事で紹介しています。

これで万能アイキャッチが完成しました。


アイキャッチをアップロードする!

作成したアイキャッチ画像をアップロードする方法を紹介します。


記事一覧のサムネイルを設定する!

記事一覧のサムネイル画像の設定を行います。


その他設定

他の表示場所の設定を行っていきます。

Twitterカードの設定

Twitterを使う人はOGP画像の形を設定します。正方形コースの人はカードサイズ:小を選択。長方形コースの人はカードサイズ:大を選択してください。

  • 正方形コース→カードサイズ:小(summary)
  • 長方形コース→カードサイズ:大(summary_large_image)

インフィード広告の設定

Googleアドセンスのインフィード広告を使う人は広告の縦横比を設定します。正方形コースの人は1:1、長方形コースの人は1.91:1に設定してください。

  • 正方形コース→1:1
  • 長方形コース→1.91:1