こんにちは、みよし之です。
今回は、ブログに画像をアップロードする時、横幅や縦幅についてを記事にしてみました。
メインコンテンツの横幅は、いくつの長さがいいのかな？
このように思ったことはありませんか。
もしくは、サイドバーの横幅やサイト自体の横幅はどれくらいなんだろう。
ここでは、それをイメージしやすいように説明しています。
イメージ？
実は、どれが正解なのかわからないんですよね。
ここで説明する内容は、拡大や縮小によって若干の数字が違ってくるからです。
なので、私が基準としている方法についてお伝えします。
開発者ツールや検証を使ってみよう！
最初に、数字がなぜ若干変わってくるのかということについて説明します。
普段、Edgeの開発者ツールやchromeの検証を使ったことがありますか。
これを使ってみると、その理由が分かりやすいかもしれません。
画像のサイズやファイルサイズを調べるときにも便利です。
- 調べたい画像やボックスやフキダシなどを右クリック
- Edgeだと開発者ツール、chromeだと検証をクリック
- 右側にコードが表示
- コードの上にマウスカーソルを合わせる
画面上に青や橙色・緑色などでその場所を知らせてくれます
これで調べてみると、長さや高さを数字で表示されているのが分かります。
このように使ってみると、何となくメインコンテンツの幅やサイドバーの幅、余白などが分かりやすいと思います。
ちなみに、仮に表示されているコードを削除してみると、画像などが消えたりします。
これは自分が見ているサイト上のものであって、元のサイトのコードを変更しているわけではありません。なので、サイトを一度閉じて開きなおしてみると元に戻っています。
それでは、どれが正解なのかわからない理由について説明します。
Edgeでもchromeでもいいので、画面右上に表示されている設定・・・を開いてみてください。
ズームという項目がありますので、それを25％まで縮小してみましょう。
同じように調べてみると、数字が少し異なっているのが分かりますか。
- パソコンのシステムでの拡大縮小でも異なる
- ブラウザ画面の拡大縮小でも異なる
- ディスプレイの解像度でも異なる
- ブラウザでも異なる
Edgeとchromeでも異なることがあります
こういったことをイメージすると、画像のアップロードはどれくらいが適しているのかも理解しやすいように思います。
- ヘッダーの部分
- テーマによるサイズの違い
ヘッダー画像を作成する際には、サイズを大きくしないといけない理由が分かりましたか。
最近、Cocoonからエックスサーバー 
が開発したXWRITEにテーマを変更しました。
サイト全体の幅が少し大きくなったのを実感しています。これは、比べたいサイトと自分のサイトを新しいウィンドウで開いてから、上下に並べることで比較することができます。
画像をアップロードしてみましょう！
ここまでは、どれくらいの画像サイズがいいのかをイメージする内容でした。
ここでは、実際に異なる画像サイズをアップロードしたものを使って説明していきます。
なお、テーマによって横幅が違うと思います。ここでは、Cocoonを使った場合で説明しますが、これも自分で試してみると理解しやすくなると思います。XWRITEにテーマを変えても違いは変わらない感じです。
Cocoon設定を開いて、カラムの項目にメインカラムの幅という項目があります。ここで説明する内容は、このコンテンツ幅を800に設定した状態で説明しています。たぶん、デフォルトだと思います。
では、次の3つの画像をご覧ください。
画像の高さは150pXに統一して、アップロードをしています。
ぱっとみて、3は横幅が少し短いことが分かりますよね。
次の表は、アップロードした際のメディアライブラリのデータになります。
| 1の画像 | 2の画像 | 3の画像 | |
| サイズ | 1000×150 | 850×150 | 800×150 |
| ファイルサイズ | 31ｋB | 30ｋB | 30ｋB |
| Webp後 | 11.0ｋB | 11.1ｋB | 11.1ｋB |
なお、プラグインEWWW Image Optimizerを使用しています。
設定により画像のリサイズを1024pxにしています。1024ｐｘ以上の画像はすべて1024ｐｘに変更されるというわけです。
そのため、上記3つはそのままアップロードしているということになります。
2・3と比べて1も少し違いがあるのが分かりますか？
こちらの図をご覧ください。
高さがこのように違います。
このように横幅を大きめにすると縦幅が小さくなります。注目するべき点は、ファイルサイズですね。
- 3つともファイルサイズがほぼ同じ
3のファイルサイズが2と比べて変わりがないのは、色の濃さによる問題によるものと思われる
白ではなく濃い色だと少し違いがありそう - 1のサイズは大きいが、縦幅が小さい
その分ファイルサイズが小さくなっている
以上のようなことから、アップロードする画像を画面いっぱいに表示したい場合は、850～画像のサイズ以内がおすすめということになります。
ただし、色の濃さにより、サイズは違いが出る場合もあります。
実際に、ペイントやGIMPなどを使って、サイズ違いの画像を作成し、アップロードすると分かりやすいと思います。
縦幅についての補足
縦幅を考慮しないといけない場合があります。
スマホの画面は、パソコンと比べても小さいです。
縦幅が長くなれば、スクロールして画像を見ることもあります。そのため、ユーザーに分かりやすく表示させることも大切なことです。
カラムを使った場合について
ここでは、カラムを使った場合について説明します。
これまでの説明で、横幅・縦幅について理解ができたのではないでしょうか。
カラムを使った場合は、どうなるのだろう？
この場合は、割り算して画像をアップロードさせることができます。
2カラム（等分）であれば、850÷2＝425px
3カラム（等分）であれば、850÷3≒284px
このような感じで覚えておくとよさそうです。
特に記事をリライトしようと思ったときは、このことで後悔することがありますので気を付けておいてください。
こちらの記事は、画像サイズが大きいものをアップロードした時の記事になります。
また、ヘッダーに関する記事は、こちらになります。
まとめ
画像のアップロードする時のサイズは、何となくイメージがつきましたでしょうか。
Edgeの開発者ツールやchromeの検証は、サイズやファイルサイズを確認したり、他のサイトをチェックすることができます。これを使えば、画像のサイズはいくらがいいのだろうかもわかりやすくイメージできたのではないでしょうか。
また、実際にいくつかのサイズ違いの画像をアップロードしてみることで、自分のテーマはどれくらいのサイズがいいのかもわかったのではないでしょうか。
注意しておくことは、小さくしすぎないことです。記事のリライトのことも考えておきましょう。
最後まで読んでいただきありがとうございました。
