AFFINGER BLOG

【AFFINGER5】記事一覧のサムネイル画像を大きくする方法【1分で変更完了】

AFFINGERでサムネイルを大きく変更する方法
AFFINGER5の記事一覧にあるサムネイル画像を大きくしたい!

 

  • AFFINGERで表示されるサムネイルを大きくしたい
  • 記事一覧のサムネイルをカッコよくしたい
  • トップページを画像で目立つようにしたい

 

ナミアツ
このような悩みを解決します。

 

AFFINGER5の記事一覧は、デフォルトだとサムネイル画像が小さくカッコよくありません。

 

ブログのトップページはサイトの顔になりますので、見やすは必須。まずは大切な「記事一覧のサムネイル」をカスタマイズしましょう。

 

 本記事の内容

本記事では、AFFINGER5で記事一覧に表示されるサムネイルを大きく変更する方法を解説します。

 

 解説するWordPressテーマ

標準AFFINGER5になります。AFFINGE5 EXや有料子テーマ「JET」ではございません。

 

 

AFFINGERで表示される記事一覧のサムネイル。こちらを大きく変更すると下記のようになります。

※タブをタップすると切り替わります。

  • PC表示の場合



デフォルトサイズ(PC)

サムネイルをさらに大きく(PC)


 

  • スマホ表示の場合



デフォルトサイズ(スマホ)

サムネイルをさらに大きく(スマホ)


 

ナミアツ
記事一覧に表示されるサムネイルを大きく変更すると、サイトの印象も大きく変わりますね。

 

この記事を流し読み

  • サムネイルを大きくするには「AFFINGER5管理」で設定
  • サムネイルの元となるアイキャッチ画像のベストサイズは800×500
  • 過去の画像を一括変更するならプラグイン「Regenerate Thumbnails」がおすすめ

 

 本記事の内容

本記事では、AFFINGER5で記事一覧に表示されるサムネイル。こちらを大きく変更する方法を解説します。

 

 

AFFINGERでサムネイル画像を大きく変更する方法

AFFINGERでサムネイルを大きく変更する方法のコピー

それでは早速サムネイルを大きく変更する方法を解説します。

作業は全てダッシュボードの「AFFINGER5管理」から行うことが出来るので簡単です。

 


  • step.1 まずは「サムネイル画像設定」へ

    まずはWordPressのダッシュボードを開き、メニューの下の方にある「AFFINGER5管理」→「デザイン」→「サムネイル画像設定」を選択します。

    AFFINGER5ダッシュボードの設定


  • step.2 サムネイルを「フルサイズ」に

    表示されるサムネイルデザインは「フルサイズ」を選択します。

    AFFINGER5サムネイルをフルサイズに

    フルサイズにすると、表示速度に影響が出る場合もありますが、インパクトあるサムネイルになります。また表示速度が気になる場合はAutoptimizeなどのプラグインを利用すればOK。GoogleのページスピードでもMobile70以上、PC90以上を確保することができます。


  • step.3 サムネイル画像を大きくする

    次に「サムネイル画像を大きくする」にチェックを入れ、一度saveします。

    AFFINGER5サムネイルを大きくにチェック

    一度saveしないと、「スマホでもサムネイル画像を大きくする」と「サムネイル画像をさらに大きくする」のチェックボックスが有効化されません。


  • step.4 サムネイル画像をさらに大きくする

    下記の3つにチェックを入れsaveしたら完了です。

    AFFINGER5サムネイル設定3つのチェック

    • サムネイル画像を大きくする
    • スマホでもサムネイル画像を大きくする
    • サムネイル画像をさらに大きくする(β)

ナミアツ
サムネイルはβ仕様も含めると2段階で大きくすることができます。下記で、各段階の大きさを比較できるので確認してみましょう。

 

各段階ごとのサムネイルの大きさを確認

  • 「サムネイル画像を大きくする」のみにチェック

※PC表示の場合



デフォルトサイズ(PC)

サムネルを大きく(PC)


※スマホ表示の場合



デフォルトサイズ(スマホ)

サムネイルを大きく(スマホ)


 

  • 「サムネイル画像をさらに大きくする(β)」にチェック

※PC表示の場合



デフォルトサイズ(PC)

サムネイルをさらに大きく(PC)


※スマホ表示の場合



デフォルトサイズ(スマホ)

サムネイルをさらに大きく(スマホ)


スマホ表示のサムネイルについては、かなり画像が大きくなります。アイキャッチを目立たせたい場合は有効です。

 

ナミアツ
自分のサイトに合ったサムネイルの大きさにカスタマイズすることができます。難しいコードを記述する必要なし。ダッシュボードから簡単に設定することが出来ます。

 

サムネイル画像を大きく変更する効果

AFFINGERでサムネイルを大きくする効果

 

そもそもサムネイル画像を大きくすると、どういった効果が得られるの?

 

ブログの記事一覧のサムネイル画像を大きくした場合、下記の効果が得られます。

  1. 文章による圧迫感がないため、読み手のストレスが軽減
  2. 画像を使って視覚的に注意を惹きつけることが出来る

 

①文章による圧迫感がないため、読み手のストレスが減少する

ブログのトップページや記事一覧が文章ばかりだとどうでしょうか。

多くの人は文章だけのコンテンツを「わかりづらい」と判断します。

 

なぜなら、

トップページの記事一覧がテキストだけの場合、小さな文字を読まないと自分が読みたい記事なのかどうか判断できず、分からないことが読み手のストレスになります。

 

人が受ける情報の80%は視覚情報によるものとされているので、視覚的な分かりやすさは重要。

 

サムネイルやアイキャッチがある場合は、記事の内容を視覚的にイメージすることができ理解しやすくなります。

 

つまり、

分かりやすいサムネイル画像があると読み手のストレスを軽減することができ、記事を読んでくれる確率が上がります。

 

②画像を使って視覚的に注意を惹きつけることができる

サムネイルやアイキャッチなど、画像を使用したほうが読者のクリック率は上がります。

 

例えば、大量のテキストで覆いつくされた国語辞典の様ような1ページに写真が1枚だけあったすとするとどうでしょうか。

 

多くの人は、文章よりも写真に注目します。

 

上記でも解説したとおり、「人の受ける情報の80%は視覚から」で特に写真や図といった画像は注意を引くことが出来ます。

 

ナミアツ
サムネイルを目立つようにすると、読者の注意を惹きクリック率を上げることができます。

 

サムネイル画像におすすめのサイズは?

サムネイルにおすすめのサイズは?

本記事の設定では、サムネイル画像のサイズは記事のアイキャッチ画像のサイズに影響されます。

なので、まずはアイキャッチ画像のサイズを統一するのがおすすめです。

 

おすすめのサイズはコチラ。

  • 800×500
  • 1200×750

 

当ブログでは主に800×500(px)のアイキャッチを用いています。

倍率だと、「1:0.625」

理由は記事のエリアの横幅に対応しつつ、極力画像サイズを小さくし、表示スピードを上げるためです。

 

アイキャッチの作り方については、コチラの記事”アイキャッチ時短テンプレ”で解説しています。

 

ナミアツ
アイキャッチ画像を後から修正するのは大変です。アイキャッチのサイズは最初から統一した大きさで作成しましょう。

 

 

大量のサムネイル画像を一括で変更したい

過去のサムネイルを一括で変更する方法

 

過去のサムネイル画像も一括で変更できないかな・・・?

 

過去の画像サイズを一括で変更するにはプラグイン「Regenerate Thumbnails」がおすすめ。

詳細についてはコチラの記事で解説予定です。

関連記事サムネイル画像のサイズを一括で統一する方法

 

ナミアツ
大量の画像を一気に変更する場合は必ずバックアップを取ってから行いましょう。

 

 

本記事のまとめ:AFFINGER5のサムネイルを大きく変更する方法

AFFINGERでサムネイルを大きく変更する方法(まとめ)

それでは最後にこの記事のまとめです。

AFFINGERのサムネイル画像を変更する手順

  1. ダッシュボード→AFFINGER5管理→デザイン→サムネイル画像設定
  2. 「サムネイル画像を大きくする」にチェックし一度保存する
  3. 「サムネイル画像をさらに大きくする」で最大サイズへ変更可能

 

サムネイル画像におすすめのサイズ

画像サイズと表示速度を考えると800×500(px)がおすすめ。

 

過去の画像を一括で変更する便利なプラグイン

過去のサムネイル画像を一気に変更するのであれば、Regenerate Thumbnailsがおすすめ。

 

ナミアツ
それでは今回は以上でおしまいです。最後までお読みいただきありがとうございました。

 

AFFINGER5
あわせて読みたい【AFFINGER5】サイト名の大きさを変更する方法【テンプレコードあり】

続きを見る

-AFFINGER, BLOG

© 2020 JIKORICH