無料でブログを宣伝できるサイト「ブロググ」

SWELLの画像サイズまとめ【アイキャッチ、ファビコン、ロゴ、メインビジュアル画像・動画】

この記事では、WordPressテーマ「SWELL」の画像サイズと設定方法を、わかりやすく一覧にまとめてご紹介します。

アイキャッチ画像サイトアイコン(ファビコン)NO IMAGEOGPヘッダーロゴコンテンツヘッダーメインビジュアル(トップ画像・動画)などについてです。

WordPressやSWELLの推奨サイズ、SWELL公式サイトの使用サイズ、そのほかの知見からまとめています。

suya

画像サイズは、見た目だけでなく、ページ表示速度やSEOに影響します。

なるほどくん

なるほど!適切なサイズにしたいですね。

この記事でできること
  • 公式の推奨サイズがわかる
  • ページ表示速度を測る「PageSpeed Insights」で「適切なサイズの画像」と評価されやすいサイズがわかる
この記事を書いた人

suya @suyasite

  • WP-Search」開発者
  • ブロググ」開発者
  • Webで月1億円を売り上げる
  • セキュリティの専門家(国家資格
  • WP-Search」開発者
  • ブロググ」開発者
  • Webで月1億円を売上
  • セキュリティ国家資格

にアイコンフォント(絵文字)や目次ハイライト機能を追加する子テーマ「SWELL PLUS」を作りました。

この記事を最後まで読めば、SWELL(スウェル)の適切な画像サイズと設定方法がわかります。

ぜひ最後まで進めてみてください。

完了している必要のある事前準備

デザインテーマ「」の導入がまだの方は、以下の記事に戻って作業を進めてください。

すでに途中まで進めている人は、目次から該当箇所に飛ぶこともできます。

目次

SWELLの画像推奨サイズまとめ

最初にSWELLの画像サイズをまとめておきます。

黄色下線のサイズがおすすめです。

スクロールできます
画像サイズ根拠
アイキャッチ1200×630px(webp推奨)OGP(SNS推奨)と同じ
1200×675px(webp推奨)SWELL投稿リスト表示を優先
サイトアイコン512×512px(png推奨)WordPress推奨
NO IMAGE1200×630pxOGP(SNS推奨)と同じ
横幅1600pxSWELL推奨
OGP1200×630pxSWELL推奨&SNS推奨
コンテンツヘッダー横幅1600pxSWELL公式サイト
横幅1280pxページ表示速度・SEO優先
ヘッダーロゴ1600×360pxSWELL公式サイト
600×135px程度(png推奨)ページ表示速度・SEO優先
メインビジュアル1600×900pxSWELL公式サイト
横幅1280px(PC)ページ表示速度・SEO優先
横幅600〜960px(SP)ページ表示速度・SEO優先

詳しい説明や設定方法は、以下をご覧ください。

画像・動画の準備がまだの方は、後で設定するために、本ページをブックマークしておきましょう。

WordPress(ワードプレス)は、初期設定では複数サイズの画像が自動生成されてしまいます。

サーバー容量を圧迫するため、不要なサイズは作成しないように設定変更することも可能です。

WebP画像を直接アップロードすると、古いブラウザで表示されなかったり、ブログ村などの更新情報サービスでアイキャッチが表示されません。

必ず元画像は.pngや.jpgでアップロードし、WebP化プラグインで.webpで変換するようにしましょう。

画像作成をプロに頼むなら、「ココナラ(coconala)が便利です。

\ 無料登録 /

画像だけでなくWebサイト・ブログのデザインをお願いしたい場合は、以下のボタンからSWELLカスタマイズを検索できます。

\ SWELLをカスタマイズ /

1) アイキャッチ画像(サムネイル画像含む)

アイキャッチ画像とは、各記事に設定する画像のことです。

  • 記事内のトップ画像として表示することができます。
  • 記事のサムネイル画像(記事一覧、記事スライダー、ピックアップバナーなど)として利用されます。
  • 記事をSNSでシェアした際の画像として利用されます。(OGP画像未設定時)

投稿・固定ページの編集画面で、アイキャッチ画像を設定できます。

WordPressテーマ「SWELL(スウェル)」の編集画面でアイキャッチ画像を設定
投稿・固定ページの編集画面で、アイキャッチ画像を設定
投稿・固定ページでのアイキャッチ画像の表示方法 | WordPressテーマ SWELL

アイキャッチ画像の推奨サイズ

アイキャッチ画像の推奨サイズは「1200×630px(1.91:1)」です。

FacebookやTwitterなどのSNSにシェアされた際にきれいに表示されるサイズです。

OGP画像は「1280×670px」も推奨されますが、Twitterシェア時に上下が少しカットされます。

  • ページ表示速度を優先したい場合は、「横幅800px」などにしてください。
  • ただし、SEO上は「横幅1200px以上」を推奨します。
  • 画像を圧縮したり、「.webp」形式に変化したりすることで、ファイルを軽くすることができます。

WebP画像を直接アップロードすると、古いブラウザで表示されなかったり、ブログ村などの更新情報サービスでアイキャッチが表示されません。

必ず元画像は.pngや.jpgでアップロードし、WebP化プラグインで.webpで変換するようにしましょう。

SWELL投稿リスト(記事一覧)の画像サイズ(画像比率)

SWELLの投稿リスト表示では、「1200×675px(16:9)」などにしないと左右が少しカットされます。

ただし、逆にSNSシェア時にカットされるため、すべてのページでサイズ違いのOGP画像を作成する必要があります。

SWELLの投稿リストでカットされないようにするには、外観カスタマイズの[記事一覧リスト]で、[サムネイル画像の比率設定]で設定した画像比率で作成してください。

  • 白銀比率(1:1.414)
  • 黄金比率(1:1.618)
  • 一眼(3:2)
  • ワイド(16:9)
  • 横長(2:1)
  • 超横長(5:2)
  • 正方形(1:1)
suya

残念ながら「1.91:1」の画像比率設定はないようです。

画像は周囲がカットされて表示することが多いので、アイキャッチ画像作成時はテキストなどを中心に寄せるようにしましょう。

SWELL記事スライダー(カルーセル)の画像サイズ(画像比率)

SWELLの記事スライダー(カルーセル)の画像サイズは、ワイド(16:9)に設定されています。(デフォルト設定)

外観カスタマイズの[記事一覧リスト]で、[サムネイル画像の比率設定][カード型リストでの画像比率]で設定変更できます。

suya

記事スライダーは、カード型リストと同じ位置付けのようです。

SWELLピックアップバナーの画像サイズ(画像比率)

SWELLのピックアップバナーの画像サイズは、ワイド(16:9)に設定されています。(固定設定)

外観カスタマイズなどでは設定変更できないようです。

suya

レイアウトの関係上、画像サイズが固定されているようです。

2) サイトアイコン(ファビコン)

サイトアイコンとは、ブックマークやブラウザのタブに表示されるアイコン(ファビコン)のことです。

サイトアイコン(ファビコン)
サイトアイコン(ファビコン)

サイトアイコン(ファビコン)の推奨サイズ

サイトアイコン(ファビコン)画像の推奨サイズは「512×512px」、推奨形式は「.png」です。

これは、WordPress(ワードプレス)本体の推奨サイズです。

  • 自動的に各ブラウザ向けのリサイズ画像が作成されるため、1つの画像サイズをアップロードすれば大丈夫です。
  • 画像形式は透明・透過などが設定できる「.png」を推奨します。

\ SWELLをカスタマイズ /

サイトアイコン(ファビコン)の設定方法

左メニューの[外観][カスタマイズ]をクリックして、「カスタマイザー」を開きます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)を開始
[外観]→[カスタマイズ]をクリック

カスタマイザー」が起動したら、左メニューで設定していきます。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズ(カスタマイザー)画面
「カスタマイザー」画面

[WordPress設定][サイト基本情報]を開き、サイトアイコンを変更します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのWordPress設定-サイト基本情報
WordPress設定 – サイト基本情報

3) NO IMAGE画像(デフォルトのサムネイル画像)

NO IMAGE画像」とは、アイキャッチ画像が設定されていない記事で表示されるデフォルトのサムネイル画像のことです。

サムネイル画像とは、以下のようなケースで利用されるものです。

サムネイル画像の用途
  • 新着記事
  • 人気記事
  • 関連記事
  • 記事スライダー
  • ピックアップバナー

NO IMAGE画像の推奨サイズ

NO IMAGE画像の推奨サイズは「1200×630px」です。

OGP画像の推奨サイズと同じ「1200×630px」を利用することをおすすめします。

  • SWELL推奨サイズは「横幅1600px以上」ですが、サムネイル画像にそこまで解像度は不要です。
  • ページ表示速度を測る「PageSpeed Insights」の「適切なサイズの画像(Properly size images)」に影響します。

NO IMAGE画像の設定方法

外観カスタマイズ(カスタマイザー)から[サイト全体設定][NO IMAGE画像]を開き、画像を変更します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-NO IMAGE画像
サイト全体設定 – NO IMAGE画像
NO IMAGE(ノーイメージ)画像の設定方法 | WordPressテーマ SWELL

4) OGP画像

OGP画像」とは、アイキャッチ画像が設定されていない記事で表示されるデフォルトのSNSシェア画像のことです。

トップページをSNS(Twitter、Facebookなど)でシェアされた際にも表示されます。

OGP画像の推奨サイズ

OGP画像の推奨サイズは「1200×630px」です。

SWELLでは、FacebookやTwitterなどのSNS推奨サイズである「1200×630px」を推奨しています。

NO IMAGE画像と同じ画像を利用することをおすすめします。

OGP画像の設定方法

OGP画像を設定するには、SEOプラグイン「SEO SIMPLE PACK」を利用します。

[SEO PACK][OGP設定]を開き、画像を変更します。

WordPressプラグイン「SEO SIMPLE PACK」のOGP設定
「SEO SIMPLE PACK」でOGP画像を設定

OGP画像を設定しても、Twitterで画像が表示されない場合は、キャッシュを削除してみましょう。

記事URLを入力してエンター(Enter)を押すだけです。

Twitter Card validator

その他の「SEO SIMPLE PACK」の初期設定については、以下を参考にしてください。

5) コンテンツヘッダー画像

コンテンツヘッダーとは、固定ページなどで利用される記事タイトルの背景画像です。

WordPressテーマ「SWELL(スウェル)」のコンテンツヘッダー(例)

コンテンツヘッダー画像の推奨サイズ

コンテンツヘッダー画像の推奨サイズはありませんが、SWELL公式サイトでは「横幅1600px」が利用されています。

最低でもSD画質である「横幅1280px以上」にすることをおすすめします。

画面いっぱい(フルワイド)で利用されるため、解像度が大きいほうがいいでしょう。

\ 無料登録 /

コンテンツヘッダー画像の設定方法

コンテンツヘッダーはデフォルトOFFなので、ONに変更した際に設定します。

コンテンツヘッダーを有効にするには、タイトル位置の設定を[コンテンツ上]に変更します。

  • 投稿・固定ページの全体設定は、「外観カスタマイズ」の[投稿・固定ページ][タイトル]で変更(詳細
  • 各記事の単体設定は、「投稿」や「固定ページ」の「表示の上書き設定」で変更(詳細

外観カスタマイズ(カスタマイザー)から[サイト全体設定][コンテンツヘッダー]を開き、画像を変更します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのサイト全体設定-コンテンツヘッダー
サイト全体設定 – コンテンツヘッダー

画像の準備がない場合は、[オーバーレイカラーの不透明度]を「1」にして、[カラーオーバーレイ]を変更すれば、画像なしでコンテンツヘッダーを利用できます。

suya

このサイトも画像なしで固定ページにコンテンツヘッダーを利用しています。

ヘッダーロゴ画像とは、ヘッダーなどに表示されるサイトアイコンやサイト名(サイトタイトル)の画像のことです。

WordPressテーマ「SWELL(スウェル)」のヘッダーロゴ(公式の例)
ホワイト色(左)と通常色(右)

ヘッダーロゴ画像の推奨サイズ

ロゴ画像の推奨サイズはありませんが、SWELL公式サイトでは「1600×360px」が利用されています。

ただし、デザイン重視よりも速度重視の場合は、「600×135px」程度にしておくのがおすすめです。

  • PageSpeed Insights」の「適切なサイズの画像(Properly size images)」に影響します。

ロゴ画像が大きく表示されることは少ないため、ページ表示速度を重視するならサイズを下げておきましょう。

  • 画像形式は透明・透過などが設定できる「.png」を推奨します。(背景透過)
  • 通常色ホワイト色の 2 種類を準備することをおすすめします。

\ SWELLをカスタマイズ /

ヘッダーロゴ画像の設定方法

外観カスタマイズ(カスタマイザー)から[ヘッダー]を開き、画像を変更します。

WordPressテーマ「SWELL(スウェル)」の外観カスタマイズのヘッダー
ヘッダー

7) メインビジュアル(パソコン・スマホ)

メインビジュアルとは、トップページ上部に表示される画像・動画(トップ画像・動画)のことです。

メインビジュアルの推奨サイズ

メインビジュアル画像・動画の推奨サイズはありませんが、SWELL公式サイトでは「1600×900px」が利用されています。

最低でもSD画質である「横幅1280px以上」にすることをおすすめします。

スマホ用のサイズは「横幅600〜960px」がおすすめです。

スマホだけ考えると「横幅600px」ですが、タブレットでも表示されるため「横幅960px」もありです。

動画はファイルサイズが大きすぎると、iOS(iPhone、iPad)などで表示されなくなります。

そのため、解像度だけでなく、長さを短くしたり、圧縮するなどの最適化を必ず行いましょう。

\ 無料登録 /

メインビジュアルの設定方法

外観カスタマイズ(カスタマイザー)から[トップページ][メインビジュアル]を開き、画像・動画を変更します。

トップページ – メインビジュアル

参考)SWELL のサイト事例集

デザインの参考にするサイトを探したい場合は、「WP-Search」でSWELLを使ったサイト事例を探してみましょう。

気になるサイトのテーマやプラグインを調べることもできます。

カスタマイズの設定箇所がわからない場合は、以下のデモサイトも参考になります。

この記事のまとめ

デザインテーマ「SWELL」の各種画像サイズを見てきました。

画像を変更するだけでオリジナル性が出ますが、サイズが大きいとページ表示速度・SEOに影響するため注意しましょう。

なるほどくん

画像作成をプロに頼むならココナラ が便利ですね。

デザインを人に頼みたいなら、「ココナラ(coconala) 」でプロにお任せしましょう。

SWELLカスタマイズを検索できます。

\ SWELLをカスタマイズ /

SWELLの外観カスタマイズ(カスタマイザー)のより詳細の使い方は、以下をご覧ください。

SWELL初心者のためのお役立ちリンク集をまとめました。

おすすめのプラグインも載せていますので、参考にしてください。

導入するだけでおしゃれ(スタイリッシュ)なデザインになるWordPressテーマSWELLを、あなたのサイトに導入しましょう。

\ おしゃれで簡単 /

\ 口コミ1,000件以上 /

\ 画像付きで間違えない /

読者の声を紹介させてください

この記事をご紹介いただいた方がいらっしゃいましたら、読者の声として掲載させていただきます。

ぜひご連絡いただければと思います。

この記事が役に立ったらご紹介ください!
  • URLをコピーしました!

コメント

コメントする

目次