【Diverカスタマイズ】ヘッダーとウィジェットタイトルのデザイン変更

サイトをパッと見た時の印象は色だけでも随分イメージが変わります。

今回は、サイトの顔というべきヘッダー部分と、ウィジェットタイトルを

カスタマイザーを使用しただけで簡単にイメチェンしました。

変更前と変更後の画像で見比べてみてくださいね!

ヘッダー部分をシンプルにカスタマイズ

ゆくゆくはサイトロゴを作りたいなとは思ってるんですが、とりあえず現状のままだと前回変更した見出しデザインとのギャップがありすぎるし、可愛くない。

 

変更前のトップページはこんな感じ↓

ブログのデザイン

デフォルトのまま!女子力低すぎるね?

(この時点でまだ3記事しか投稿してないから、誰も見ないと思うけど)

なので見出しの色にあわせて、簡単にヘッダーとウィジェットをカラーを変えていきます。

「ダッシュボード」⇒「外観」⇒「カスタマイズ」から一気に変更できるので簡単、簡単♪

Diverカスタマイズ設定

ミニヘッダーは「メイン設定」から、ヘッダーとサイトタイトルは「基本カラー」から、そしてウィジェットタイトルの色とスタイルは「デザイン設定②」から変更していきまーす。

キャッチフレーズが表示されてるミニヘッダーを消す

「diverカスタマイズあれこれを綴るブログ」みたいな、ブログのキャッチフレーズが入るミニヘッダー。

DiverオプションのSEO設定でキャッチフレーズの設定はできるので、削除してもいいでしょ?…という勝手な見解で、サクっと非表示に。

「カスタマイズ」⇒「メイン設定」から、

ミニヘッダーの削除設定

ミニヘッダーを表示する】のチェックを外します。以上。

ヘッダーとサイトタイトルの色を変更

サイトタイトルはロゴを作りたいとこだけど、それはまたそのうちに。

とりあえずはサクっと、ブログ全体のカラーを合わせるために、カスタマイザーで色だけを変更します。

「カスタマイズ」⇒「基本カラー」⇒「ヘッダー背景」で、

ヘッダーのカラー変更

見出しで使っているカラーコード(#81d8d0)を枠内に手入力して、右のスライダーで色味を薄く落とします。

下にあるスライダーは透過率なので、ちょっと透けるように「70」にしました。(←その後「80」に変更済)

ヘッダーの変更

で、サイトタイトルはトップページ(HOME)へのリンクとなっているので、「ヘッダーリンク」を変更することで、タイトルカラーが変更できます。

今の時点でテキストはいれてないこと、タイトルはそのうちロゴにする予定なので適当なカラーを選択してます。

たったこれだけの作業で、ヘッダーデザインがこんなに変わりました↓

ヘッダーデザイン

更に、Diverでは固定ヘッダーで画面をスクロールしてもヘッダーメニューを表示させることができます。

そのため、固定ヘッダーは背景の透過率を「60」に下げて、画面が狭くなるのをちょっとでも緩和。

固定ヘッダーカスタマイズ

画面をスクロールした際のヘッダーの透け感は、こんな感じになりました↓

固定ヘッダーカスタマイズ

ただ、この色だとメニューのテキスト色に迷いがでそう。(白だと見づらい、グレーだと記事とかぶる)

もしかしたら、変更しちゃうかもしれませんね。

ウィジェットタイトルの色とスタイルを変更

サイドバーのウィジェットタイトルも、見出しと同じカラー(文字色:#fff、背景:#81d8d0)に変更しました。

基本色というのは、スタイルのデザインによって、使用される色になります。

ウィジェットスタイルのカスタマイズ

そのスタイルは、この時点で9種類。

ウィジェットスタイル

ボックスとリボン1・2以外を使う場合には基本色の設定が必要です。

ウィジェットタイトルのカスタマイズは右側の画面でプレビューを見る事ができるので、いちいち公開ボタンを押さなくてもいいのがgood。

でも一応、スタイル一覧をまとめて紹介しておきますね。(ムダ骨っていわないで…)

diverのウィジェットスタイル一覧

上から、

・ボックス
・下線
・リッチ
・タグ
・ステッチ
・リボン1
・リボン2
・ふせん
・ストライプ

で並べてみました。

リッチとストライプは特に色の組み合わせが難しいとこ。

タグとリボン1・リボン2は、PCで見た時に見出しと干渉しないかどうかチェックしたほうがいいかもです。

 

テスト用に基本色は適当にわかりやすい色(#c466c2)を選んでみただけなので、決してマネしないでね。(するか!)

変更後のヘッダーとウィジェット部分を見比べてみましょっか。

最初でご紹介した通り、このブログはWordPressテーマ「Diver」を、全くのデフォルト状態から徐々にカスタマイズしていってるので、初期のデザインはこんな感じ↓

ブログのデザイン

今回、ヘッダーとウィジェットタイトルを変更しただけで、こんな見栄えになりました↓

ブログデザイン

女子っぽくなってキターーーーー!!!

けど、まだまだ可愛くない。

 

いやいや、でもこれもDiverをもっと簡単に可愛く使ってもらうため。

このブログもまだまだ可愛くしていきますからね~!

このブログはWordPressテーマ「Diver」を使用しています

ブログの収益化・効率化を狙うならテーマによるSEO対策や操作性は大事な要素の一つ。

WordPressテーマ「Diver」は初心者にも使いやすく、自分色のブログを作りやすいサイト構造が特長。

人と被るようなブログにしたくない!そんなあなたにおすすめのテーマです。

ブルー
当サイトからのDiver購入者限定特典もあるんだな

はち
可愛いブログを作りたいけど、カスタマイズしてる時間ない!そんな人は必見だね

ちゃとら
ブログ作りの時間短縮をお手伝いする秘伝のレシピなの
おすすめの記事