11月30日まで!

AIライティングツール「Rytr」の年間Unlimitedプランが永久30%オフのセール中

クーポンコード「RYTINGBF22」

 

【AFFINGER6】サムネイル(アイキャッチ)画像設定による見え方の違い

WordPressテーマAFFINGER6では、サムネイル画像のサイズや表示形式を変更することができます。

サムネイルとは、記事を投稿する際のアイキャッチ画像のことです。

このサムネイル画像のサイズ設定によって見え方が異なり、画像が見切れる場合や極端に小さくなることもあります。

画像内に文字を含めている場合は、しっかりと認識できるように画像サイズを設定することを推奨します。

今回は、AFFIGNER6の管理画面からサムネイルの画像サイズを変更する手順を解説します。

【AFFINGER6】サムネイル画像設定

AFFINGER6でのサムネイル画像設定は、

WordPress管理画面 ▶︎ AFFINGER 管理 ▶︎ 全体設定 ▶︎ サムネイル画像設定

から変更可能です。

丸くする

サムネイル画像
サムネイルを丸くする

サムネイル画像を丸くすると、画像内の文字が切れてしまうためおすすめできません。

正方形にする

正方形の場合も画像が切れてしまいます。

ページに統一感を出したい場合には正方形でもいいですね。

フルサイズにする

フルサイズ画像

フルサイズにすると画像が途切れることなく表示されます。

ですが、ちょっと小さいかな〜という印象。

スマホだと画像内の文字の視認性が悪くなります。

フルサイズ & サムネイル画像を大きくする

フルサイズを選んだ状態で「サムネイル画像を大きくする」を選択すれば、画像サイズが大きく表示されます。

画像内の文字が読みやすくなるためおすすめの設定です。

ですがこのままでは、スマホ画面では画像が小さいままになっています。

サムネイル画像を大きくするにチェックを入れて保存し、管理画面から「スマホでもサムネイル画像を大きくする」にチェックを入れます。

これで、スマホでも画像が大きく表示されるようになります。

(※「サムネイル画像を大きくする」を選択した後saveしなければ、「スマホでもサムネイル画像を大きくする」を選択できません。)

フルサイズ & サムネイル画像を角丸に変更 & サムネイル画像を大きくする

サムネイルを角丸にする

サムネイル画像を角丸にすることで、ちょっぴりマイルドな印象になります。

おしゃれなデザインになるので、これはこれでありですね。

フルサイズ & ポロライド風 & 大きくする

サムネイル画像をポロライド風にすると、画像に影がついて写真のようなデザインになります。

ですが余白が均等ではないため、統一感がなくなってしまいます。

フルサイズは表示速度に影響が出る

サムネイル・アイキャッチ画像の設定をフルサイズにすると、表示速度に影響する場合があります。

画像の遅延読み込みなどを有効化すると良いでしょう。

 

WordPressでブログを始めたらまずは「Jetpack」プラグインをインストール・設定しよう

-WordPress
-,