- AFFINGERで表示されるサムネイルを大きくしたい
- 記事一覧のサムネイルをカッコよくしたい
- トップページを画像で目立つようにしたい
AFFINGER5の記事一覧は、デフォルトだとサムネイル画像が小さくカッコよくありません。
ブログのトップページはサイトの顔になりますので、見やすは必須。まずは大切な「記事一覧のサムネイル」をカスタマイズしましょう。
本記事の内容
本記事では、AFFINGER5で記事一覧に表示されるサムネイルを大きく変更する方法を解説します。
解説するWordPressテーマ
標準のAFFINGER5になります。AFFINGE5 EXや有料子テーマ「JET」ではございません。
AFFINGERで表示される記事一覧のサムネイル。こちらを大きく変更すると下記のようになります。
※タブをタップすると切り替わります。
- PC表示の場合
- スマホ表示の場合
この記事を流し読み
- サムネイルを大きくするには「AFFINGER5管理」で設定
- サムネイルの元となるアイキャッチ画像のベストサイズは800×500
- 過去の画像を一括変更するならプラグイン「Regenerate Thumbnails」がおすすめ
本記事の内容
本記事では、AFFINGER5で記事一覧に表示されるサムネイル。こちらを大きく変更する方法を解説します。
タップできる目次
AFFINGERでサムネイル画像を大きく変更する方法
それでは早速サムネイルを大きく変更する方法を解説します。
作業は全てダッシュボードの「AFFINGER5管理」から行うことが出来るので簡単です。
step.1 まずは「サムネイル画像設定」へ
まずはWordPressのダッシュボードを開き、メニューの下の方にある「AFFINGER5管理」→「デザイン」→「サムネイル画像設定」を選択します。
step.2 サムネイルを「フルサイズ」に
表示されるサムネイルデザインは「フルサイズ」を選択します。
フルサイズにすると、表示速度に影響が出る場合もありますが、インパクトあるサムネイルになります。また表示速度が気になる場合はAutoptimizeなどのプラグインを利用すればOK。GoogleのページスピードでもMobile70以上、PC90以上を確保することができます。
step.3 サムネイル画像を大きくする
次に「サムネイル画像を大きくする」にチェックを入れ、一度saveします。
一度saveしないと、「スマホでもサムネイル画像を大きくする」と「サムネイル画像をさらに大きくする」のチェックボックスが有効化されません。
step.4 サムネイル画像をさらに大きくする
下記の３つにチェックを入れsaveしたら完了です。
- サムネイル画像を大きくする
- スマホでもサムネイル画像を大きくする
- サムネイル画像をさらに大きくする（β）
各段階ごとのサムネイルの大きさを確認
- 「サムネイル画像を大きくする」のみにチェック
※PC表示の場合
※スマホ表示の場合
- 「サムネイル画像をさらに大きくする（β）」にチェック
※PC表示の場合
※スマホ表示の場合
スマホ表示のサムネイルについては、かなり画像が大きくなります。アイキャッチを目立たせたい場合は有効です。
サムネイル画像を大きく変更する効果
ブログの記事一覧のサムネイル画像を大きくした場合、下記の効果が得られます。
- 文章による圧迫感がないため、読み手のストレスが軽減
- 画像を使って視覚的に注意を惹きつけることが出来る
①文章による圧迫感がないため、読み手のストレスが減少する
ブログのトップページや記事一覧が文章ばかりだとどうでしょうか。
多くの人は文章だけのコンテンツを「わかりづらい」と判断します。
なぜなら、
トップページの記事一覧がテキストだけの場合、小さな文字を読まないと自分が読みたい記事なのかどうか判断できず、分からないことが読み手のストレスになります。
人が受ける情報の80%は視覚情報によるものとされているので、視覚的な分かりやすさは重要。
サムネイルやアイキャッチがある場合は、記事の内容を視覚的にイメージすることができ理解しやすくなります。
つまり、
分かりやすいサムネイル画像があると読み手のストレスを軽減することができ、記事を読んでくれる確率が上がります。
②画像を使って視覚的に注意を惹きつけることができる
サムネイルやアイキャッチなど、画像を使用したほうが読者のクリック率は上がります。
例えば、大量のテキストで覆いつくされた国語辞典の様ような１ページに写真が1枚だけあったすとするとどうでしょうか。
多くの人は、文章よりも写真に注目します。
上記でも解説したとおり、「人の受ける情報の80%は視覚から」で特に写真や図といった画像は注意を引くことが出来ます。
サムネイル画像におすすめのサイズは？
本記事の設定では、サムネイル画像のサイズは記事のアイキャッチ画像のサイズに影響されます。
なので、まずはアイキャッチ画像のサイズを統一するのがおすすめです。
おすすめのサイズはコチラ。
- 800×500
- 1200×750
当ブログでは主に800×500(px)のアイキャッチを用いています。
倍率だと、「1：0.625」
理由は記事のエリアの横幅に対応しつつ、極力画像サイズを小さくし、表示スピードを上げるためです。
アイキャッチの作り方については、コチラの記事”アイキャッチ時短テンプレ”で解説しています。
大量のサムネイル画像を一括で変更したい
過去の画像サイズを一括で変更するにはプラグイン「Regenerate Thumbnails」がおすすめ。
詳細についてはコチラの記事で解説予定です。
関連記事サムネイル画像のサイズを一括で統一する方法
本記事のまとめ：AFFINGER5のサムネイルを大きく変更する方法
それでは最後にこの記事のまとめです。
AFFINGERのサムネイル画像を変更する手順
- ダッシュボード→AFFINGER5管理→デザイン→サムネイル画像設定
- 「サムネイル画像を大きくする」にチェックし一度保存する
- 「サムネイル画像をさらに大きくする」で最大サイズへ変更可能
サムネイル画像におすすめのサイズ
画像サイズと表示速度を考えると800×500(px)がおすすめ。
過去の画像を一括で変更する便利なプラグイン
過去のサムネイル画像を一気に変更するのであれば、Regenerate Thumbnailsがおすすめ。
-
あわせて読みたい【AFFINGER5】サイト名の大きさを変更する方法【テンプレコードあり】
続きを見る