WordPressの人気テーマAFFINGER6を導入してみたものの、「あれ？なぜかサムネイルがうまく表示されない…」なんて困っていませんか？設定したはずの画像が切れていたり、そもそも表示されなかったりすると、結構焦りますよね。
この記事では、そんなAFFINGER6のサムネイルに関する悩みをスッキリ解決します！「サムネイルが表示されない原因と直し方」といった基本的な問題解決はもちろん、さらに一歩進んで、
- サイトの顔となる「ヘッダー画像の最適なサイズ」
- クリック率アップを狙う「画像にオシャレな文字を入れる方法」
- EX版の便利機能である「動画のサムネイル設定」
など、AFFINGER6の画像設定をまるごと解説していきます。この記事を読めば、あなたのサイトの見た目がプロのように整うこと間違いなしでしょう。
さあ、一緒に設定を見直して、サイトの魅力を最大限に引き出していきましょう！
この記事のポイント
- サムネイルが表示されない原因と解決法
- 最適なヘッダー画像の推奨サイズ
- サムネイルへの文字の入れ方
- YouTube動画のサムネイル設定方法
Affinger6のサムネイルが表示されない時の直し方
表示されない原因と正しい設定・対処法
AFFINGER6を使い始めたばかりの時、「設定したはずのサムネイルが表示されない！」と焦ってしまうことがありますね。でも、安心してください。これは故障ではなく、AFFINGER6の初期設定が原因であることがほとんどです。
ここでは、サムネイルが表示されない2つの主な原因と、その具体的な対処法をステップ・バイ・ステップで解説していきます。
原因1：記事ページでアイキャッチ画像が「非表示」になっている
AFFINGER6では、テーマを導入しただけの初期状態だと、記事ページにアイキャッチ画像が表示されない設定になっています。せっかく設定したのに表示されない一番の原因はこれです。
まずは、すべての記事でアイキャッチ画像が表示されるように設定を有効化しましょう。
- WordPressの管理画面から「AFFINGER管理」→「投稿・固定記事」へ進みます。
- 「アイキャッチ設定」という項目を探します。
- 「アイキャッチ画像の表示を全ての記事で有効化する」にチェックを入れます。
たったこれだけで、記事の先頭にアイキャッチ画像が表示されるようになります。
ちなみに、多くのブログで見かけるように画像をタイトルの下に表示したい場合は、すぐ下にある「アイキャッチ画像をタイトル下表示に変更する」にもチェックを入れるのがおすすめです。記事全体のバランスが良くなりますよ。
原因2：記事一覧でサムネイルが「正方形」に切り取られている
記事ページで無事に表示されても、「トップページやカテゴリ一覧で見ると、画像が変に切り取られてしまう…」という問題もよく起こります。
これは、記事一覧でのサムネイル表示方法が、初期設定で「正方形にする」になっているのが原因です。横長の画像を設定すると、画像の左右が自動で切り取られてしまうのです。
この問題を解決するには、サムネイルの表示形式を変更する必要があります。
- WordPressの管理画面から「AFFINGER管理」→「全体設定」へ進みます。
- 「サムネイル画像設定」という項目までスクロールします。
- 記事一覧の項目で、「正方形にする」や「丸くする」ではなく、「フルサイズにする」を選択してください。
この設定で、あなたがアップロードした画像の比率を保ったまま、きれいに表示されるようになります。
【注意点】表示速度について
「フルサイズにする」設定は、元の大きな画像をそのまま読み込むため、ページの表示速度が少し遅くなる可能性があります。サイトのパフォーマンスを重視するなら、「メディア設定にする」を選び、WordPress本体の「設定」→「メディア」でサムネイル用の小さい画像サイズをあらかじめ決めておくのが最適な方法です。
【便利設定】アイキャッチがない時の画像を決めておこう
記事によっては、アイキャッチ画像を設定し忘れることもあるかもしれません。その場合、灰色のさみしい画像が表示されてしまいます。
これを防ぐために、「デフォルトのサムネイル画像」を設定しておくことを強くおすすめします。
設定場所は、先ほどと同じ「AFFINGER管理」→「全体設定」→「サムネイル画像設定」の中にあります。「デフォルトのサムネイル画像」の項目から、あなたのサイトロゴなど、共通で表示させたい画像をアップロードしておきましょう。
このように、いくつかの設定項目を見直すだけで、AFFINGER6のサムネイル表示に関する悩みの多くは解決します。
Affinger6でサムネイルと画像を上手に使うコツ
ヘッダー画像にぴったりのサイズ
サイトの「顔」とも言えるヘッダー画像、せっかくならキレイに表示させたいですよね。
なぜなら、AFFINGER6のヘッダーはパソコンの画面いっぱいに広がるように作られているため、この横幅があれば大きな画面で見ても安心だからです。高さはこのサイズを基準に、ご自身のサイトデザインに合わせて調整すると良いでしょう。
ここで一つ注意点があります。ヘッダー画像が高すぎると、訪問者が記事を読むまでにたくさんスクロールする必要があり、サイトから離れる原因になる可能性があります。訪問者にとって使いやすい高さを意識することが大切ですね。
ファイル形式は、キレイで容量が軽い「JPEG」形式が推奨されています。まとめると、以下のようになります。
| 項目 | 推奨サイズ・形式 |
|---|---|
| パソコンでの表示 | 横 2200px × 高 500px |
| ファイル形式 | JPEG |
※「px」とはピクセルの略で、デジタル画像を作る小さな点のことです。
この公式推奨サイズを基本にすることで、誰が見ても美しいヘッダーを簡単に設定できます。
画像にオシャレな文字を入れる方法
記事一覧で目を引くサムネイル画像を作るには、画像に内容が伝わる文字を入れるのがとても効果的です 。
AFFINGER6自体には画像に文字を直接書き込む機能はないため、無料の外部ツールを使いましょう。
ここで最もおすすめなのが、多くのブロガーが愛用している「Canva（キャンバ）」というデザインツールです 。
Canvaをおすすめする理由は、専門知識がなくても、まるでプロが作ったようなオシャレな画像を誰でも簡単に作成できるからです。
クリックされやすいサムネイルを作れることは、アクセスアップに直結する大きなメリットと言えるでしょう。
Canvaを使った文字入れの基本的な流れは以下の通りです。
- Canvaの公式サイトにアクセスして無料登録します。
- 「デザインを作成」からサイズを「1200 × 630px」などに指定します。
（SNSでの表示もキレイになる、おすすめのサイズです ）
- 用意した画像をアップロードし、背景として配置します。
- 左側のメニューから「テキスト」を選び、好きなフォントや色で文字を入れます。
- 完成したら「共有」→「ダウンロード」から「JPEG」形式で保存します。
Canvaにはたくさんのテンプレートが用意されているので、デザインが苦手な方でも安心です。
このツールを使えば、あなたのAFFINGER6サイトの魅力をさらに引き出すサムネイルが作れますよ。
動画の顔になる画像を設定する方法
ブログに埋め込んだYouTube動画、その「顔」となる画像（サムネイル）を記事のアイキャッチに設定できると、とても便利ですよね。
AFFINGER6では、この機能が用意されていますが、一つ注意点があります。
結論から言うと、この機能は主にアップグレード版である「AFFINGER6 EX」限定の機能です 。
EX版を使っている場合、設定はとても簡単です。
記事の投稿編集画面を下へスクロールすると、「アイキャッチ関連」という設定項目があります。
- YouTubeサムネイルを使用：ここにYouTube動画の「動画ID」を入力すると、その動画のサムネイルが記事のアイキャッチ画像になります 。
- アイキャッチを動画に変更：こちらにチェックを入れると、記事のアイキャッチ画像が再生可能なYouTube動画そのものに置き換わります 。
「動画ID」とは、YouTubeのURLの「v=」の後ろにある文字列のことです。
（例： https://www.youtube.com/watch?v=ABCDEFG1234 の場合、IDは ABCDEFG1234 です）
もしあなたが標準版のAFFINGER6を使っている場合、残念ながらこれらの設定項目は表示されません その場合の対処法は、動画の好きな場面のスクリーンショットを撮って画像として保存し、それを手動で記事のアイキャッチ画像として設定することです。
少し手間はかかりますが、同じような効果を得られますでしょう。
AFFINGER6のサムネイル設定は迷路？表示されない4大問題を一挙解決！：まとめ
Q&Aでまとめますね。
質問（Q）；サムネイルが表示されない、または切れるのはなぜですか？
回答（A）；テーマの初期設定が原因なので、2つの設定項目を見直せば直ります。
質問（Q）；サイトのヘッダー画像に最適なサイズはありますか？
回答（A）；公式ではPC向けに横2200px × 高さ500pxのJPEGが推奨されています。
質問（Q）；画像に目を引くような文字を入れるにはどうすれば良いですか？
回答（A）；テーマの機能ではなく、Canvaなどの無料デザインツールを使うのがおすすめです。
質問（Q）；YouTube動画の画像をアイキャッチに設定できますか？
回答（A）；アップグレード版のEX限定機能を使えば、動画IDで簡単に設定可能です。
この記事では、AFFINGERの画像表示に関する様々な設定方法をご紹介しました。最初は設定項目が多くて戸惑いますよね。でも、画像設定をマスターすることが、プロのような見た目のサイトに近づくための第一歩ですよ。今回解説した内容を参考にすれば、きっとあなたのサイトもさらに魅力的になるでしょう。ぜひ楽しみながら、色々な設定を試してみてくださいね。最後まで読んでいただき、本当にありがとうございました。