設定

AFFINGER6 サイドバーのサムネイル画像を大きくする方法

アフィ君

サイドバーに表示されるサムネイル画像をもっと大きくしたいんだけど、どうやればいいのかわからない…

という悩みを解決します。

AFFINGER6には、サムネイル画像を大きくする設定があるので、そこを変更するだけでサムネイル画像は大きくなります。

イメージとしては以下のような感じです。

大きさ変更イメージ

ただし、サムネイル画像を大きくすることによるデメリットもあります。

そこで今回は、サイドバーのサムネイル画像を大きくする設定と、それに伴うデメリットもあわせて解説します。

サイドバーのサムネイル画像を大きくする設定

サイドバーのサムネイル画像を大きくするための設定は「テーマ管理(AFFINGER 管理)」にて行います。

詳しく解説していきますね。

AFFINGER 管理の「全体設定」を開く

ダッシュボードメニューの「① AFFINGER 管理」をクリックし、テーマ管理メニューの「② 全体設定」開きます。

「サムネイル画像設定」を変更する

全体設定を下へスクロールしていくと「サムネイル画像設定」という見出しがあるので、まずはその下「記事一覧」の項目2つを変更します。

  1. 「フルサイズにする」を選択する
  2. 「PC(960px以上)のサムネイル画像を大きくする」にチェックを入れる

この2つを選択したら「SAVE」を押していったん保存してください。

※この時点ではまだサムネイル画像は大きくなっていません。

サムネイル画像イメージ

「サムネイル画像をさらに大きく(β)」を選択

保存後、「スマホ(599px以下)でもサムネイル画像を大きくする」と「サムネイル画像をさらに大きく(β)」が選択できるようになっているので、「サムネイル画像をさらに大きく(β)」にチェックを入れて保存します。

これで、サイドバーのサムネイル画像が大きくなりました。

サムネイル画像が大きく表示された

表示される画像の縦横比は、メディアにアップロードしている画像の比率に依存します。

サムネイル画像を大きくデメリット

「サムネイル画像をさらに大きく(β)」を有効にすると、サイドバー以外のサムネイルも大きく表示されます。

これにより、サイト全体のバランスが悪くなる可能性があります。

トップページ上に表示しているおすすめ記事を例にすると、これぐらい大きさが異なります。

おすすめ記事イメージ

デフォルトとサムネイル大との比較

新着記事のサムネイルと、サイドバーに表示したおすすめ記事とではこんな感じです。

新着記事&サイドバー

はっきり言ってこれは好みが分かれると思います。

あと、使用しているのが、

  • AFFINGER6 ノーマル版
  • AFFINGER6 EX版
  • 子テーマ JET

によっても変わります。

新着記事の表示タイプが異なるからです。

ちなみに、当サイトのテーマはAFFINGER6 EX版です。

まぁバランスが悪いなと思えば設定を変更すればいいだけなので、デメリットというほどでもないかもしれせんね。

-設定