Canvaでおしゃれに!ブログのヘッダー画像の作り方【ワードプレス解説】

こんにちは、ゆるミニマリスト主婦のくうかです。
ブログのヘッダーのサイズはいくつ?
ヘッダー画像はどうやって作ればいいの?
この記事では、そんな疑問にお答えしています。
Canvaというツールを使って、ブログのヘッダー画像を自分で作ってみました。
作り方を把握すれば簡単に作成することができて、おすすめのツールです!

当ブログではどのようにヘッダー画像を作っているのかを説明していきます。
- Canvaでどのようにブログのヘッダー画像を作っているか知りたい
- くうかんしんぷるライフのヘッダーの作り方を知りたい
\ こちらもおすすめ /
おしゃれなブログのヘッダー画像を手軽に作るにはCanvaがおすすめ
自分で絵を描いて画像を作ることができない私は、ずっとブログのヘッダーに悩んでいました。
シンプルに文字だけも良いけど、自分のブログの個性を少しでも出したいと思い、チャレンジしてみることに。
そこでCanvaという、ブラウザで画像を作れるツールを使ってヘッダー画像を作りました。
しかし有料版だと、以下のような恩恵がありとっても助かるんです。
- 画像の透過が可能
- 画像のサイズ変更がいつでも可能
- フォント・素材・写真がすべて使える
- 背景リムーバが可能
- ストレージが無限に



有料版は1か月のお試し期間があるので、気になったらぜひお試ししてみてください。
\ 有料版を1か月試してみる /
Canvaでブログのヘッダー画像を作る方法
ブログのヘッダー画像を作る際に私が意識しているポイントは、3つ。
- ブログ全体の雰囲気と合わせる(フォント・カラー)
- 使う色は3色前後に
- 画像サイズは小さく作らない
ブログ全体の雰囲気を意識しつつ、適切なサイズで作成しましょう。



それでは早速、Canvaでブログのヘッダー画像を作る方法を説明していきます。
実際に作ってみたヘッダー画像、サイズはいくつ?
まずは完成したヘッダーがこちらです。


サイズ | 1600×360px |
日本語フォント | 筑紫A丸ゴシック |
英字フォント | Glacial Indifference |
ファイル形式 | png |
タイトルの「くうかんしんぷるライフ」という文字を、遊び心を出して上下にずらしています。
コンセプトの「MINIMAL+SIMPLE」を小さめの英字でさりげなく。英字が入るとちょっとおしゃれに見えるので。
トップページのいたる部分に散りばめている、アクセントの「●●■」(三色団子?)も添えて。
画像は透過しています。(有料版の機能)
Canvaでヘッダー画像を作る流れ
Canvaにログインし、ホーム画面から作る流れを説明していきます。
カスタムサイズでキャンバスを作成
右上の【デザインを作成】ボタンから【カスタムサイズ】を選択。


幅1600、高さ360、pxで【新しいデザインを作成】。


1600×360pxで作る理由は、当ブログのWordPressテーマ「SWELL」の公式サイトのヘッダー画像のサイズと同様にしたからです。
使用しているブログテーマによっても推奨サイズが違うと思うので、作る前に確認してみてください。



特に決まりはないのでお好みのサイズで作ってOKですが、あまり小さく作ってしまうと画像が粗くなるので注意です。
キャンバスが表示されます。


テキストや画像を配置
デザインが思いつかない場合には、テンプレートを使うのも手です。
メニューの【デザイン】を選ぶと、キャンバスのサイズに合ったテンプレートを表示してくれますよ。
その他、よく使う項目は以下を参考にしてください。
テキスト | メニュー→【テキスト】 |
グラフィック | メニュー→【素材】 |
自分で用意した画像(写真) | メニュー→【アップロード】 |
Canvaの写真素材 | メニュー→【写真】 |


- タイトル「くうかんしんぷるライフ」の文字をテキストで追加
- 筑紫A丸ゴシック、フォントサイズ104
- 英字「MINIMAL+SIMPLE」の文字をテキストで追加
- Glacial Indifference、フォントサイズ42、文字間隔440
- グラフィック「●●■」(三色団子?)を素材の丸や四角を選び、色を設定
当ブログの場合はシンプルに仕上げたかったので、テンプレートを使わずにテキストとグラフィックを追加する程度で完成ですー!笑
タイトルの「くうかんしんぷるライフ」というテキストは、微妙に高さをずらした感じにしたかったため、1文字ずつ自分の感覚で配置しています。
背景色は、ブログのヘッダーに合わせて設定してください。
完成したらダウンロード
ヘッダー画像が完成したら、右上の【共有】→【ダウンロード】を選びます。


画像の画質を落としたくないため、PNGを選びます。(JPGより画質が良い)


PNGなら、背景を透明にする透過の機能も使えます。(※透過は有料版Proの機能になります)
ダウンロード後は、画像圧縮サイトでさらに軽量化しておくのがおすすめ。
WordPressならプラグインでも画像圧縮できますが、余計なプラグインを入れたくないという意識もあるので、私はパンダさんを愛用です。笑



ブログに使う画像は速度に関係するため、できる限り軽量化しましょう。
使用している圧縮サイト「TinyPNG」
\ 有料版を1か月試してみる /
WordPressブログに完成したヘッダー画像を設定しよう
Canvaからダウンロードしたヘッダー画像を、ブログに設定しましょう。
カスタマイザーを開きます。【外観】→【カスタマイズ】。


上部のバーの【カスタマイズ】からも移動可能です。
そしてカスタマイザーメニューの【ヘッダー】を選択。


【■ヘッダーロゴの設定】→【ロゴ画像の設定】で画像を選択します。


その下に画像サイズの値を設定することができるので、記載された範囲内に設定しましょう。
- 画像サイズ(PC):55
- 画像サイズ(PC追従ヘッダー内):48
- 画像サイズ(SP):70
設定が終わったら【公開】ボタンを押します。


ブログのヘッダー画像が完成しました!
Canvaでヘッダー画像を作って、ブログをおしゃれにしよう
今回は、Canvaを利用したヘッダー画像の作成方法を紹介しました。
ヘッダーはブログのイメージを左右するので、雰囲気に合った素敵なものが作れると良いですよね。
Canvaでは無料の機能だけでも作れますが、有料版だとかなり自由度が上がるのでおすすめです。
一度有料をお試ししたら、もうやめられなくなってしまいました。笑



Canvaを使って私でもこのようなヘッダーが作れて、感動でした!
\ 有料版を1か月試してみる /
Canvaを使ったブログのアイキャッチの作り方も記事にしています


コメント