はてなブログの始めた人がやっておくべきデザインカスタマイズ【ヘッダー画像の設定編】

スポンサーリンク

今回の記事は、はてなブログの初心者がやっておきたいデザインカスタマイズのヘッダー画像の設定編の記事です。

 

f:id:Naru1829:20160427042106j:plain

 

はてなブログのヘッダー(タイトル)画像の設定方法

 

今回はブログのデザインのカスタマイズですので、この設定を行うとブログのイメージがグッと良くなります。

 

もう決まったヘッダーの画像がある方は、設定自体はすごく簡単で2~3分程で終わる設定内容です。

 

※画像がある方は目次から『はてなブログのヘッダーの画像設定』の項目にいってください。

 

まだ画像が決まっていない方はヘッダーのデザイン方法なども簡単に記載しておきますね!

 

それではやってみましょう。

 

『ヘッダー』って何?

まず、『ヘッダー』とはブログの上部に表示されている部分の事です。

 

今回設定するヘッダー画像とは、その上部の部分に表示されている画像の事です。

 

ヘッダーの画像はブログの顔となる部分で、ブログに見に来てくれた人が一番最初に目につく場所ですのでブログのデザインをしていく上で最初に行うべき設定です。

 

人気のブログを見ていくと、面白い画像からカッコいい画像まで様々ですが、どのブログもインパクトがありますよね?

 

ちなみにこのサイトのヘッダー(タイトル部分)の画像はこのような画像になっております。

 

f:id:Naru1829:20160427024602p:plain

 

ブログのタイトルである『Future Nova』の文字を目立たせる為にシンプルなデザインにしております。

 

ヘッダーのデザインはブログの顔ですので、記事の内容やブログの内容に合うものにすると統一感が出ますのでお勧めです。

 

とはいっても、一からデザインするのは大変ですので、ヘッダーのデザインのやり方を簡単に説明させていただきます。

 

ヘッダー(タイトル)画像のデザインをする方法

多くのブログで使われていシンプルなデザイン方法ですと、画像の上にタイトル文字を入れるという方法があります。

 

ヘッダーに使える著作権がフリーの画像は前に記事でまとめましたので、この記事を参考にしてみてください。

 

写真を使ったお洒落なヘッダーを作成する時に使える国内・海外フリーサイト10選!!

www.future-nova.com

 

Windowsの『ペイント』を使用した文字の入れ方などは、前回のファビコン画像を作成した時の方法を使用すると簡単に画像に文字を入れられます。

 

はてなブログを始めた人がまずやるべきカスタマイズ設定【ファビコン設定編】

www.future-nova.com

 

文字入力だけでヘッダー画像を作れるサイト

他にも画像や文字を入れなくても、簡単な文字入力だけでヘッダーを作れるサイトもご紹介いたしますので参考にしてみてください。

 

アニメのロゴジェネレーター

matome.naver.jp

 

デザイる2.blog - デザイる2

matome.naver.jp

 

アニメが好きな人はタイトルのデザイン風にロゴが出来るので、ロゴをヘッダーにするのもインパクトがあって良いと思います。

 

登録が不要ですし画像編集もしないので、とりあえず仮で作ろうかなって人にもお勧めです。

 

はてなブログのヘッダー画像のサイズは?

 作製をするにあたって重要なのはサイズです。

 

はてなブログの始めたばかりのデフォルトの状態ですとサイズは『900px × 200px』です

※テンプレートでデザインをカスタマイズされている方は、選ばれたデザインのテーマによって異なります。

 

まずはこのサイズで作ってみる事をお勧めいたします。

 

サイズの微調整や表示位置が気になる方はこちらのブログの記事が参考になりますのでお勧めです。

 

はてなブログで「タイトル画像」を設定する時のテクニック

moonnote.hateblo.jp

 

はてなブログでヘッダー(タイトル)画像の設定方法

 

では本題の画像の設定方法についてやっていきましょう。

 

まずは、はてなブログにログインをしてダッシュボード(管理画面)を開きます。

 

f:id:Naru1829:20160427035712p:plain

 

ここでは【デザイン】の項目を選択します。

 

f:id:Naru1829:20160427040009p:plain

 

デザイン】の画面に切り替わりましたら、【管理画面に戻るの下にあるマーク】をクリックします。

 

すると、このような項目が出てきますので、【ヘッダ】をクリックします。

 

f:id:Naru1829:20160427040202p:plain

 

次に【画像をアップロード】の下にある【ファイルを選択】をクリックします。

 

そして、画像と一緒に【ブログのタイトル】が出てきてしまうので、タイトルのテキストが必要ない場合は下の【表示設定欄】の【画像だけ表示】をクリックします。

 

f:id:Naru1829:20160427040548p:plain

 

これでヘッダー画像の設定が完了できました。

もう一度ブログを開いてみてしっかり表示されているか確認をしてください。

 

画像の変更したい場合も同じ手順ですので、『いいデザインが出来たから変えたいな』っていう時もここから設定をしてください。

 

まとめ

今回のヘッダーの画像の設定はうまく設定が出来ましたでしょうか?

 

なかなか最初はデザインが決まらなかったりするものですが、運営をしていくと自分にあった『これだ!』ってデザインが見つかるものです。

 

季節ごとにデザインを変えてみたりするのも読者が訪問するたびに飽きさせないので面白いかもしれませんね!!

 

デザインで分からないことやご相談などはコメント欄やメッセージをツイッターから頂けたら出来る限り早く回答を致しますのでお気軽にご相談くださいませ。