記事を書いてブログを更新し続けていると、印象に残ってもらえるようにヘッダーをいじりたくならないでしょうか。
私が使っていたSimplicity2は標準では見た目がとてもシンプルで、ヘッダー部分も背景がなくブログタイトルと簡単な説明文だけで構成されています。
※現在はSimplicity2の後継テーマである「Cocoon」を使用しています。
simplicity2のレイアウト見本は作成者「わいひら」様のHPをご覧ください。
超シンプル好きな人にはいいかもしれませんね。
ヘッダーはトップ画面にも、記事の投稿画面にも出てくる、いわばブログの顔となる部分です。
そのブログの顔ともいえるヘッダーをオリジナルのものに変えると、他のブログと差別化できる上、自分のブログに愛着が沸いてきて更新するのも楽しくなってくると思います。
今回は、画像とロゴを変更してオリジナルのヘッダーを作成する方法をご紹介したいと思います。
ヘッダー用のロゴを作成する
以前の記事で「ワードソフトでテキストロゴを作成する方法」をご紹介しましたので、自分でワードソフトを使って作成してみたいという方はご覧ください。
また、ネットで「ロゴ作成ソフト フリー」などと検索すれば、無料で作成できるソフトが見つかりますので、そちらを活用してもいいですね。
オリジナルのマークを作りたい方はロゴ作成ソフトを使った方が簡単かもしれません。
背景画像を準備する
自分のブログのコンセプトに合った画像を利用するといいと思います。
極端な話ですが、真面目なブログなのに、ヘッダー画像がアニメだったりすると違和感ありますよね。初見でこのブログ大丈夫か？って思っちゃいますね。
背景画像として、自分が撮影した写真を使ってもいいですが、
無料で使える写真素材サイト、イラスト素材サイトを活用するのが便利だと思います。
ロゴ、画像を変更する
simplicity2では、ロゴ、画像を変更するカスタマイズを簡単にできる画面が用意されています。
子テーマをインストールしていることを前提に話を進めていきます。
（子テーマをインストールする理由・方法についてはこちらの記事をご覧ください）
WordPressの管理画面から[外観]－[ヘッダー]をクリックします。
ヘッダーのカスタマイズ画面に移動します。
ヘッダーの高さを調整します。初期設定では「100」になっていますので、もう少しヘッダーを高くしたい場合は、100以上に数字を変更してください。このブログでは高さを「150」に設定していますので参考にしてみてください。
ヘッダーのタイトルテキストをロゴ画像に変更すると、ロゴ画像をクリックしたときにブログのトップ画面に移動するようになります。
下の図は、右のロゴ 
を画像として設定した例となります。
このブログのヘッダーのように、ヘッダー幅を画面いっぱいに設定することもできます。
下の図のように、背景となる画像を設定してください。
なお、ヘッダー下のグローバルナビも合わせて横幅いっぱいにしたい場合は、「グローバルナビを横幅いっぱいにする」にチェックを入れます。
モバイルヘッダーは注意が必要です。必ず、ご自身のスマホで確認してみてください。
背景画像を高めに設定しておかないと、ロゴが背景画像からはみ出してしまいますので、その場合は背景画像の高さを調整してみてください。
以上でヘッダーのカスタマイズは完了となります。
まとめ
個別の記事で検索されたときに、「あ、このブログ前にも訪問したことある！」と思われたら嬉しいですね。
特徴を持ったブログというのは訪問者の印象に残りやすいものです。
僕もネットで調べものをした際に、前にも違う内容でこのブログに来たことあるな、と思ったことが何度もあります。それはやっぱりヘッダー部分を見てそう思ったんですよね。
何度も言いますが、ヘッダーはブログの顔となるべき部分です。そんなに難しくはありませんので、オリジナル感を出したい方は是非試してみてくださいね。
