画像サイズについて
このページでは各画像のサイズについてご説明をいたします。
画像サイズは特に決まりはありませんが、大体バランス良く表示されるサイズや比率などについてご紹介していますのでよろしければ参考にしてみてください。
ヘッダーロゴ
画像を設定する場所
[外観] > [カスタマイズ] > [サイト基本情報] の「ロゴ」
参考サイズ
幅 800px以下 / 高さ 140px
※高解像度環境で綺麗に表示するため、実際の表示サイズより大きなサイズを用意します。
トップページメイン画像/スライド
画像を設定する場所
[外観] > [カスタマイズ] > [トップページメイン画像/スライド] の「画像1～3」
※静止画像の場合は「画像1」のみ設定。スライドにする場合は「画像1～3」を設定。
参考サイズ
「画像またはスライドの幅」でコンテンツ幅（1200px）を選択した場合
幅：1200px / 高さ：400px程度
「画像またはスライドの幅」でフルサイズ（ウィンドウ幅）を選択した場合
この設定では画面幅が大きくなればなるほど、画像の縦の長さも大きくなっていきます。
そのため、画像の高さはそこまで大きくしないことをおすすめします。
幅：2000px / 高さ：600px程度
小さな画面向けの画像（任意）
スマートフォンなどの小さな画面の時に表示される画像を設定します。
幅：767px / 高さ：お好みで
投稿/固定ページのアイキャッチ画像
投稿/固定ページにアイキャッチ画像を設定をすると、投稿一覧およびJapacart SEOプラグインの「OGP画像」に設定されます。
アイキャッチ画像をアップロードする場所
各投稿と固定ページの編集画面の右サイドバーの「アイキャッチ画像」から画像をアップロードします。
参考画像サイズ & おすすめの設定
幅：1200px / 高さ：630px
※2020年10月現在、Facebookでシェアした際にこのサイズがきれいに表示されます
💡 アイキャッチ画像を設定/変更したのにSNSでシェアしたときに反映されない場合
Facebookなどでシェアした際に画像が反映されない場合は下記を実行してみてください。（画像を差し替えた場合も同様です）
- Facebookの「シェアデバッガー」ページでスクレイピングの実行
- Twitterの「Card Validator」でカードのプレビュー
投稿一覧のサムネイルサイズについて
投稿一覧で表示されるサムネイルのサイズは、[設定] > [メディア] >「画像サイズ」で設定した「サムネイルのサイズ」（デフォルトは幅：150px / 高さ：150px）になります。
![[設定] > [メディア] >「画像サイズ」の「サムネイルのサイズ」](https://japacart.com/wp/wp-content/uploads/2020/10/jw-image-size-media-settings-1.png)
サムネイルサイズ設定例
幅：300px / 高さ：200px ※3 : 2にする場合（デモパン屋の一覧と同じ）
幅：300px / 高さ：158px ※OGP画像（幅：1200px / 高さ：630px）と同じ比率にする場合
幅：300px / 高さ：300px ※正方形にする場合
❗「サムネイルのサイズ」の変更を行った場合、変更前に設定したサムネイルには変更後のサイズが適用されません。投稿編集画面にて、一旦アイキャッチ画像を削除をして、再びアップロードをしてください。
もし数が多い場合は「Regenerate Thumbnails」プラグインを使用してサムネイルを一括再作成することをおすすめします。
デフォルトサムネイル画像
投稿一覧のサムネイル画像には投稿/固定ページで設定したアイキャッチ画像が設定されますが、もしアイキャッチ画像が設定されていない場合はこの「デフォルトサムネイル画像」が表示されます。
画像サイズ
[設定] > [メディア] >「画像サイズ」で設定した「サムネイルのサイズ」
※前項の「投稿一覧のサムネイルサイズについて」を参照ください。
画像を設定する場所
[外観] > [カスタマイズ] > [デザイン] > [デフォルト画像] の 「デフォルトサムネイル画像」
商品画像 / 商品カテゴリー画像 / 商品代替画像
こちらの項目ですが、若干ややこしく感じるかもしれません。
あまり難しいことは考えたくない…といった場合はデフォルト設定のままで幅：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画像」が表示されます。
画像を設定する場所
[外観] > [カスタマイズ] > [Japacart SEO] > [OGP] のFacebookのデフォルト画像
※Japacart SEOプラグインはJapacartテーマご購入後に無料でダウンロードいただけます。
参考サイズ
画像サイズについては、Facebookや各SNSの仕様と閲覧している環境に依存するため判断が難しいのですが、2020年9月現在、下記で作成しておくと問題が少ないように思います。
- 幅：1200px / 高さ：630px
- （可能であれば）SNSによっては中央から正方形にトリミングされることがあるため、テキストなど切れては困る部分は中央630px以内におさめる
Japacartユーザーの場合はマイアカウントにログインの上、コメントしてください。
コメントに表示される名前はマイアカウント > アカウント詳細の「表示名」になります。
コメント欄は承認されるまで表示されません。