MENU
アーカイブ
くうか
ミニマリスト
整理収納・ゲーム・プログラミングが好きな40代専業主婦。4人家族。
小さなおうちに引っ越して収納が減っちゃった!少しずつ物を減らしているミニマリストでもあります。
SWELLでサイト型トップページを作る!解説→CLICK!

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

当ページのリンクには広告が含まれています。
Canvaでブログのヘッダー画像を作る方法

こんにちは、ゆるミニマリスト主婦のくうかです。

ブログのヘッダーのサイズはいくつ?

ヘッダー画像はどうやって作ればいいの?

この記事では、そんな疑問にお答えしています。

Canvaというツールを使って、ブログのヘッダー画像を自分で作ってみました。

作り方を把握すれば簡単に作成することができて、おすすめのツールです!

くうか

当ブログではどのようにヘッダー画像を作っているのかを説明していきます。

この記事はこんな人におすすめ
  • Canvaでどのようにブログのヘッダー画像を作っているか知りたい
  • くうかんしんぷるライフのヘッダーの作り方を知りたい

\ こちらもおすすめ /

目次

おしゃれなブログのヘッダー画像を手軽に作るにはCanvaがおすすめ

自分で絵を描いて画像を作ることができない私は、ずっとブログのヘッダーに悩んでいました。

シンプルに文字だけも良いけど、自分のブログの個性を少しでも出したいと思い、チャレンジしてみることに。

そこでCanvaという、ブラウザで画像を作れるツールを使ってヘッダー画像を作りました。

Canvaには有料の画像やイラストもありますが、無料の素材だけでも作ることが可能。

しかし有料版だと、以下のような恩恵がありとっても助かるんです。

  • 画像の透過が可能
  • 画像のサイズ変更がいつでも可能
  • フォント・素材・写真がすべて使える
  • 背景リムーバが可能
  • ストレージが無限に
くうか

有料版は1か月のお試し期間があるので、気になったらぜひお試ししてみてください。

\ 有料版を1か月試してみる /

Canvaでブログのヘッダー画像を作る方法

ブログのヘッダー画像を作る際に私が意識しているポイントは、3つ。

  1. ブログ全体の雰囲気と合わせる(フォント・カラー)
  2. 使う色は3色前後に
  3. 画像サイズは小さく作らない

ブログ全体の雰囲気を意識しつつ、適切なサイズで作成しましょう。

くうか

それでは早速、Canvaでブログのヘッダー画像を作る方法を説明していきます。

実際に作ってみたヘッダー画像、サイズはいくつ?

まずは完成したヘッダーがこちらです。

くうかんしんぷるライフ
ヘッダー画像
サイズ1600×360px
日本語フォント筑紫A丸ゴシック
英字フォントGlacial Indifference
ファイル形式png

タイトルの「くうかんしんぷるライフ」という文字を、遊び心を出して上下にずらしています。

コンセプトの「MINIMAL+SIMPLE」を小さめの英字でさりげなく。英字が入るとちょっとおしゃれに見えるので。

トップページのいたる部分に散りばめている、アクセントの「」(三色団子?)も添えて。

画像は透過しています。(有料版の機能)

Canvaでヘッダー画像を作る流れ

Canvaにログインし、ホーム画面から作る流れを説明していきます。

カスタムサイズでキャンバスを作成

右上の【デザインを作成】ボタンから【カスタムサイズ】を選択。

Canvaでデザイン作成
カスタムサイズを選択

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

画像サイズを指定して作成
サイズを指定

1600×360pxで作る理由は、当ブログのWordPressテーマ「SWELL」の公式サイトのヘッダー画像のサイズと同様にしたからです。

使用しているブログテーマによっても推奨サイズが違うと思うので、作る前に確認してみてください。

くうか

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

キャンバスが表示されます。

キャンバスが作成された
キャンバスが作成された

テキストや画像を配置

デザインが思いつかない場合には、テンプレートを使うのも手です。

メニューの【デザイン】を選ぶと、キャンバスのサイズに合ったテンプレートを表示してくれますよ。

その他、よく使う項目は以下を参考にしてください。

テキストメニュー→【テキスト】
グラフィックメニュー→【素材】
自分で用意した画像(写真)メニュー→【アップロード】
Canvaの写真素材メニュー→【写真】
ヘッダー画像を編集
作っていくぅー!
  1. タイトル「くうかんしんぷるライフ」の文字をテキストで追加
    • 筑紫A丸ゴシック、フォントサイズ104
  2. 英字「MINIMAL+SIMPLE」の文字をテキストで追加
    • Glacial Indifference、フォントサイズ42、文字間隔440
  3. グラフィック「」(三色団子?)を素材の丸や四角を選び、色を設定

当ブログの場合はシンプルに仕上げたかったので、テンプレートを使わずにテキストとグラフィックを追加する程度で完成ですー!笑

タイトルの「くうかんしんぷるライフ」というテキストは、微妙に高さをずらした感じにしたかったため、1文字ずつ自分の感覚で配置しています。

背景色は、ブログのヘッダーに合わせて設定してください。

完成したらダウンロード

ヘッダー画像が完成したら、右上の【共有】→【ダウンロード】を選びます。

Canvaで画像をダウンロード
ダウンロード

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

Canvaで画像をダウンロード
PNG推奨

PNGなら、背景を透明にする透過の機能も使えます。(※透過は有料版Proの機能になります

ダウンロード後は、画像圧縮サイトでさらに軽量化しておくのがおすすめ。

WordPressならプラグインでも画像圧縮できますが、余計なプラグインを入れたくないという意識もあるので、私はパンダさんを愛用です。笑

くうか

ブログに使う画像は速度に関係するため、できる限り軽量化しましょう。

使用している圧縮サイト「TinyPNG」

\ 有料版を1か月試してみる /

WordPressブログに完成したヘッダー画像を設定しよう

Canvaからダウンロードしたヘッダー画像を、ブログに設定しましょう。

カスタマイザーを開きます。【外観】→【カスタマイズ】。

カスタマイザーを開く
カスタマイザーを開く

上部のバーの【カスタマイズ】からも移動可能です。

そしてカスタマイザーメニューの【ヘッダー】を選択。

ヘッダーメニューへ
ヘッダーメニューへ

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

ロゴ画像の設定
ロゴ画像の設定

その下に画像サイズの値を設定することができるので、記載された範囲内に設定しましょう。

当ブログの場合のサイズ
  • 画像サイズ(PC):55
  • 画像サイズ(PC追従ヘッダー内):48
  • 画像サイズ(SP):70

設定が終わったら【公開】ボタンを押します。

ヘッダー画像完成
完成!

ブログのヘッダー画像が完成しました!

Canvaでヘッダー画像を作って、ブログをおしゃれにしよう

今回は、Canvaを利用したヘッダー画像の作成方法を紹介しました。

ヘッダーはブログのイメージを左右するので、雰囲気に合った素敵なものが作れると良いですよね。

Canvaでは無料の機能だけでも作れますが、有料版だとかなり自由度が上がるのでおすすめです。

一度有料をお試ししたら、もうやめられなくなってしまいました。笑

くうか

Canvaを使って私でもこのようなヘッダーが作れて、感動でした!

\ 有料版を1か月試してみる /

Canvaを使ったブログのアイキャッチの作り方も記事にしています

ぽちっとしていただけると嬉しいです

にほんブログ村 ライフスタイルブログ ミニマリストへ

楽天ROOMに愛用品を登録しています

楽天ROOM
Canvaでブログのヘッダー画像を作る方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次