ブログを立ち上げた時、色々と調べたものの中の１つに、各画像のサイズがありました。
設定するたびに調べていましたが
『１つのページにまとまってたら良いのに！』と常々思っていたので、備忘録も兼ねて自分でまとめてみました。
当記事はこんな方におすすめ！
・ブログ始めたての方
・各画像の設定をしている方
・ブログデザインを見直したい方
なお、デザインではなく各画像デザインの設定場所について知りたい方は、こちらの記事も併せてご覧ください。
-
【AFFINGER6】各種デザインの設定場所まとめ（ヘッダー、ヘッダーカード、サイトアイコン、サイトロゴ）
WordPressのテーマ『AFFINGER（アフィンガー）６』でブログを作る際に設定する画像デザインの設定方法について１ページにまとめました。ヘッダー画像、ヘッダーカード、サイトロゴ、サイトアイコンといった画像デザインを作成したら、この１ページを見るだけで設定場所の確認できます。
それでは、ご紹介していきます！
各画像のサイズまとめ
ヘッダー画像
ブログの顔と言っても過言ではないヘッダー。
ブログの印象を大きく左右するため様々な設定方法がありますが、最も簡単かつスタンダードなサイズはコチラ！
【画像サイズ】
・PC：2200×500ピクセル（推奨）
・スマホ：1000×500ピクセル（当ブログ）
PC版のヘッダーには公式推奨サイズがありますが、スマホ版にはありません。
そのため、当ブログのサイズ感を参考に、もう少し大きなヘッダーにしたい場合は500px→800pxなど、サイズを大きくしていってみてください。
▼当ブログスマホ版ヘッダー（1000×500px）
写真画像のヘッダーを利用される場合は、もう少し縦長のヘッダーの方が綺麗に見える場合もあるよ！
ブログの『顔』とも言えるヘッダー画像なので、ここは多少手間がかかっても丁寧に作り込んでいきましょう！
ヘッダーカード
ヘッダーカードとは、ヘッダー画像の下にメニューのように表示される画像のこと。
設置すれば、見てほしいリンク先にアクセスさせることができます。
またヘッダーカードがあるとブログの見た目が一気にプロっぽくなるので、ある程度の記事数が書けたらすぐ設置しましょう！
【おすすめ画像サイズ】
①800×400ピクセル 又は
②1200×630ピクセル
①については、スマホで２倍表示設定をした場合は登録画像のまま表示されます。（PC版は上下がカットされます）
②については後述するアイキャッチと同じサイズです。見た目も揃い綺麗ですが、画像はサイズが大きくなればなるほどブログが重くなりますので、表示速度が遅くなってきたらサイズの見直しが必要になるかもしれません。
アイキャッチ
アイキャッチのサイズはこちら！
【画像サイズ】1200×630ピクセル
上述にもあった通り、アイキャッチのサイズは上記がおすすめです。
当ブログのスマホ版アイキャッチは記事作成時現在、小さめ表示となっておりますが、設定の変更で大きく表示させることもできます！
サイトアイコン
サイトアイコンは、『ファビコン』とも呼ばれ検索した時の先頭にあったり、ブラウザのタブに表示されたりする画像のことです。
また、あなたのブログがブックマークして保存された際に表示される画像のアイコンにもなります。
画像サイズはこちら↓
【画像サイズ】512×512ピクセル以上の正方形（推奨）
【ファイル形式】png, jpgなど
サイトアイコンは非常に小さく表示されます。
そのため、自作する場合は以下の点に気をつけて作成しましょう。
- シンプルなデザイン
- 目立つカラー
- 印象に残るデザイン
- ブログに関連したロゴ
- スマホのホーム画面に置けるデザイン
全てに当てはまったサイトアイコンを素人が作るのは難しいです。
それでも自作する場合は、『自身のブログのテーマから離れたものにしない！』ことだけには注意しておきましょう。
上記のように、ブログテーマから離れたロゴでないかどうかだけでも気にしておきましょう。
iPhoneでホーム画面にブックマークした時のアイコンにもなるので、ホーム画面にあっても恥ずかしくないデザインにしておこう！
サイトロゴ
サイトロゴは、画像登録すると登録したものがブログのヘッダーに表示されます。
このサイトロゴは、
①タイトル文字のみ
②ロゴ＋タイトル文字
③ロゴのみ
といったようなパターンで登録されることが多いです。
【画像サイズ】200×100ピクセル推奨
【ファイル形式】png, jpg
サイトロゴは、ヘッダーの設置有無によっても見せ方が変わってきます。
ヘッダー画像の有無や、ヘッダー画像を置く場合はバランスを決めて設置しましょう。
初心者が画像を作るなら
Canvaがおすすすめ！
よくご質問をいただくのですが
当ブログのヘッダーやアイキャッチはCanva(キャンバ)というアプリで作成しております。
Canvaにも無料版とPro版(有料)がありますが、無料版でもかなりオシャレなものを作ることは可能です！
またCanvaはiPadやPCでも扱えますが、
スマホアプリよりiPadやPCの方が作りやすいです。
Canva Proはヘッダーデザインを『リサイズ』する機能がついているのでとにかく便利です！
Canva Proのメリット
- 全てのコンテンツが使用可能
→無料版は使用できるイラスト等に限りがある - 作成したデザインのリサイズが可能
→無料版はサイズ変更不可 - 自分専用のカラー帳が作れる
＜Canva Pro版無料トライアル実施中＞
他にもPro版には無料版にない機能が豊富ですが、上記は中でも便利だなと感じる機能のため
Pro版を継続利用しています。
例えば、ヘッダーデザインを用途にあわせて別々のサイズにしたい場合、上記2つ目のサイズ変更機能は大変役に立ちました！
当ブログのヘッダーは、
PC版ブログ/スマホ版ブログ/Twitterのヘッダーにてそれぞれサイズを変え使用しているからです。
ブログのデザインやアイキャッチにこだわりたい、自作で作りたいという方は、ぜひCanvaを試してみてください。
まとめ
当ブログでご紹介したのはこの５点！
■ヘッダー画像
・PC：2200×500ピクセル（推奨）
・スマホ：1000×500ピクセル（当ブログ）
■ヘッダーカード
・800×400ピクセル 又は
・1200×630ピクセル
■アイキャッチ
・1200×630ピクセル
■サイトアイコン
・512×512ピクセル以上の正方形（推奨）
■サイトロゴ
・200×100ピクセル（推奨）
初期設定時はやらなきゃいけないことがどうしても多くなります。
当ブログを参考に、画像関係の作成を進めてみてくださいね♪
また、各デザインの作成が終わった方は、下記記事を参考に設定してみましょう！
-
【AFFINGER6】各種デザインの設定場所まとめ（ヘッダー、ヘッダーカード、サイトアイコン、サイトロゴ）
WordPressのテーマ『AFFINGER（アフィンガー）６』でブログを作る際に設定する画像デザインの設定方法について１ページにまとめました。ヘッダー画像、ヘッダーカード、サイトロゴ、サイトアイコンといった画像デザインを作成したら、この１ページを見るだけで設定場所の確認できます。
▼当ブログのテーマ『AFFINGER６』の購入はこちら