ブログ関連

【簡単!】Canvaではてなブログのヘッダー画像を作って設定してみた!

Canvaでヘッダー画像を作る記事のアイキャッチ画像

ブログをしているみなさんは、トップページのヘッダー画像はもう作りましたか?

この記事では、Canvaを使ったヘッダー画像の作り方を説明しています。

記事を書いていると、だんだんブログに愛着がわき、自分の好きなデザインにしたいという人も多いのではないかと思います。

記事を書くモチベーションが下がってしまった人も、自分の好みのデザインにカスタマイズすると、やる気がわいてくると思います!(私も作ってみてやる気がでました!)

そこで今回は、ブログの顔になるヘッダー画像の作り方をご紹介していきたいと思います。

ヘッダー画像を作ろう!

ママ
ママ
ヘッダー画像っていう言葉からして難しそう!

そもそもヘッダーってなんなの?って思っている人も多いのではないでしょうか?私もブログを始めた時、ヘッダーだのフッターだのツイッターだの(それはわかるでしょ)難しい言葉を並べないでほしいと思っていました(笑)
ブログ初心者の私が理解している限りですが…

ヘッダーとはブログの上部分に帯状に表示されている部分のこと。つまり、ブログのタイトルが書いてある部分のこと。

ブログを始めた人は、いろいろなブログを読むことがあると思います。その時に「あ~このタイトル名とイラストは何回かみたことあるな~」と思うことはありませんか?

そんな風に読み手に覚えてもらうためには、ブログのヘッダー画像が欠かせないと私は思います。

では、簡単に作れるのでさささ~っとお好みのヘッダー画像を作ってみましょう!

ヘッダー画像作成で使用したサイト

まず、ヘッダーに設置する画像を作りましょう。今回はCanvaというサイトを使用していきます。パソコンとスマホ(アプリ)どちらでも作成できます。

なーさん
なーさん
スマホでも作れるのは便利だね!

サイトを使用する前に、簡単な登録を済ませる必要がありますので、済ませた前提で話をしていきます。

Canva(キャンバ)-写真・画像の加工編集&デザインアプリ

Canva(キャンバ)-写真・画像の加工編集&デザインアプリ

Canva無料posted withアプリーチ

Canvaでヘッダー画像を作っていく

Canvaを開き「カスタムサイズ」をクリックします。

カスタムサイズをクリック
画面の右上に、はてなブログのヘッダー画像推奨サイズの1000×200pxを入力し、「新しいデザインを作成」をクリックします。
新しいデザインを作成をクリック

するとこのような画面が表示されます。
ヘッダー画像作成画面

背景を選ぶ

まずは背景から設定してみます。左端に「背景」というところがあるのでクリックします。すると左側にズラーっと背景になる画像が表示されます。
背景を選ぶ

これをクリックして使用してもいいのですが、今回は使用せず色だけ設定します。色は画像の通り、真ん中の上あたりで設定できます。

+マークを押すと細かい色を設定することができます。

イラストを選ぶ

色が決まったら今度は好きなイラストや写真を探します。左端にある「素材」をクリックし、好きなキーワードを入力してください。

キーワードを入れる

「ふくろう」と検索するとたくさんイラストが出てきました。

有料のものと無料のものがあるので好きなものを選んで、「ドラック」してイラストを好きな位置に移動させてください。

画像をドラックして移動

このイラストは色を変えることができます。方法は、画像の通りで真ん中の上にある部分をクリックすると変更ができます。

文字を挿入する

ブログのタイトルを入力していきます。

左端に「テキスト」というボタンがあるのでクリックします。

次に「テキストボックスの追加」をクリックすると、画像の通り文字を入力できるようになります。
テキストボックスの追加をクリック

文字の色やフォントなどを画像の部分で調整できます。

フォントの調整

調整できたら、右上の保存ボタンを押して、好きなフォルダーに保存しましょう。

はてなブログのヘッダー部分に画像を貼り付ける

はてなブログに先ほど作成した画像を設定していきましょう。

「デザイン」→「カスタマイズ」→「ヘッダ」の「ファイルを選択」を押して、画像を保存したフォルダーから設定したい画像を選びます。

はてなブログのヘッダーに画像を貼り付ける

画像にタイトル名を入れていない場合は、「画像とテキストを表示」、タイトル名も入れた画像を作成した場合は「画像だけ表示」を設定すると、タイトルの表示と非表示を設定できます。

スポンサーリンク

スマートフォンのヘッダー画像が見切れる

ママ
ママ
これを改善するのがとても時間がかかった!いいサイトを探すのに苦労したよ~。

私のサイトは、レスポンシブデザインにしているため、パソコンと同じ表示画面になっています。

なぜかスマートフォンからみると、ヘッダー画像がはみ出てしまい、こんなことになりました(笑)

スマートフォンのヘッダー画像が見切れてしまう

ヘッダー画像をスマートフォン画面に全て表示させるために、参考にさせていただいたサイトはこちらです。

【これで解決!】スマホ表示をするとタイトル画像の左右が切れる問題【はてなブログ】 | ゆずもちろぐ。

まとめ

画像を作る前は、いろんな人のサイトをみて「こんなの絶対できない!」と思っていました。しかし、読んでみてもらえればわかるように、ヘッダー画像は意外と簡単に作ることができます!

ぜひみなさんもオリジナルのヘッダー画像を作成してみてください。

他にもいろいろな記事を書いていますので、ぜひご覧ください。

はてなブログからMinimalismの記事のアイキャッチ画像
はてなブログのデザインをMinimalismを使ってカスタマイズ!この記事では、はてなブログのテーマストアで無料でインストールできるMinimalismを使って、自分の好みに合ったブログを作成していく方...
こちらの記事もおすすめ!