このページでは各画像のサイズについてご説明をいたします。

画像サイズは特に決まりはありませんが、大体バランス良く表示されるサイズや比率などについてご紹介していますのでよろしければ参考にしてみてください。


画像を設定する場所

[外観] > [カスタマイズ] > [サイト基本情報] の「ロゴ」

参考サイズ

幅 800px以下 / 高さ 140px
※高解像度環境で綺麗に表示するため、実際の表示サイズより大きなサイズを用意します。

サイズ例(デモパン屋):幅700px / 高さ 140px

トップページメイン画像/スライド

画像を設定する場所

[外観] > [カスタマイズ] > [トップページメイン画像/スライド] の「画像1~3」
※静止画像の場合は「画像1」のみ設定。スライドにする場合は「画像1~3」を設定。

参考サイズ

「画像またはスライドの幅」でコンテンツ幅(1200px)を選択した場合

幅:1200px / 高さ:400px程度

「画像またはスライドの幅」でフルサイズ(ウィンドウ幅)を選択した場合

この設定では画面幅が大きくなればなるほど、画像の縦の長さも大きくなっていきます。
そのため、画像の高さはそこまで大きくしないことをおすすめします。

幅:2000px / 高さ:600px程度

小さな画面向けの画像(任意)

スマートフォンなどの小さな画面の時に表示される画像を設定します。

幅:767px / 高さ:お好みで

サイズ例(デモパン屋): 幅 767px / 高さ 597px

参考画像サイズ & おすすめの設定

幅:1200px / 高さ:630px 

投稿/固定ページのサムネイル(アイキャッチ)画像をアップロードする場所

各投稿と固定ページの編集画面の右サイドバーの「アイキャッチ画像」から画像をアップロードします。

WordPressでアイキャッチ画像をアップロードする

デフォルトのサムネイル画像を設定する場所

[外観] > [カスタマイズ] > [デザイン] > [画像設定] の 「デフォルトサムネイル画像

幅:1200px / 高さ:630pxが、Facebookでシェアした時にきれいに表示される
幅:1200px / 高さ:630pxが、Facebookでシェアした時にきれいに表示されます

投稿一覧のサムネイルサイズについて

投稿一覧で表示されるサムネイルのサイズは、[外観] > [カスタマイズ] > [デザイン] > [画像設定] の「サムネイル画像の縦横比率」で設定していただけます。デフォルトは「横1.91 : 縦1] となり、幅1200px 高さ630pxの横長画像がピッタリと表示されます。

[設定] > [メディア] >「画像サイズ」の「サムネイルのサイズ」


商品画像 / 商品カテゴリー画像 / 商品代替画像

商品詳細ページの商品画像
商品一覧ページの画像

こちらの項目ですが、若干ややこしく感じるかもしれません。
あまり難しいことは考えたくない…といった場合はデフォルト設定のままで幅:800px以上 / 高さ:800px以上の画像をアップロードしてください。

ただし、一覧で画像をトリミングしたくない場合幅:800px / 高さ:800pxぴったりサイズで作成してください。(※デモサイトがこの設定です。)

画像を設定する場所

「商品画像」を設定する場所

[商品] > [すべての商品] 各商品の編集ページ 右カラムの「商品画像」
【参考】「商品の登録」基本的な商品:商品画像

「商品カテゴリー画像」を設定する場所

[商品] > [カテゴリー] のサムネイル
【参考】「商品カテゴリー」と「商品タグ」の登録

「商品の代替画像」を設定する場所

[WooCommerce] > [設定] >「商品」>「ショップページ設定」のプレースホルダ―画像
【参考】WooCommerce「商品」設定

一覧ページのサムネイルサイズを設定する場所

[外観] > [カスタマイズ] > [WooCommerce] > [商品画像] の「サムネイルの切り取り」 

商品画像 / 商品カテゴリー画像 / 商品代替画像 のすべてに反映されます。

画像サイズ

すべての商品で商品画像の縦横比率が同じ場合

  • サムネイルの切り取りで「未処理」を選択する(正方形の場合は「1:1」でもOK)
  • 幅:800px / 高さ:自由 ※すべての商品画像を同じサイズで作成してアップロードしてください。
💡 商品画像とカテゴリー画像をそれぞれ別のサイズで設定したい場合

例えば、商品画像は正方形(幅:800px / 高さ:800px)、カテゴリー画像は横長(幅:800px / 高さ:500px)にしたいといった場合は、商品画像と商品の代替画像幅:800px / 高さ:800px、カテゴリー画像のサムネイルには幅:800px / 高さ:500pxの画像をアップロードすればOKです。

注意点としては、画像を設定しない場合は、商品の代替画像が表示されるという点です。
サムネイル画像を設定していないカテゴリーの画像はこのサイズ(幅:800px / 高さ:800px)になり、カテゴリー一覧表示で綺麗に揃わなくなります。すべてのカテゴリーでサムネイル画像を漏れなく設定すれば問題無いでしょう。

商品詳細ページの商品画像の縦横比率が商品ごとでバラバラの場合

一覧でサムネイルのサイズを揃える場合(画像はトリミングされます)

正方形の場合

  • 「サムネイルの切り取り」で「1:1」を選択する
  • 幅:800px以上 / 高さ:800px以上の画像をアップロードする

正方形以外の場合

  • 「サムネイルの切り取り」で「カスタム」を選択する
  • 幅:800px以上 / 高さは入力した値に基づいて計算し、それ以上の画像をアップロードする(下の表を参照)
4:3幅:800px以上 / 高さ:600px以上の画像をアップロードする
4:2幅:800px以上 / 高さ:400px以上の画像をアップロードする

一覧でサムネイルのサイズを揃えない場合(画像をトリミングしたくない場合)
  • サムネイルの切り取りで「未処理」を選択する
  • 幅:800px以上 / 高さ:自由

「サムネイルの切り取り」の設定を後から変更した場合、すでに登録済みの商品画像が綺麗に表示されなくなる場合があります。

できるだけ最初に決定をして変更しないようにしてください。

デフォルトOGP画像 ※Japacart SEOプラグイン

OGP画像は、FacebookやTwitterなどのSNSで投稿がシェアされた際に、SNSのタイムラインに表示される画像です。
投稿/固定ページにアイキャッチ画像を設定した場合は、その画像がOGP画像として表示されます。
もしアイキャッチ画像を設定しない場合はこの「デフォルトOGP画像」が表示されます。

Fabookシェアイメージ
Twitterシェアイメージ

画像を設定する場所

[外観] > [カスタマイズ] > [Japacart SEO] > [OGP] のFacebookのデフォルト画像

※Japacart SEOプラグインはJapacartテーマご購入後に無料でダウンロードいただけます。

参考サイズ

画像サイズについては、Facebookや各SNSの仕様と閲覧している環境に依存するため判断が難しいのですが、2020年9月現在、下記で作成しておくと問題が少ないように思います。

  • 幅:1200px / 高さ:630px
  • 可能であれば)SNSによっては中央から正方形にトリミングされることがあるため、テキストなど切れては困る部分は中央630px以内におさめる
サイズ例: 幅 1200px / 高さ 630px
テキストを中央630px以内におさめる例
ネットショップ向けWooCommcerce対応WordPressテーマ Japacart(ジャパカート)

Japacartユーザーの場合はマイアカウントにログインの上、コメントしてください。

コメントに表示される名前はマイアカウント > アカウント詳細の「表示名」になります。

コメント欄は承認されるまで表示されません。

この投稿へのコメント

      1. 早速ありがとうございます。
        gifアニメを試してみたところ、動きません。
        サイズ2M、大きすぎますか?
        メディアにアップロードした時点ではプレビュー内で動いていたのですが、
        カスタマイズ画面でトップページメイン画像へ貼り付けると静止しています。

        1. ご連絡ありがとうございます。
          GIFアニメ―ションですが、当方のテストサイトでは問題無く表示されております。
          http://japawww.com/test2/

          素材は下記の素材ページから拝借しております。
          https://sozai-good.com/illust/gifanimation/rabbit-bear/1391

          同じ画像を設置して表示がされる場合はファイルサイズや書き出しの問題かもしません。
          GIFアニメをオンラインで圧縮できるサービスもありますのでお試しいただくと良いかもしれません。
          https://www.iloveimg.com/ja/compress-image/compress-gif
          https://www.bannerkoubou.com/anime/gif-resize/

          よろしくお願い申し上げます。

コメントを残す