画像サイズについて

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

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

---

ヘッダーロゴ

画像を設定する場所

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

参考サイズ

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

---

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

画像を設定する場所

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

参考サイズ

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

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

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

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

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

小さな画面向けの画像（任意）

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

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

---

投稿/固定ページのサムネイル（アイキャッチ）画像
サムネイルが設定されていない時のデフォルト画像

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

幅：1200px / 高さ：630px　

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

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

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

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

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

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

---

---

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

画像を設定する場所

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

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

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

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

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

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

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

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

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

画像サイズ

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

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

画像を設定する場所

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

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

参考サイズ

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