canvaでヘッダ画像のテンプレートを作ってみた【はてなブログ】

canvaではてなブログのヘッダ画像のテンプレートを作ってみました。

canvaでヘッダ画像のテンプレートを作ってみた

みなさん、今ブログに設定しているヘッダ画像は気に入っていますか？私は今のヘッダ画像は結構気に入っているのですが、過去に設定していたヘッダ画像は嫌いでした。

ブログ初心者はカスタマイズの前に、とにかくブログを書くのが大事だと言われていますが、いざ書こうと自分のブログを開くと、気に入らないヘッダーが目に入るんですよ。。とっても恥ずかしいのですが、過去のヘッダ画像を紹介すると

ブログ名見切れ過ぎ。

お洒落なヘッダにしたかったの、今思えば非常に恥ずかしい(恥)

適当にアイコンを組み合わせた感満載

あとブログのアクセス数がまだ少ないので、ブログの顔であるヘッダをあまり変えない方がいいのかなとも思ったり。でも私は飽き性なので、飽きるのは時間の問題です。

そこで

• 背景画像を簡単に差し替えることができる

• 背景画像以外の部分(ブログ名など)は使い回しできる

ようなヘッダ画像のテンプレートをcanvaで作ることにしました。

canvaでテンプレートを作ろう

【用意するもの】

1. canva
2. お気に入りの画像（なくてもOK、canvaにもあります）
3. アイコン（なくてもOK、canvaにもあります）

※ 事前にcanvaでアカウントを登録しておきましょう。

背景画像の設定

canvaにアクセスし、右下のカスタムサイズをクリックします。

幅：1000px、高さ：200pxに設定し、「新しいデザインを作成」をクリックします。

↓

画像をアップロードより使用したい画像をアップロードします。

画像を右側の領域にドラッグアンドドロップします。

画像を広げます。

↓

この画像の上にブログ名などを置いていくので右上の「ロック」でロックしておきましょう。

ブログ名の設定

左側の「T」を選択、さらに「テキストボックスの追加」をクリックします。

テキストボックスが追加されました。

左側のこの部分でフォントを変更します。

フォントの読み込みには非常に時間（低スペックパソコンだとカップラーメンができるくらい？）がかかりますので注意してください。

でもcanvaのフォントは可愛いものが多いので、めげずに待ってみてください。個人的におすすめは「ふい字」と「うずらフォント」で、うずらフォントはこのブログのヘッダにも使用しています。

今回はふい字にしてみました。

図形、アイコンの設定

基本の部分ができたので、図形などを追加していきます。ここでヘッダ画像にオリジナリティを出しましょう。今回は大きさの違う丸を配置してみました。

図形を配置する際は、ブログ名が最前面にくるよう設定しましょう。

ブログ名を選択し、配置を選択します。さらに最前面へを選択します。

また、配置した図形を透明化してもいいと思います。透明化する場合は図形を選択して、透明度を調整してください。

ヘッダに使用したいアイコンがあれば追加しましょう。

ヘッダ画像が完成しました。画像を綺麗に見せたいので、丸は緑から白に変更して、透明度50%にしました。

ブログ名が見切れないようにするために

PC版ではいい感じでもスマートフォン版ではブログ名が見切れる場合があるので注意しましょう。

スマートフォン版のヘッダサイズは幅：350PX、高さ：200pxと言われています。

下の画像の青枠部分がスマートフォン版では表示しない部分です。

ヘッダ画像は幅：1000px、高さ：200pxなので、だいたい中央1/3の位置にブログ名が入るように注意しましょう。

背景画像だけ変更してみよう

canvaは編集した画像を自動で保存してくれます。canvaのトップページに戻り、すべてのデザインから先ほど作成したデザインを選びます。

テンプレートとして使用をクリックします。

今回はcanvaの無料画像を使用して、ヘッダ画像の背景のみ変えてみましょう。

最初に作ったヘッダ画像はこちら。

海っぽい感じ。

水滴。

単色にしてもいい感じです。

白っぽい画像の場合は、文字色を濃い色にした方がよさそう。

途中でブログ名のフォントサイズを変えたため、この画像だけブログ名が小さい。

ヘッダ画像を設定しよう

作成した画像を保存します。右上の「↓」をクリックさらに、「ダウンロード」をクリックし、画像をダウンロードします。

はてなブログの管理画面を開き

デザイン→スパナのアイコン→ヘッダ→ファイルを選択

より画像をアップロードします。

左下の「適用」をクリックします。

表示設定で画像だけ表示にします。

「変更を保存する」をクリックします。

余白の調整

ヘッダ画像の余白の調整に関しては

【はてなブログ】ヘッダの背景画像の位置調整（レスポンシブデザインの場合） - IMUZA.com

の「画像サイズ 1000px × 200px の場合」の部分を参考にしました。

まとめ

canvaではてなブログのヘッダ画像のテンプレートを作ってみました。

• はてなブログのヘッダ画像を変えようかなと思っている
• ヘッダ画像を少しだけアレンジしたいけど、どうすればいいかわからない
• ブログ名はそのままに画像だけ変えたい
• ブログ名を可愛いフォントで表示したい(個人的におすすめはふい字とうずらフォント)

このような方は一度canvaでヘッダ画像を作ってみてください。