サイドバーに表示されるサムネイル画像をもっと大きくしたいんだけど、どうやればいいのかわからない…
という悩みを解決します。
AFFINGER6には、サムネイル画像を大きくする設定があるので、そこを変更するだけでサムネイル画像は大きくなります。
イメージとしては以下のような感じです。
大きさ変更イメージ
ただし、サムネイル画像を大きくすることによるデメリットもあります。
そこで今回は、サイドバーのサムネイル画像を大きくする設定と、それに伴うデメリットもあわせて解説します。
サイドバーのサムネイル画像を大きくする設定
サイドバーのサムネイル画像を大きくするための設定は「テーマ管理（AFFINGER 管理）」にて行います。
詳しく解説していきますね。
AFFINGER 管理の「全体設定」を開く
ダッシュボードメニューの「① AFFINGER 管理」をクリックし、テーマ管理メニューの「② 全体設定」開きます。
「サムネイル画像設定」を変更する
全体設定を下へスクロールしていくと「サムネイル画像設定」という見出しがあるので、まずはその下「記事一覧」の項目２つを変更します。
- 「フルサイズにする」を選択する
- 「PC（960px以上）のサムネイル画像を大きくする」にチェックを入れる
この2つを選択したら「SAVE」を押していったん保存してください。
※この時点ではまだサムネイル画像は大きくなっていません。
サムネイル画像イメージ
「サムネイル画像をさらに大きく（β）」を選択
保存後、「スマホ（599px以下）でもサムネイル画像を大きくする」と「サムネイル画像をさらに大きく（β）」が選択できるようになっているので、「サムネイル画像をさらに大きく（β）」にチェックを入れて保存します。
これで、サイドバーのサムネイル画像が大きくなりました。
表示される画像の縦横比は、メディアにアップロードしている画像の比率に依存します。
サムネイル画像を大きくデメリット
「サムネイル画像をさらに大きく（β）」を有効にすると、サイドバー以外のサムネイルも大きく表示されます。
これにより、サイト全体のバランスが悪くなる可能性があります。
トップページ上に表示しているおすすめ記事を例にすると、これぐらい大きさが異なります。
おすすめ記事イメージ
新着記事のサムネイルと、サイドバーに表示したおすすめ記事とではこんな感じです。
新着記事＆サイドバー
はっきり言ってこれは好みが分かれると思います。
あと、使用しているのが、
- AFFINGER6 ノーマル版
- AFFINGER6 EX版
- 子テーマ JET
によっても変わります。
新着記事の表示タイプが異なるからです。
ちなみに、当サイトのテーマはAFFINGER6 EX版です。
まぁバランスが悪いなと思えば設定を変更すればいいだけなので、デメリットというほどでもないかもしれせんね。
