Canvaでおしゃれに！ブログのヘッダー画像の作り方【ワードプレス解説】
こんにちは、ゆるミニマリスト主婦のくうかです。
ブログのヘッダーのサイズはいくつ？
ヘッダー画像はどうやって作ればいいの？
この記事では、そんな疑問にお答えしています。
Canvaというツールを使って、ブログのヘッダー画像を自分で作ってみました。
作り方を把握すれば簡単に作成することができて、おすすめのツールです！
くうか当ブログではどのようにヘッダー画像を作っているのかを説明していきます。
- Canvaでどのようにブログのヘッダー画像を作っているか知りたい
- くうかんしんぷるライフのヘッダーの作り方を知りたい
＼ こちらもおすすめ ／
おしゃれなブログのヘッダー画像を手軽に作るにはCanvaがおすすめ
自分で絵を描いて画像を作ることができない私は、ずっとブログのヘッダーに悩んでいました。
シンプルに文字だけも良いけど、自分のブログの個性を少しでも出したいと思い、チャレンジしてみることに。
そこでCanvaという、ブラウザで画像を作れるツールを使ってヘッダー画像を作りました。
しかし有料版だと、以下のような恩恵がありとっても助かるんです。
- 画像の透過が可能
- 画像のサイズ変更がいつでも可能
- フォント・素材・写真がすべて使える
- 背景リムーバが可能
- ストレージが無限に
くうか有料版は１か月のお試し期間があるので、気になったらぜひお試ししてみてください。
＼ 有料版を１か月試してみる ／
Canvaでブログのヘッダー画像を作る方法
ブログのヘッダー画像を作る際に私が意識しているポイントは、３つ。
- ブログ全体の雰囲気と合わせる（フォント・カラー）
- 使う色は３色前後に
- 画像サイズは小さく作らない
ブログ全体の雰囲気を意識しつつ、適切なサイズで作成しましょう。
くうかそれでは早速、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
- グラフィック「●●■」（三色団子？）を素材の丸や四角を選び、色を設定
当ブログの場合はシンプルに仕上げたかったので、テンプレートを使わずにテキストとグラフィックを追加する程度で完成ですー！笑
タイトルの「くうかんしんぷるライフ」というテキストは、微妙に高さをずらした感じにしたかったため、１文字ずつ自分の感覚で配置しています。
背景色は、ブログのヘッダーに合わせて設定してください。
完成したらダウンロード
ヘッダー画像が完成したら、右上の【共有】→【ダウンロード】を選びます。
画像の画質を落としたくないため、PNGを選びます。（JPGより画質が良い）
PNGなら、背景を透明にする透過の機能も使えます。（※透過は有料版Proの機能になります）
ダウンロード後は、画像圧縮サイトでさらに軽量化しておくのがおすすめ。
WordPressならプラグインでも画像圧縮できますが、余計なプラグインを入れたくないという意識もあるので、私はパンダさんを愛用です。笑
くうかブログに使う画像は速度に関係するため、できる限り軽量化しましょう。
使用している圧縮サイト「TinyPNG」
＼ 有料版を１か月試してみる ／
WordPressブログに完成したヘッダー画像を設定しよう
Canvaからダウンロードしたヘッダー画像を、ブログに設定しましょう。
カスタマイザーを開きます。【外観】→【カスタマイズ】。
上部のバーの【カスタマイズ】からも移動可能です。
そしてカスタマイザーメニューの【ヘッダー】を選択。
【■ヘッダーロゴの設定】→【ロゴ画像の設定】で画像を選択します。
その下に画像サイズの値を設定することができるので、記載された範囲内に設定しましょう。
- 画像サイズ（PC）：55
- 画像サイズ（PC追従ヘッダー内）：48
- 画像サイズ（SP）：70
設定が終わったら【公開】ボタンを押します。
ブログのヘッダー画像が完成しました！
Canvaでヘッダー画像を作って、ブログをおしゃれにしよう
今回は、Canvaを利用したヘッダー画像の作成方法を紹介しました。
ヘッダーはブログのイメージを左右するので、雰囲気に合った素敵なものが作れると良いですよね。
Canvaでは無料の機能だけでも作れますが、有料版だとかなり自由度が上がるのでおすすめです。
一度有料をお試ししたら、もうやめられなくなってしまいました。笑
くうかCanvaを使って私でもこのようなヘッダーが作れて、感動でした！
＼ 有料版を１か月試してみる ／
Canvaを使ったブログのアイキャッチの作り方も記事にしています
この記事が気に入ったら
フォローしてね！
コメント