WordPress Cocoonブログ 画像サイズまとめと参考リンク

Wordpress Cocoonブログ 画像サイズまとめと参考リンク
アイキャッチ画像は

BUMIPUTRAによるPixabayからの画像

ブログで使う画像のサイズをまとめました!

画像を使うかはもちろん自由です。

目安ですので、お好みで変更しましょう。

いくみ
いくみ

「公式推奨設定」だけは、その通りにしましょう。

公式推奨設定

 [WordPress] ファビコン 512 x 512 pixcel 以上の正方形      
 [WordPress] プロフィール用のアイコン 240 x 240 pixcel の正方形
 [Cocoon] 吹き出し 160 x 160 pixcel 以上の正方形

注:「ファビコン」の画像形式は、.pngがおススメです。.jpegを設定したとき、非表示になってしまったブラウザがありました。

備考:「プロフィール用のアイコン」は「アバター」というらしいです。

お好み目安情報

アイキャッチ何を重視するかで変わります。ぜひとも、こちらのサイトをご覧くださいませ。
おススメ ブログやYouTubeの最適なアイキャッチ画像サイズ比率はこれ!
上のページで推奨されているサイズが以下です。(ゼッタイ読んだほうが良いです。)
・1200×630px(1.91:1)-> 各種SNSでの露出にもピッタリ。
・1200×675px(16:9)-> 高汎用性。
ホームイメージ 同上。
ヘッダーデバイスによって解像度が異なるため、何を重視するかでサイズは異なります。
個人的には、横幅は1400pxくらいはあるほうがいいなという結論になりました。縦の高さは、実際の高さに2割増し以上、余裕を持たせるのがおススメです。
ヘッダーサイズの測り方など、以下の記事でまとめています。

詳しくはこちら:[Cocoon] ヘッダー画像サイズと選ぶポイント
ブログタイトル (ロゴ画像)
センターメニューの場合
余程極端なサイズでなければうまくいくと思います。

ご参考まで、当ブログのロゴ画像は396 x 70 pixcel、213 x 91pixcelなどでした。フォントサイズ40でロゴ画像を作成、余白は少な目。

以下のヘッダーサンプルのセクションにロゴ画像のサイズも記録しています。
ヘッダーサンプル・選び方

トップメニューの場合
「トップメニュー」の場合は、358 x 60 pxを使用していました。
トップメニューはデザインによって縦横比が気になるときがありましたので、以下に詳しくまとめています。
[Cocoon] ロゴ画像サイズ ~ トップメニュータイプの場合

目安の提示が不可能

サイト背景 デザインの選択によってあまりにも異なるので目安無し。
 当ブログはサイト背景画像なし。色々なオプションのテスト結果はこちら
いくみ
いくみ

雰囲気がでますし、視覚情報があるほうが記憶に残りますよね。

画像の準備、おススメです。

1.準備する画像は、.pngか.jpegがおススメです。便利な画像圧縮サイトが、その2種類をサポートしているからです。写真は.jpeg、イラスト系とスクリーンショットは.pngが良いと思います。以下の記事で、容量や比較の見た目をしています。

2.ファイル名は英数字(直接入力)をおススメします。日本語やダブルバイト文字を使用すると、自動でファイル名が変換されて、ちょっと分かりづらくなります。

3.画像サイズの確認方法はこちらでまとめています。

サイズについての詳細リンク情報

「目安」だけではなく、詳細も知りたいかたは、ぜひ以下のリンクを参考にされてください。

いくみ
いくみ

このサイズじゃないとダメ」という意味ではないですよ!

自分がどうしたいかで決めます。

アイキャッチ画像について

自分自身が迷いに迷ってきたために、この記事でもおススメの変遷があって大変失礼しました。

ついに、このページを読んでスッキリしました。

提案されていたサイズと比率です。

・1200×630px(1.91:1)

・1200×675px(16:9)

引用元: https://321web.link/eyecatch-size/

複数の記事を読みますと、どちらかというと(1.91:1)のが人気かなという印象でした。

コクーンの場合、16:9(1.78:1)にすると、サムネイル画像の表示が思い通りの仕上がりになります。とはいえ、(1.91:1)を含め近い比率だとトリミングされてもひどいことにはならないです。

なので、結局どっちでも(その他でも)大丈夫ですけどね。

好きな比率で良いのですが、自分がよく利用する無料画像サイトや画像編集サイトで多く使われているとか、やりやすい比率を選ぶと楽ちんという考え方もありますね。

ダウンロードした素材を希望の縦横比に合わせたいときの方法は以下でまとめています。ご参考まで。

Canvaのテンプレートはどちらの比率も豊富です。以下の記事の目次2-2番 ブログのアイキャッチ画像にまとめました。

フォーラム情報

Cocoonフォーラムで以下のスレッドがありました。
参考リンク アイキャッチ画像のサイズについて

少なくとも横幅が1280px以上、出来れば1920px以上でも良いかもしれません。

今後、機器の性能は上がっていくので、これぐらいのサイズが設定してあっても全く問題ないと思います。

わいひらさんのコメント フォーラムより アイキャッチ画像のサイズについて

僕の場合は、パソコンで表示させる横の2倍にしています。縮小率が50%だと文字が綺麗に表示できます。

パソコンで横800pxで表示させる画像は、1600pxで作っています。(横1600px縦1200)

また、AMPにするとGoogle Discoverが狙えるので、やはり1200px以上のサイズがオススメです。(といっても、1200px以下でもDiscoverされることがあるそうですが)

たなかまさんのコメント フォーラムより アイキャッチ画像のサイズについて

大きめが推奨されていますね。容量が増えるということもあるので、その辺はホントに何を重視するかだと思います。画質なら大きめのが良いでしょうし、容量なら必要最低限の幅になりますし、スピード・・・もサイズが小さいほうのが速いだろうなと思います。最低800はあるほうがよくて、いろんな意味で1200は無難な線かなと。

サムネイルの縦横比

アイキャッチ画像は、記事のトップだけではなく「新着記事」や「人気記事」などの小さいサイズでも表示されますね。

小さいサイズで表示されている画像を「サムネイル画像」と言います。

サムネイル画像の縦横比

Cocoonでは、その縦横比を以下から選べます。

  • 9:16, 1:1.777..(地デジ・YouTube比)デフォルト
  • 約5:8, 1:1.618..(黄金比)
  • 2:3, 1:1.5(一眼レフ比)
  • 約5:7, 1:1.414..(白銀比)
  • 3:4, 1:1.333..(アナログテレビ・デジカメ比)
  • 1:1(正方形)

詳細はこちらの公式ページにあります。
参考リンク テーマ全体のサムネイル画像の縦横比(アスペクト比)を変更する方法

それだけでは表示が変わらない比率への対策が更にこちらの公式ページにあります。
参考リンク テーマが利用しているサムネイルを再生成して最適化する方法(画像の大きさを揃える)

設定場所は、[Cocoon設定] > [画像]タブをスクロール。 [全体画像設定]セクションにある[サムネイル画像]で設定できます。

[Cocoon設定] > [画像]タブの [全体画像設定]セクションにある[サムネイル画像]

デフォルトは9:16(1:1.78)比率になっています。アイキャッチをその比率で作ると、サムネイル画像の仕上がりがイメージ通りになりました。

画像の縦横比は統一

私はザックリと、何となく横長ならいいや、としていたのですが・・・。それは良くないことだったような気がしています。自信のない言い方になって申し訳ないのですが。

不確かな感想なんですが、最近「CLS」だの「LCP」だのと、画像に関わる数値への評価が厳しくなっている気がしてます。これはサーチコンソールに表示される指標です。

難しくて理解が追い付かないうえに、サチコさんの数値の上り下がりのタイミングもハテナ。

モバイルで、90件以上の「不良URL」が数カ月続いていたのですが、9月になって、突然その90件以上が「優良URL」になりました。

いくみ
いくみ

ありがとう。

嬉しいけど何で?

ちなみに、タイミングがズレているので違う・・・かなとは思うものの、唯一その期間にした「全体に及ぶような変更」は、「高速化設定をオンにした」ことです。

高速化についての公式ページ:Cocoonおすすめのサイト高速化設定

以下のAMP設定も試しました。ただ、一時的に戻していたりもしたので、更に関係ないかもしれないんですけど★。

AMPの設定の公式ページ:テーマをAMP対応する方法

よく分からないまま乱暴な言い方になりますが、「画像の表示はスムーズにこしたことない」ということで。

素人考えではありますが、縦横比もサイズもなるべく同じにしておくほうがスムーズな気がする。というのが今の私の推測でございます。

ホントは、コクーンで用意されている「タイル型」への憧れもあって、次に作るサイトでは、バラバラのアイキャッチ画像の縦横比で「タイル型」を使ってみたいという野望もあったのですが。どうなんでしょうかね・・・。

コクーンサイトで、思いっきりタイル型を有効利用しているサイトをまだ見たことがなくて。スッキリ整頓されてる感じもいいんだけど、タイル型で、大小様々なポスターが貼ってあるみたいな雰囲気を出せるのではないかと想像してワクワクしていたのですが。しかも3列とかにして!

でも昨今のCLSやらLCP的には、それはどうなんだろう・・・というのが分からず。石橋をたたいて渡る私としては、やめとくかな・・・となり、ショボンとしてます。グーグルの君が発信している情報を理解できるようになりたい・・・。読んでも分からない。

とりあえず、縦横比やサイズを統一してサチコさんに文句を言われることはないだろう・・・と思い、私は今後16:9でいこうと思います。

サイズも統一しておくほうが良いだろうと思います。

私はイロイロと変遷して、数種類のサイズのアイキャッチを使っているのですけども。640 -> 800 -> 1000 -> 1260 -> 1280 -> 800みたいな。笑。最後に800にしていたのは、「そういえば、SNSの露出もグーグルのディスカバリー?にも、選ばれる予感がしない・・・。だったら容量を節約しよっかな。」と思ったためです。

後ろ向き。笑。横幅は今もちょっと迷ってます。

ホームイメージ

ホームイメージは、ツイッターやFacebookで「ブログのトップページ」がシェアされたときに表示される画像です。

(「記事のURL」がシェアされた場合は、記事に設定しているアイキャッチ画像が使われます。)

Cocoonの初期設定では、Cocoonテーマの画像になっています。

いくみ
いくみ

「ホームイメージ」という存在を知りませんでした。

以下のサイトで勉強させていただきました。

【ブログカード】Cocoonを使い始めたら、ホームイメージを忘れずに設定しよう
WordPressテーマ「Cocoon」は、エディタ画面(投稿画面)で記事のURLを入力すると、その記事のブログカードが表示されます。たとえば、こんな感じでURLを入力するとこのようにURLの部分がブログカードになって表示されます。そして、

追記(8月30日)

ホームイメージを作ったら、その画像をNO IMAGE画像に設定するのがおススメです!

以下でまとめています。

ヘッダー画像

当ブログでテストをして、サイズについて記事にしています。

ヘッダーサイズなどを測るのに便利なツールの紹介もしています。

サイト背景画像

デザインのオプションによってあまりにも変わるので、推奨も目安も書けないんですよね。

例えば、小さい画像でパターン柄にしたり、大きい1枚をドーンと設定することもできます。

サイズとは直接かかわりませんが、設定方法などがまとまっている記事です。

ファビコンとアバター画像

設定方法をまとめております。

ちなみにファビコン作りにものすごくおススメのサイトがあります。

『icooon mono』のおススメポイント
  • 無料。
  • 登録不要。
  • 商用利用可。
  • 種類が豊富!
  • ダウンロードする前に、自分で色を指定できます!最高に便利・・・!(ブラウザはChromeで。)
  • 画像の種類でPNGを選べば、透過にできます!手間いらず!
  • ファビコン推奨サイズ512pxが選択肢にあるので、クリックすればサイズOK!

ロゴ画像

ロゴ画像は、フォントや余白設定、テーマの仕様も関わるので、サイズはテストをしつつ見極めるのが良いと思います。

「ロゴ画像の作り方」は記事にしていますのでよろしかったら!

トップメニューのときのロゴ画像サイズについてはこちらに。

画像の自動生成と圧縮

以下の記事の2番と3番です。

画像圧縮プラグイン

しばらくしたら、(でも割と初期の内に)画像圧縮プラグインをいれることをおススメします。

私はパンダくんがマスコットの「Compress JPEG & PNG images」というプラグインを利用しています。登録・設定・使用方法をこちらにまとめました。

いくみ
いくみ

画像、いろんな種類がありますねぇ。

コメント

タイトルとURLをコピーしました