11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

画像サイズまとめと参考リンク

画像サイズの早見表

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

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

目安ですので、お好みで変更しましょう。テーマの仕様・お好みで最適サイズは変わります。

いくみ
いくみ

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

公式推奨設定

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

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

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

お好み目安情報

 アイキャッチ1200 x 630 pixcelくらい(Facebookでシェアされたときの表示を考慮したい場合。だけど、サイズよりも「比率」が大切だそうです。推奨比率:1.91:1)
 ホームイメージ 同上。
 ヘッダーパソコン100%表示での、ヘッダーサイズの横幅 x 縦幅
サイト幅とヘッダー幅を同じにしている場合、横幅はそのまま、縦の高さを設定値の2割増しにするのがおススメ。
当ブログのサイト幅は1261pixcelです。(サイト幅を変更していないCocoonユーザーは、横幅1261pixcelくらいでピッタリくるはずです。)
詳しくはこちら:[Cocoon] ヘッダー画像サイズと選ぶポイント
 ブログタイトル (ロゴ画像)当ブログで使用中のロゴ画像は396 x 70 pixcel(その後変更しました。2019年10月現在は213 x 91pixcelです)。
フォントサイズ40でロゴ画像を作成、余白は少な目。

私の場合ですが、アイキャッチは、横幅800~1000くらいにしています。

目安の提示が不可能

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

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

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

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

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

アイキャッチ画像は

BUMIPUTRAによるPixabayからの画像

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

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

いくみ
いくみ

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

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

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

1200×630 pixcelは、こちらのサイト↓ですすめられていました。この記事を書くにあたって確認していたら出会えた記事です。

ブログのアイキャッチの最適サイズは?〜1200×630がおすすめな理由〜 – アカネtech
アイキャッチ画像のサイズに迷ったら読んでみてください
いくみ
いくみ

ありがとうございました。

Cocoonはメインカラムが800pxなので、私はそのようにし始めていたところでしたが(初期は横幅640にしていました)、ボチボチ1200サイズに修正していこうと思います。追記。と思っていましたが、使用している文字入れサイトが、自動で1000サイズにリサイズしていたことが分かりました★。私はほぼ1000サイズになっています。

ホームイメージについて

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

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

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

いくみ
いくみ

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

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

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

ヘッダーについて

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

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

サイト背景について

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

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

もし背景を画像にすることをお考えでしたら、以下の記事をご参考に!

画像情報のリンク

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

ファビコンとプロフィールアイコンについて

当ブログで設定方法をまとめました。

ロゴ画像について

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

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

画像の自動生成と圧縮について

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

画像圧縮プラグインについて

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

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

いくみ
いくみ

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

コメント

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