MENU
無料相談はこちらから
無料相談はこちらから

【SWELL】デフォルトサムネイル（no-image画像）を設定する方法と、サムネイル画像のデザインアイデア

SWELL
SWELL

WordPressテーマ「SWELL」を使っていると、

  • アイキャッチを設定し忘れた記事がある
  • 過去記事すべてにサムネイルを入れ直すのは大変
  • 一覧ページで no-image が表示されるのが気になる

そんなときがあります。

この記事では
SWELLでデフォルトサムネイル（no-image画像）を設定する方法と、
その画像をどうデザインするとサイト全体がきれいに見えるかについてまとめます。

SWELL公式「NO IMAGE（ノーイメージ）画像の設定方法」はこちらから。

SWELL
NO IMAGE（ノーイメージ）画像の設定方法 | WordPressテーマ SWELL SWELLでは、各記事のアイキャッチ画像が設定されていない場合に表示する代わりのサムネイル画像として、「NO IMAGE画像」を自由に設定することができます！ このページでは...
目次

【手順】SWELLでデフォルトサムネイルを設定する方法

設定手順

設定はとても簡単で、管理画面から行えます。

STEP
WordPress管理画面を開く

「外観」→「カスタマイズ」をクリックします。

STEP
「サイト全体設定」＞「NO IMAGE画像」

あらかじめ用意した画像をアップロードします。

STEP
公開して完了

設定を保存すれば、アイキャッチ未設定の記事でも自動で表示されるようになります。

デフォルトサムネイル画像が表示される場面

設定したデフォルトサムネイル画像は、以下のような場面で表示されます。

  • 記事一覧ページ
    アイキャッチ画像が未設定の記事
  • 関連記事
    アイキャッチ画像が未設定の関連記事
  • 最近の投稿ウィジェット
    サムネイル表示時

推奨される画像設定

画像サイズ

SWELL公式では横幅1600px以上が推奨されていますが、SNS（OGP）での見え方を考慮して1200px × 630pxで作成するのが一般的です。

画像形式

  • JPEG
    写真や複雑なグラデーションの画像に最適
  • PNG
    ロゴやテキストが含まれる画像に最適
  • WebP
    より軽量で高画質（対応している場合）

ファイルサイズ

  • ページ読み込み速度を考慮し、200KB以下に抑えることを推奨
  • 画像圧縮ツール（TinyPNG、ImageOptimなど）を使用して最適化

デフォルトサムネイル画像のデザインアイデア

1. ブランドロゴを使用

サイトのロゴやブランドカラーを使用したシンプルなデザイン。統一感が出ます。

2. サイトテーマに合わせたイラスト

ブログのテーマや業種に合わせたイラストやアイコンを配置。

例えば

  • テック系ブログ
    デバイスやコードのイラスト
  • 料理ブログ
    キッチン用品や食材のイラスト
  • ビジネスブログ
    ビジネスアイコンやグラフ

3. 抽象的なパターン

幾何学模様やグラデーション、テクスチャなどを使用した抽象的なデザイン。シンプルで飽きのこないデザインになります。

デフォルトサムネイル画像を設定したのに反映されない

以下の点を確認してみてください。

  1. 「公開」ボタンを押したか
  2. ブラウザのキャッシュをクリア
  3. キャッシュプラグイン（WP Super Cache、W3 Total Cacheなど）を使用している場合は、キャッシュをクリア
  4. 個別記事にサムネイル画像の設定がないか確認
  5. SNSでの表示
    XやFacebookで画像が変わらない場合は、SNS側のキャッシュをクリアする必要があります

記事ごとに異なるデフォルト画像を設定したい場合

デフォルトサムネイル画像はサイト全体で1つの設定です。
記事ごとに異なる画像を表示したい場合は、各記事にアイキャッチ画像を設定する必要があります。

デフォルトサムネイル画像を削除したい

カスタマイザーの「サイト全体設定」＞「NO IMAGE画像」を削除して保存してください。

まとめ

SWELLでは、デフォルトサムネイルを設定しておくだけでブログ全体の見た目がぐっと整います。

  • 設定はカスタマイズ画面から簡単
  • no-image対策としてとても有効
  • デザイン次第でサイトの印象もアップ

「まだ設定していなかった・・・」という方は、この機会に一度見直してみてください。

SWELL

関連記事

目次