ブログやサイトを作る時、必ず利用する素材の一つが画像です。
テーマによっても画像の指定サイズは異なっているので、作り手としては面倒この上ありません😓
JINで画像を使うときの最適なサイズ、設定方法についてご紹介します。
- どうして画像サイズを知らないといけないか分からない
- 利用される画像サイズを全部知っておきたい
- Jinで吹き出しを多用している人、必見！
どうして画像サイズを知っておく必要があるのか？
画像サイズには２つの意味があります。
- 縦・横の長さのこと
- 画像の重さのこと
①縦と横の長さ
画面に表示される画像のことです。
ページには幅・高さの大きな画像、小さな画像たくさんあります。
もやっとした画像が表示される時、それは小さな画像がむりやり拡大された場合のものです。
②画像の重さ
画像の縦横のサイズ、色情報などによって重さが決まります。
このサイズが重ければ重いほど綺麗な画像。
写真には最適ですが、ブラウザ表示にめちゃくちゃ時間がかかる画像です。
どうして画像サイズが大事なの？
それは、ページ表示が、ひいてはサイト全体の表示速度が遅くなるから。
WordPressは簡単に作れるから、フリー画像をダウンロードしてきて貼り付ければすぐにできちゃいます。
WordPressもおバカではないので、設定どおりに画像を縮小したものを表示してくれます。
が、余計なサイズ変更をさせたり、重い画像を表示させようとすると何が起こるか？
ページがなかなか表示されない
リンクをクリックしてなかなか表示されないページ。
あなたは待ちますか？
適切な画像サイズを用意しておくと、少なくとも画像が原因でページ表示が遅くなるということがなくなります。（それでなくてもJINは表示が遅い）
適切な画像のサイズを知っておくことは、長くサイトを運営していく上でとても大事なことなのです。
WordPressの画像について
WordPressにアップロードされた画像は、自動的にいくつかのサイズに分けて変更されて保存されます。
このサイズ変更は設定で変更できるのですが、ほとんどの人が基本設定のまま利用していると思います。
これを変更して最適なサイズに近い画像を自動生成してもらうこともできます。しかし、将来あなたがテーマを変更したときに不具合があるかもしれません。
最初は基本の設定のままで良いです。
ここでは、アップロードする画像サイズは、大きさ・重さともに気を配らないといけない、ということだけ覚えておきましょう。
光回線だからそんなにこだわらなくても？
訪問者のほとんどがスマフォのWifi・データ通信経由での閲覧です。
あなたもスマフォでネットする時、ページ表示が遅いサイトをいくつも見たことがあるはずです。
これが自宅で光回線を引き込んでいる人だらけならいいのですけどね。
それでも遅いページは遅いんですよ〜？
できるところは少しでも転送量を削って、１秒でも早くスマフォにデータが届くように気を配って制作しておきましょう。
画像サイズ一覧
JINで利用される画像サイズの一覧です。
一つずつ説明します。
ヘッダー画像
ヘッダー画像とは
Jinを使っているページでよく見られるのが、大きなヘッダー画像です。
サイトのイメージを伝えたり、画像でメッセージを伝えたりできます。
じつはこのサイトも最初はヘッダー画像を用意してました😁
設定方法
【ダッシュボード】→【外観】→【カスタマイズ】→【サイトデザイン設定】
サイズ
Jin公式ガイドによると、横幅2400px以上となってます。
サイトロゴ画像
サイトロゴ画像とは
ページの最上部に表示される画像のことです。
主にサイトタイトル・サブタイトルなどが表示されます。
画像にすることで訪問者に覚えてもらいやすくなります。
また、電話番号なども併せて表示させておくと大変便利です。
設定方法
【ダッシュボード】→【外観】→【カスタマイズ】→【ヘッダー設定】
サイズ
最適なサイズは、おそらくモバイルでも読みやすいサイズということで、あまり大きくないのが良いでしょう。
横300px〜500px、縦60px〜100pxくらいを目安にしてみましょう。
サイトアイコン＝ファビコン
ファビコンとは
ブラウザのタブに利用されるアイコンのことです。
未設定だとJinのファビコンが表示されます。
設定方法
【ダッシュボード】→【外観】→【カスタマイズ】→【サイト基本設定】
サイズ
サイトアイコンは512 × 512ピクセル以上の正方形です。
ファビコンは、タブバーの横に表示されるだけでなく、ショートカットアイコンとして使われたりします。
そのため、大きめの画像を用意しておきます。
様々な状況に合わせたファビコンがぼやけることなく自動的に利用されるためのものです。
ファビコンについては、こちらのサイトで詳しくご紹介されてます
アイキャッチ画像
アイキャッチ画像とは
ブログ記事やカテゴリーページの上部に表示される画像のことです。
画像に文字を入れてどんな内容なのかを訪問者へ伝える役割があります。
Jinはカテゴリーをまとめてマガジン表示させてますが、その画像にも使われています。
設定方法
●ブログ記事（投稿）・固定ページ
【各編集画面の右サイドバー】
●カテゴリーページ
【カテゴリーページを表示】→【カテゴリーを編集】をクリック
【カテゴリーのアイキャッチ画像】に画像を設置します。
サイズ
記事のアイキャッチ画像の最適サイズは、JIN公式ページにて解説があります。
JINではアップロードしてもらった画像を、16:9の比率になるよう自動トリミングするようになっています。そのため横幅が760px以上の画像をいれてもらえると綺麗に入ります（縦は自動で切り取られます。）
https://jin-theme.com/manual/eyecatch-img/
厳密に言えば、横760px：縦428pxが16:9にあたるので、これくらいの画像サイズで作成するとアイキャッチが綺麗にはまります。それ以上の大きさでも、16:9の比率を守れていると特に綺麗にはまります。
カテゴリーページのアイキャッチ画像サイズは下記のとおり。
この時の注意点として、画像サイズが幅1280px/高さ720px以上でないと設定ができない仕様となっております。あらかじめご確認の上、設定をしてください。
https://jin-theme.com/manual/category-eyecatch/
JIN のカテゴリーページを１カラムにする方法をこちらでご紹介しています。カテゴリーページがスッキリして良い感じです。
文中の画像サイズ
文中の画像
ブログ本文内に入れる画像のことです。
ただ挿入するだけではなく、カバー写真にしたりスタイルをつけたりできます。
設定方法
ブロック右側の＋をクリックして画像を選択するか、【/画像】【/image】と入力して呼び出す。
サイズ
サイドバーのある２カラムの場合は、この左側部分は760px（シングルカラムは960px）です。
この幅を目安に画像を作りましょう。
Jinの吹き出し画像のサイズ
吹き出し画像とは
JINの機能の一つ・吹き出し機能で利用する画像のことです。
吹き出しが簡単に入れられる
設定方法
ブロックの右側の＋をクリックして吹き出しを選択するか、【/吹き出し】と入力して呼び出す。
サイズ・形
吹き出し自体のサイズは小さいのです。
表示されるのは、80px x 80px。
が、JIN公式サイトの吹き出し画像のサイズを見ると、398＊365となってます。(Retinaなど高解像度対応)
通常であれば、WordPressが画像を取り込むときに自動生成した小さいサイズ（基本設定は横150px）になります。
例えば、400 x 400の正方形のファイルサイズを利用すると11KB。
これを150 x 150 にするだけで、4KBになります。
まあ、大きな差ではないかもですが😅
- 自動的に小さな画像が利用されていない
- 大きな画像を設定したら大きい画像がそのまま使われる
- 吹き出しを使うなら、80px x 80px〜150px x 150pxのサイズにしましょう。
- 現在すでに多用している場合は、メディアのところで画像編集し、サイズを80px〜150pxまで落としましょう。
- オリジナルの吹き出し画像がない場合は、先に保存しておくことを忘れないこと。
画像を webp へ変換するのが良い場合もあります。webp 変換もPhotoscape X で簡単にできますよ♪ただし、サムネイルは jpg や png のままが良いようです（サービスによっては webp サムネイルを表示できないから）。
サイドバー
サイドバーとは
ブログの右端や左端に分けて設置してある部分ですね。
主に、カテゴリー一覧や最新の記事、コメント、広告などを設置する場所です。
設定方法
サイドバーは、ウィジェットで設定します。
Jinのウィジェットの種類については、こちらを御覧ください。
サイズ
サイドバーは、約330pxです。
Google Adsenseなどの広告もこのサイズに合うようにできていますし、その他の広告もこの幅にあったものがあります。
シングルカラム（LP）
シングルカラム（LP）とは
サイドバーのない、コンテンツだけのページのことです。ランディングページ（LP）でよく使われる形式です。
JINでもトップページをカラムなし設定もできます。
設定方法
＞トップページのシングルカラム設定
【カスタマイズ】→【トップページ設定】
＞投稿・固定ページのシングルカラム設定
【各編集画面の右サイドバー】
サイズ
シングルカラムになるということは、横幅が広がるということです。
そのため、画像の横幅を２カラムよりも長く利用することができます。
１カラムのサイズは、760px、960pxです。
このサイズまで画像幅を広くしても良いですね。
ただし、あまりに大きすぎる画像を設置するのは考えものです。ご利用は慎重に。
気になったらページスピードを計測
ご自分のサイトの表示スピードが気になったら、スピード計測のできるサイトでスピードを計測しておきましょう。
スピードが高いに越したことはないのですが、Jinは初期からスピードが遅いテーマです。こちらのサイトでの計測結果も計測後に掲載しておきますので、参考になさってください。
まとめ
いかがでしたか？
以下、サイズのまとめです。
- ヘッダー画像：横幅2400px以上
- ロゴ画像：横300px〜500px、縦60px〜100pxくらい（もちろんこれ以上大きくても良い）
- サイトアイコン：512 × 512ピクセル以上の正方形
- アイキャッチ画像（ブログ記事・個別ページ）
・・・横760px：縦428px - アイキャッチ画像（カテゴリーページ）
・・・幅1280px x 高さ720px以上 - 文中の画像サイズ・・・760px
- 吹き出し・・・80px x 80px~150px x 150px
- サイドバー・・・約330px
- シングルカラム（LP）・・・760px / 960px
もう少しまとめてみました。
ご自由にダウンロードしてください。
ヘッダー、キャッチ、アイコン、記事中の画像などなど。
画像を沢山利用することが多いですよね。
こちらのページでもご紹介しましたが、
小さな表示場所に大きな写真を指定すると、ページ読み込みスピードが大変遅くなります。
画像サイズ処理は、面倒ですがとても大切な設定の一つです。
サイトで利用する画像を作るときは、ぜひひと手間加えてあげてくださいね。
画像を作成するのに便利なツール
