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

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

画像サイズの早見表 準備

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

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

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

いくみ
いくみ

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

公式推奨設定

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

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

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

お好み目安情報

 アイキャッチ 1200 x 630 pixcelくらい(Facebookでシェアされたときの表示を考慮したい場合。)
 ホームイメージ 同上。
 ヘッダー パソコン100%表示での、ヘッダーサイズの横幅 x 縦幅
 サイト幅とヘッダーサイズが同じ場合、横幅はそのまま、縦の高さを設定値の2割増しにするのがおススメ。
 当ブログのサイト幅は1261pixcelです。
 ブログタイトル (ロゴ画像) 当ブログで使用中のロゴ画像は396 x 70 pixcel。
 フォントサイズ40でロゴ画像を作成、アイコンを足して、余白は少な目。

目安の提示が不可能

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

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

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

1.準備する画像は、.pngか.jpegがおススメです。便利な画像圧縮サイトが、その2種類をサポートしているからです。写真など、ほぼすべてを.jpeg、イラスト系とスクリーンショットは.pngが良いと思います。

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

アイキャッチ画像は

BUMIPUTRAによるPixabayからの画像

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

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

いくみ
いくみ

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

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

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

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

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

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

Cocoonはメインカラムが800pxなので、私はそのようにし始めていたところでしたが(初期は横幅640にしていました)、ボチボチ1200サイズに修正していこうと思います。

ホームイメージについて

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

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

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

いくみ
いくみ

「ホームイメージ」という存在を知りませんでした。まだ私は未設定です。

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

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

ヘッダーについて

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

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

サイト背景について

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

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

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

画像情報のリンク

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

参考情報:アイキャッチ画像をいれたり、いれなかったりする場合の便利設定

もし「アイキャッチ画像」をいれたり、いれなかったりする、という方は、下のわいひらさんのページの5番で、「NO IMAGE画像の設定」というセクションが参考になると思います。(他のセクションも、画像情報満載のまとめページです。)

Cocoonを利用する際に是非行って欲しい画像設定5つ
Cocoonを利用する上で、忘れがちな画像の設定をまとめてみました。これらを設定することで、少しでもサイトを綺麗に見せることができて、覚えてもらいやすくなると思います。

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

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

ロゴ画像について

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

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

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

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

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

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

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

いくみ
いくみ

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

コメント

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