サイトをパッと見た時の印象は色だけでも随分イメージが変わります。
今回は、サイトの顔というべきヘッダー部分と、ウィジェットタイトルを
カスタマイザーを使用しただけで簡単にイメチェンしました。
変更前と変更後の画像で見比べてみてくださいね！
Contents
ヘッダー部分をシンプルにカスタマイズ
ゆくゆくはサイトロゴを作りたいなとは思ってるんですが、とりあえず現状のままだと前回変更した見出しデザインとのギャップがありすぎるし、可愛くない。
変更前のトップページはこんな感じ↓
デフォルトのまま！女子力低すぎるね？
（この時点でまだ3記事しか投稿してないから、誰も見ないと思うけど）
なので見出しの色にあわせて、簡単にヘッダーとウィジェットをカラーを変えていきます。
「ダッシュボード」⇒「外観」⇒「カスタマイズ」から一気に変更できるので簡単、簡単♪
ミニヘッダーは「メイン設定」から、ヘッダーとサイトタイトルは「基本カラー」から、そしてウィジェットタイトルの色とスタイルは「デザイン設定②」から変更していきまーす。
キャッチフレーズが表示されてるミニヘッダーを消す
「diverカスタマイズあれこれを綴るブログ」みたいな、ブログのキャッチフレーズが入るミニヘッダー。
DiverオプションのSEO設定でキャッチフレーズの設定はできるので、削除してもいいでしょ？…という勝手な見解で、サクっと非表示に。
「カスタマイズ」⇒「メイン設定」から、
【ミニヘッダーを表示する】のチェックを外します。以上。
ヘッダーとサイトタイトルの色を変更
サイトタイトルはロゴを作りたいとこだけど、それはまたそのうちに。
とりあえずはサクっと、ブログ全体のカラーを合わせるために、カスタマイザーで色だけを変更します。
「カスタマイズ」⇒「基本カラー」⇒「ヘッダー背景」で、
見出しで使っているカラーコード（#81d8d0）を枠内に手入力して、右のスライダーで色味を薄く落とします。
下にあるスライダーは透過率なので、ちょっと透けるように「70」にしました。（←その後「80」に変更済）
で、サイトタイトルはトップページ（HOME）へのリンクとなっているので、「ヘッダーリンク」を変更することで、タイトルカラーが変更できます。
今の時点でテキストはいれてないこと、タイトルはそのうちロゴにする予定なので適当なカラーを選択してます。
たったこれだけの作業で、ヘッダーデザインがこんなに変わりました↓
更に、Diverでは固定ヘッダーで画面をスクロールしてもヘッダーメニューを表示させることができます。
そのため、固定ヘッダーは背景の透過率を「60」に下げて、画面が狭くなるのをちょっとでも緩和。
画面をスクロールした際のヘッダーの透け感は、こんな感じになりました↓
ただ、この色だとメニューのテキスト色に迷いがでそう。（白だと見づらい、グレーだと記事とかぶる）
もしかしたら、変更しちゃうかもしれませんね。
ウィジェットタイトルの色とスタイルを変更
サイドバーのウィジェットタイトルも、見出しと同じカラー（文字色：#fff、背景：#81d8d0）に変更しました。
基本色というのは、スタイルのデザインによって、使用される色になります。
そのスタイルは、この時点で9種類。
ボックスとリボン1・2以外を使う場合には基本色の設定が必要です。
ウィジェットタイトルのカスタマイズは右側の画面でプレビューを見る事ができるので、いちいち公開ボタンを押さなくてもいいのがgood。
でも一応、スタイル一覧をまとめて紹介しておきますね。（ムダ骨っていわないで…）
上から、
・ボックス
・下線
・リッチ
・タグ
・ステッチ
・リボン1
・リボン2
・ふせん
・ストライプ
で並べてみました。
リッチとストライプは特に色の組み合わせが難しいとこ。
タグとリボン1・リボン2は、PCで見た時に見出しと干渉しないかどうかチェックしたほうがいいかもです。
テスト用に基本色は適当にわかりやすい色（#c466c2）を選んでみただけなので、決してマネしないでね。（するか！）
変更後のヘッダーとウィジェット部分を見比べてみましょっか。
最初でご紹介した通り、このブログはWordPressテーマ「Diver」を、全くのデフォルト状態から徐々にカスタマイズしていってるので、初期のデザインはこんな感じ↓
今回、ヘッダーとウィジェットタイトルを変更しただけで、こんな見栄えになりました↓
女子っぽくなってキターーーーー！！！
けど、まだまだ可愛くない。
いやいや、でもこれもDiverをもっと簡単に可愛く使ってもらうため。
このブログもまだまだ可愛くしていきますからね~！
