全体設定

サムネイル画像の設定を解説

2021年4月11日

今回はAFFINGER6のサムネイル画像の設定を解説をします。

この部分の解説です!

サムネイルとは

サムネイル画像とは記事一覧やブログカードに表示される小さいアイキャッチのことです。

サムネイル画像の設定手順

詳しく見ていきましょう!

設定画面へ移動

まずは設定画面へ移動します。

ここに移動してください。

ダッシュボード】→【AFFINGER管理】 → 【全体設定】> "サムネイル画像設定" > "記事一覧"

わかりやすく設定を分類すると3つのセクションに分かれます。

  1. 使用する画像に関する設定
  2. 表示サイズに関する設定
  3. デザインに関する設定

この順番に解説していきます!

サムネイル画像を表示しない?

サムネイル画像を表示しない人はサムネイルを非表示にできます。

そういう人は話が早い!一番下のサムネイル画像を表示しないにチェックを入れてください。これで設定完了です!

使用する画像を選ぶ

手持ちのアイキャッチ画像からどれを表示するか選びます。

アイキャッチ画像はアップロードするときに裏で何枚か違うサイズのものが生成されているんですよ。そのうちのどの画像を使うか決めます。

手札を紹介:フルサイズ、サムネイル(設定した人のみ)、150サイズ(自動生成)

引き続き、前回の記事から。該当するコースの設定に変更してください。

正方形コース × 小サイズ

「正方形コース × 小サイズ」を選んだ人は丸くする正方形にする好きな方を選んでください。

こちらは150サイズのアイキャッチ画像を使用しています。

正方形コース × 小サイズ以外

「正方形コース × 小サイズ」以外の人はメディア設定にする(もしくはフルサイズにする)を選びます。メディア設定とはサムネイル画像のことを指します。前回の記事(アイキャッチ画像のアップロードの仕方!サムネイル画像を生成しながら)でサムネイル画像を生成する設定をした人は必ずメディア設定にしてください。

サムネイル画像を作らない人はフルサイズにするを選びます。

まとめるとこんな感じです↓

コース/サムネイルの横幅小サイズ中サイズ大サイズ
1、正方形コース丸くする or 正方形にする※1メディア設定にする※2-
2、長方形コース(インフィード広告使わない)-メディア設定にする※2メディア設定にする※2
3、長方形コース(インフィード広告使う)-メディア設定にする※2メディア設定にする※2
※1:好きな方を選ぶ、※2、サムネイル画像を用意しない場合はフルサイズ

サムネイルの表示サイズを設定する

前の記事でも触れましたがAFFINGERではサムネイルの表示サイズが小、中、大の3種類から選べるようになっています。前の記事でサイズを選んだと思います。その大きさに変更します。

小サイズを選んだ人

小サイズを選んだ人は何もしなくていいです。

中サイズを選んだ人

中サイズを選んだ人はPC(960px以上)のサムネイル画像を大きくするにチェックを入れます。

大サイズを選んだ人

大サイズを選んだ人はPC(960px以上)のサムネイル画像を大きくするにチェックを入れて一旦Save。その上でサムネイル画像をさらに大きく(β)にチェックを入れます。

サムネイルのデザインを設定する

最後にサムネイルのデザインを好きなように変更して終了です。

サムネイル画像をポラロイド風にする(セロテープを付ける)

ポラロイド風にするを選ぶとポラロイド写真風の枠が付きます。

さらにセロテープを付けるにチェックを入れると薄いテープが表示されて壁に写真が貼ってあるような感じになります。

サムネイル画像を右側に変更する

右側に変更するにチェックを入れると画像が右側に移動します。

サムネイル画像を角丸に変更する

角丸に変更するにチェックを入れると画像の角が丸みを帯びます。

参考

それぞれどんな感じか紹介します。

サムネイル画像を表示しない

サムネイルなしの記事一覧例(メインカラム)
メインカラム
サムネイルなしの記事一覧例(サイドバー)
サイドバー

正方形コース × 小サイズ

正方形のサムネイルを使った記事一覧の例(メインカラム)
メインカラム
正方形のサムネイルを使った記事一覧の例(サイドバー)
サイドバー

正方形コース × 小サイズ(丸)

丸いサムネイルを使った記事一覧の例(メインカラム)
メインカラム
丸いサムネイルを使った記事一覧の例(サイドバー)
サイドバー

正方形コース × 中サイズ

(省略)

長方形コース × 中サイズ

おすすめのサムネイル設定1:中サイズのサムネイル(メインカラム)
メインカラム
おすすめのサムネイル設定1:中サイズのサムネイル(サイドバー)
サイドバー

長方形コース × 大サイズ

おすすめのサムネイル設定2:大サイズのサムネイル(メインカラム)
メインカラム

おすすめのサムネイル設定2:大サイズのサムネイル(サイドバー)
サイドバー

以上!AFFINGERのサムネイル解説でした!

-全体設定
-,