ブログを立ち上げた当初、『分からないところが出る度に検索する』を繰り返し、ブログが完成するまでに途方もない時間がかかってしまいました。
その時思ったことは、似たようなジャンルの設定は『1つのページにまとまってたら良いのに!』と言うことです。
この記事では、そんなブログ初心者さんの中でも『AFFINGER6』を導入してまもない方に向けて、『画像デザインの設定場所』を簡潔に1ページにまとめました!
当記事はこんな方におすすめ!
・ブログ始めたての方
・各画像の設定をしている方
・ブログデザインを見直したい方
その際、画像デザインのサイズが知りたい!と言う方は下記の記事も合わせてご覧ください。
-
【AFFINGER6】各種画像サイズまとめ(ヘッダー、ヘッダーカード、アイキャッチ、サイトアイコン、サイトロゴ)
アフィンガー6の外観を整える際に使用する画像のサイズをまとめました。ヘッダー画像やヘッダーカード、アイキャッチなどこれを見れば一通りの画像サイズが分かります!
▼当ブログのテーマ『AFFINGER6』の購入はこちらからできます。
それでは、ご紹介していきます!
各画像デザインの設定場所
ヘッダー画像

ブログの顔と言っても過言ではないヘッダー。
ここを設定すると、ブログを作っている感じが一気に出てきますね!
▼ヘッダー設定手順
- ダッシュボード − 外観
- カスタマイズ
- ヘッダー画像
- 現在のヘッダー
- 新規画像を追加
- スマホのヘッダーは、その下の『スマホヘッダー画像』にて改めて設定
▼画像でチェック!

スマホはヘッダー画像を設定せず、サイトアイコンのみのブロガーさんも多いです!
ブログの『顔』とも言えるヘッダー画像。
簡易的でも良いので、PC版は特にヘッダーだけでも最初に設定しておきましょう!
ヘッダーカード

ヘッダーカードとは、ヘッダー画像の下にメニューのように表示される画像のこと。
設置すれば、見てほしいリンク先にアクセスさせることができます。
またヘッダーカードがあるとブログの見た目が一気にプロっぽくなるので、ある程度の記事数が書けたらすぐ設置しましょう!
▼ヘッダーカード設定手順
- ダッシュボード − AFFINGER 管理
- AFFINGER 管理
- ヘッダー画像
- ヘッダー下 / おすすめ
- ヘッダーカード
- 画像URLにカード画像を設定
- リンク先URLに飛ばしたいリンクのURLを入力
▼画像でチェック!

これでヘッダーカードの設置作業は完了です。
最大4枚まで置けますが、4枚の画像デザインのテイストは揃えた方が見栄えは良くなります。
ちなみに、
ヘッダーカードをカテゴリーに繋げたい場合、カテゴリーのURLを下記手順で確認(設定)しましょう。
▼カテゴリーのURL設定手順
- ダッシュボード − 投稿
- カテゴリー
- 新しくカテゴリーを作成する場合は『新規カテゴリーを追加』
- 既存のカテゴリーの場合は『編集』
- カテゴリーのURLは『スラッグ』にて確認(設定)できます
スラッグにてURLを確認したら、
http(s)://(ブログトップページURL)/category/(スラッグ)/
これがカテゴリーのURLとなります。
もしご自身のブログからカテゴリーページを閲覧出来るのであれば、そちらのURLをコピペする方が確実です!
しかし、まだ存在しない等の理由により閲覧できないのであれば、上記のURLを参考に設定されてください。
▼画像でチェック!

サイトアイコン

サイトアイコンは、『ファビコン』とも呼ばれ検索した時の先頭にあったり、ブラウザのタブに表示されたりする画像のことです。
また、あなたのブログがブックマークして保存された際に表示される画像のアイコンにもなります。
▼サイトアイコン設定手順
- ダッシュボード − 外観
- カスタマイズ
- サイト基本情報
- サイトアイコン
こちらでサイトアイコンは設定できます!
▼画像でチェック!

こちらの設定は特に急がなくても大丈夫!
ただ、初期設定はWordPressの『W』のロゴが使われるので、余裕が出てきたら設定されてみてください。
サイトロゴ

ヘッダー画像を設置せず、サイトロゴのみを設置されているブログもよく見かけます。
こちらは文字だけのデザインでもそれなりになるので、ヘッダーデザインに自信のない方はサイトロゴの設置をおすすめします。
▼サイトロゴ設定手順
- ダッシュボード − 外観
- カスタマイズ
- ロゴ画像 / サイトのタイトル
- ロゴ画像、スマホロゴ画像
▼画像でチェック!

サイトロゴは、ブログ名のみを設定されている方がほとんどです。
文字だけではありますが、文字色やフォントが見やすいかどうかに注意して設置してみてくださいね。
初心者が画像を作るなら
Canvaがおすすすめ!
よくご質問をいただくのですが
当ブログのヘッダーやアイキャッチはCanva(キャンバ)というアプリで作成しております。
Canvaにも無料版とPro版(有料)がありますが、無料版でもかなりオシャレなものを作ることは可能です!
またCanvaはiPadやPCでも扱えますが、
スマホアプリよりiPadやPCの方が作りやすいです。

Canva Proはヘッダーデザインを『リサイズ』する機能がついているのでとにかく便利です!
Canva Proのメリット
- 全てのコンテンツが使用可能
→無料版は使用できるイラスト等に限りがある - 作成したデザインのリサイズが可能
→無料版はサイズ変更不可 - 自分専用のカラー帳が作れる
<Canva Pro版無料トライアル実施中>

他にもPro版には無料版にない機能が豊富ですが、上記は中でも便利だなと感じる機能のため
Pro版を継続利用しています。
例えば、ヘッダーデザインを用途にあわせて別々のサイズにしたい場合、上記2つ目のサイズ変更機能は大変役に立ちました!
当ブログのヘッダーは、
PC版ブログ/スマホ版ブログ/Twitterのヘッダーにてそれぞれサイズを変え使用しているからです。
ブログのデザインやアイキャッチにこだわりたい、自作で作りたいという方は、ぜひCanvaを試してみてください。