ブログのサイズと画像のサイズ

ブログの作り方
ブログの作り方

WordPressの初期設定が終わりました。

次はブログのサイズを先に決めておきます。何故か?というと、掲載する画像のサイズを決めておかないと、あとから変更するのが結構メンドクサイらしいのです。

画像のサイズを一括で変更できるプラグインもあるみたいですが、簡単にはいかないみたいですね。まあ、変えたくなったら覚悟をもって取り組みます。

ブログのサイズを設定する

ブログのサイズ、横幅ですね、それを設定します。

特に気にしたことはなかったのですが、いろいろなホームページやブログを見ていくと確かに見やすく感じるものがありますし、逆に見にくかったり、読みにくかったりと感じるものもあります。

でも、見てくれる方がブラウザをどういう設定にしているか?でも変わってくるだろうし、スマホでみるときは、また違った感じになります。たぶん、見る人の好みの問題が大きいような気がしますね。

私は特にこだわりはありません。このブログのテーマはCocoonを使っていますので、その初期値に近いもので大丈夫でしょう。ブログの形も、本文があって、その右側にメニューというのかな?サイドがあるのが好みです。

ちなみに、初期値はこうなっています。Cocoon設定メニューから、

Cocoon設定のメニュー

カラムを選択。

Cocoonのカラム設定の選択

初期値はこんな感じ。

Cocoonのカラム幅の初期値
Cocoonのカラム幅の初期値
Cocoonのカラム幅の初期値

Cocoonのマニュアルサイトの説明では

引用:Cocoon
引用:Cocoon

と、なっています。

ちょっとだけ変えました。

設定したカラム幅

これでいきます!

設定したカラム幅

カラム間の幅(本文とサイドバーの間の幅)はそのまま20pxにして、最後は変更をまとめて保存をクリック。

画像のサイズはどれぐらい?

ブログのサイズを決めました。ブログに使う画像は、ブログのサイズにあった画像の大きさにするのがいいそうです。まあ、そうでしょうね。

画像のサイズは2つある

さて、一口に画像のサイズと言っても、2つの意味があるようです。ひとつは見た目の大きさと、もう一つは容量、重さとも表現されていますね。

大きさは、横×縦、その長さは、px(ピクセル)という単位で表現されています。先ほどのカラム幅を決める時と一緒の単位です。

容量は、バイト数という単位です。詳しくは意味は判りませんwww。KB(キロバイト)、MB(メガバイト)という単位で書かれています。

サイズが大きすぎると読み込みに時間が掛かってしまいますし、小さすぎると何の画像かわからずに見にくくなる場合もあるので、適切なサイズにしなければいけません。

画像の種類?

いろいろ勉強が必要ですね。

ざっと調べても、JPEGGIFPNGBMP、エトセトラ・・・。最近Googleが開発した、WebPというのもあるらしい。

それぞれの特徴や説明の詳細は専門的なサイトで調べてくださいね。

ブログやホームページなどWebで表示するには、最新のWebP(ウェッピー)がいいみたいですが、新しすぎて対応できてないソフトやアプリがあるようです。せっかく使っても表示できないなら意味がありません。でも、Googleが開発しているなら、そのうち一択になりそうな予感もします。

実際には、写真など色数が多い場合は、JPEG(ジェイペグ)、イラストなどはPNG(ピング)がいいと言われているようですので、それにします。

Google Discover?

まだまだ勉強が必要ですw

GoogleDiscoverとは?
ChromeやYouTubeを開くとオススメが出てきますよね?今までの閲覧履歴に沿ったものが出てきます。物欲をそそるものが出てきたりして困る時もありますね。この仕組みがGogoleDiscoverと言うらしいのです。

せっかくそういう機能があるなら活用して、少しでも誰かのオススメに表示されたいです。

オススメされるには幾つかの条件があるのですが、その中の一つに、画像のサイズは横幅1200px以上というのがあります。GoogleDiscoverでオススメされたページの画像は、そのページを開いたときに見える画像で、アイキャッチと呼ばれる画像です。

こんな感じでページを開いた時に見える画像。WordPressで設定できます。これを1200px以上にしましょう!と言うことみたいです。

画像のサイズを決めます

そのほかに推奨されていることは、

アスペクト比(横縦比)16:91ページ16MB以内。これを目安にします。

横幅は1200px以上となっていますが、少しでも画像の容量を少なくしたいので、横幅は1200pxにします。推奨のアスペクト比で計算すると、縦は675px。

アイキャッチに使う画像は、横1200px縦675px

本文中に使ったりする画像は、オススメの画像に使われることはないので少しでも容量を少なくしたほうがいい。先ほど決めた本文のカラム幅いっぱいの800pxにします。

メディア?の設定

WordPressでは画像の事をメディアと読んでいるようです。

WordPressに画像をアップロードすると、サムネイル中サイズ大サイズの3つのメディアが自動的に生成されて保存されるとの事。そのサイズを設定します。

アップロードしたそのままの大きさの画像と自動生成された3つの画像、合わせて4つのメディアをブログの中で使い分けるようですが、どれくらいに設定すればいいんでしょうか?

とりあえず、Cocoonのマニュアルサイトでオススメされている設定にしておきます。

設定からメディアを開きます。

メディア設定のメニュー

初期値はこちら。

メディア設定の初期値

以下のように入力して、変更を保存をクリック。

変更したメディア設定の数値

サムネイルのサイズの高さと、大サイズ、中サイズの高さの上限0にしているのは、元の画像のアスペクト比で保存するための設定のようです。

これでブログのサイズの設定と、それに合った画像サイズの設定が終わりました。