- ブログのヘッダーってどうやって変えるの？
- ブログのヘッダーはどうやって作るの？
こんな悩みを解決できる記事です。
ブログを始めて少したつと、ブログのヘッダーとかカスタマイズしてみたくなりますよね。
最近ブロガー仲間も増えてきて、他のブログに遊びに行くと、きらびやかなヘッダーに、オリジナリティあふれるアイコン、そしてアイキャッチどーん！って感じで圧倒されます。
自分のブログに戻ると、地味なヘッダーで落ち込みました。
ちなみに変更前のヘッダーはこちらです。
パパらしさも無ければ、人生をテーマにしていることも伝わらないですよね。そして地味で、おそらく一度来たとしてもすぐに忘れられそうな地味さです。
そんなわけで今回、心機一転、ヘッダーを変えてみました！
今回は、ヘッダーを試行錯誤変えた時のやったことをまとめてみました。
パパ
いつかはデザインを勉強して、もっと素敵なヘッダーを作りたいなぁ！
とりあえずブログのヘッダーを変更してみた
時間がある時にでも、ヘッダーはじっくり作り込みたいですが、まだまだ初心者ブロガーですので、記事を書く時間を確保したいと思っています。
というわけで、今回は最低限自分のブログをアピールできるようなヘッダーをとりあえず作ってみました。
とりあえずWordPressの設定画面を見た
パパ
で、どうやったらWordPressでヘッダーを変えられるの？
アンパパはそもそも、ブログ始めてからまだ3ヶ月。WordPressの操作もぎこちないです。
でも、色々試してみることが好き。
Cocoonの設定を見ると、「ヘッダー」の項目発見！
ここから色々設定できそうですね。(あ、アンパパブログはCocoonを使っていることがバレてしまいましたね)
とりあえず色々設定してみてわかったことは、
「ヘッダーの全体色」を変えたら色が変わった！
「ヘッダーの背景画像」を変えたら、背景が写真になった！
「ヘッダーロゴ」を画像にしたら、ブログのタイトルの代わりにロゴ画像が表示されるんだね！
この間、ヘッダーがコロコロ変わってしまってすみませんでした。すべては、あのハトがいけないんです(笑)
最初は、タイトルとキャッチコピーを一つにした画像を作って、「ヘッダーの背景画像」に設定しましたが、その上からさらにタイトルが表示されてしまい失敗(ソースをいじれば解決するみたいです)。
結局その画像を、「ヘッダーの背景画像」ではなく「ヘッダーのロゴ」として設定したらうまくいきました！
とりあえず他の有名ブロガーのヘッダーを観察
パパ
デザインセンス皆無なんだけど、どんなヘッダーにしたらいいんだろう…
ヘッダーのデザイン検討が一番難しいところですよね。
デザイナーならまだしも、素人がカッコいいデザインなどぱっと思いつくわけがないと思います。
ふと、私の会社のデザイナが、新たにWebサービスを作る時は、同業他社のデザインをかき集めて比較していることを思い出しました。
というわけで、売れている有名ブロガーのブログを20個ほど開いて、観察してみました。
まず、男と女でデザインが全く違いますね。
男：ほぼ白背景、シンプルなアイコン、ユニークなフォント
女：カラフルな写真、イラスト、キラキラ系のキャッチコピー
まさに、「男は黙って白背景」とでも言っているかのようです。
続いて、雑記ブログと特化ブログで比較してみました。
雑記ブログ：シンプルな背景が多い
特化ブログ：写真が背景が多い
すべてこの通りではないですが、上記のような傾向があります。
確かに雑記ブログで写真って難しいですよね。色々なネタの共通の写真を見つけることが大変そうです。下手に写真にした場合、記事の内容と異なっていると、何か違和感がありますからね。
これらを色々と参考にして、アンパパブログは、白背景でタイトル＋キャッチコピーのシンプルな感じにしたいと思いました。
ただ、アンパパ＝白いハトのキャラクターを覚えてほしかったので、キャラクターをヘッダーにも入れてみました。この時点で、シンプルではなくなってしまいましたね(笑)
とえあえずフリーツールをいじってみた
パパ
さて、デザインもなんとなく決まったけど、どうやって画像を作るのか？
ヘッダーのイメージが決まったらあとは作るだけです。
作るのはどんなツールを使っても良さそうですね。
WindowsでしたらペイントやPowerPointでできると思います。Macでしたらkeynoteでもできると思います。
今回アンパパは、何か新しいツールを使ってみたいと思いまして、「Photoscape X」というツールを使いました。無料版でも色々なことができるツールです。
ここでは特には説明しませんが、こんな感じの画面です。
右上の「イメージ」ボタンから画像を取り込んで、「テキスト」ボタンを押してテキストを入力が可能です。操作がめちゃくちゃ簡単でした。欠点は、フォントが少なめな印象でした。
この手のツールは色々あるので試してみたいところですね。また別途紹介したいと思います。
とりあえず出来上がりを確認してみた
パパ
ヘッダーができたけど、何を確認したら良い？
ここまでできたら、後はヘッダーを設定して、確認するだけですね。
最近は、スマホでのアクセスが多いため、スマホ実機での確認を忘れてはいけないですね。
色々な機種で確認したい場合は、Chromeの開発者ツールを使うと簡単にできます。Chrome開いてF12を押すだけです。
アンパパはシステムエンジニアですので、仕事でもよくやりますね。
まとめ
今回は、とりあえずヘッダーを変更してみました。
これでも頑張った方ですが、うちの会社のデザイナに見せたら何というかわかりません(笑)
ぱっと見る限り、バランスをもうちょっと考えたいし、フォントももっとお洒落なものを使いたいです。
もっと良くするためには、デザインの勉強はしたいですね。デザインの知識があれば、ヘッダーだけでなく、ブログ全体をカスタマイズできて、もっとブログが楽しくなりそうですね。
デザインができれば、デザインもできるシステムエンジニアということで、会社でももっと活躍できるかもしれません。
ちなみに、アンパパの鳩アイコンアイコンは「ココナラ
」で作りましたが、ブログのヘッダーもココナラ
で依頼してみるのも一つの手かと思います。
ちょっとお金はかかりますが、ブログは一生モノの資産ですよね。イラストレーターさんに書いてもらうと、プロっぽいブログになること間違いなしです。
＼ココナラの詳細はこちら／
