WordPressでグローバルナビを画面一杯に広げ、カッコよくカスタマイズする方法を図解！

こんにちは、しらたまです。
今日も忙しいママのためのネットビジネスキャリアアップ講座を開始します。

隣のご飯が何か気になるニャ〜🐾

これまで4回に渡って、WordPressの固定ページについて、解説してきました。

4つの記事を順に読みながら作業をしていただくと、

・あなたのブログにグローバルナビが表示される
・グローバルナビに、3つか4つ位のメニューが表示されている

という状態になっていると思います。
でも…

それ、もしかしたら

・グローバルナビが画面の幅いっぱいになっていないから
・メニューがぎゅっと偏って表示されているから

そんな理由かもしれません。
今日はそんなグローバルナビの「ちょっと気になる」部分を、格好良く整える方法を解説していきます。

グローバルナビとは？

グローバルナビとは、ブログタイトルの下にある横向きのバーで、プロフィールやお問い合わせページなどの固定ページへのリンクを用意したり、トップページに戻るリンクや、カテゴリー毎に記事を表示するためリンクを表示するメニューのことです。
前回までの作業で、グローバルナビには４つのメニューが追加された状態になりました。

初期設定では、グローバルナビは明るい灰色の背景、少し暗い灰色の枠、文字は黒です。
項目にマウスを持っていくと（マウスオーバーと言います）、背景の灰色が少し暗い灰色に変わります。
ちょうど、上の画像では「お問い合わせ」の部分がマウスオーバーした状態です。

今日は、このグローバルナビの部分を…

こんな感じで一つ一つアレンジして、あなたのブログの雰囲気に合う様にしてみましょう。

色を選ぶ時には、必ず色見本を使うべし！

これからWordPressで色々な部分の色を変更する時に、自分で色を選択していきます。
その時に、この様な画面で操作するのですが…

クリックして好みの色を選ぶ様になっているのですが、濁ったり、変な色になったりと、気に入った色にするのは意外と難しいんですよね。そんな時に便利なのが「色見本」です。

色見本とは、本来上の写真の様なカラフルな単語帳みたいなもので、色に番号がふってあります。本来は印刷の時に色指定をする際に使われている他、様々な製品のカラーコーディネートをするのにも使用されています。

実は、この色見本のweb版があるんです。

【WEB色見本】

こちらのページでは、

・原色大辞典
・和色大辞典
・洋色大辞典
・パステルカラー
・ビビッドカラー

…などなど、８つのパターンで、たくさんの色が紹介されています。
しかも、色の番号は「HTMLカラーコード」と呼ばれる、webページを作るのに使われる言語で掲載されています。
＃◯◯◯◯◯というのが、HTMLカラーコードと呼ばれる「色の番号」です。
この番号をコピーして貼り付けるだけで、その色をビシッと指定することができます。

これから色を指定する場面がいくつかありますが、色見本から色を指定する方が簡単にきれいな色にできるので、ぜひ活用して下さい。
あなたのブログの雰囲気に合わせて、お好みの色を探してみてくださいね。

グローバルナビをカッコよくカスタマイズする方法

では、ここからはグローバルナビをカスタマイズする方法について、解説します。
５つご紹介しますので、必要なところだけ取り入れてみてください。

１.　グローバルナビを画面の横幅いっぱいに広げる

WordPressの管理画面にログインして、左側のメニューから…

「外観」→「カスタマイズ」をクリックします。

次に、左側のメニューから「ヘッダー」をクリック。

下の方へスクロールして、”ヘッダー外側背景画像”のところの「グローバルナビを横幅いっぱいにする」にチェックを入れ、「保存して公開」をクリックします。

 

こんな風に、グローバルナビが画面いっぱいに広がりました。
すご〜く見辛いのですが、グローバルナビ上下のグレーの線が、横幅いっぱいに広がっている状態です。

２.　グローバルナビの上下の線の色を変更する

先程と同様に、管理画面の「外観」→「カスタマイズ」をクリックした後、今度はメニューの下の方にある「追加CSS」をクリックします。

こんな画面が表示されますので…

   

もともと入力されていた部分を消去し、以下をコピーして貼り付けてください。
＃◯◯◯◯◯◯のところには、先ほどご紹介した色見本のページを参考に、好きな色の番号を入力します。

入力できたら、右上の「保存して公開」をクリックします。

線の色を変更すると、こんな感じになりました。

３.　グローバルナビの色を変更する

先程と同様に「外観」→「カスタマイズ」をクリックし、上から２番目の「色」をクリックします。

この画面では、ブログの様々な色が変更できます。
色を入力すると、右側の画面にプレビューされるので、気に入った色になったら「保存して公開」すれば、様々なものの色がカスタマイズできますよ。

ここではまず、グローバルナビ色を変更してみましょう。
「色を選択」をクリックし、お好きな色の番号を色見本から選んで入力します。

  

プレビューではこんな色になりましたました。

ちなみに、上下の線が出ない様にしたい場合は、グローバルナビ色と上下の線の色に同じ色を指定すればそれっぽくなります。

 

今度は、先ほどと同様にグローバルナビリンク色、グローバルナビリンクホバー色を変更してみます。
グローバルナビリンク色は、グローバルナビに表示される文字の色。
グローバルナビリンクホバー色は、リンクの上にマウスを持ってきた時に何色に変わるかです。

気に入った色に変更できたら、「保存して公開」をクリックします。

こんな風になりました。背景の色と合う感じになりましたね。

 

余談ですが、こちらの「色」の設定画面では、

・トップページに表示される記事題名の文字の色
・題名にマウスオーバーした時の色
・タイトルの色

など、様々なものの色の設定ができます。
リンク色、リンクホバー色は読者さんがブログを読む時に必ず目に止まるので、この２色だけでも雰囲気にあった色に変更すると、より素敵になるのでおすすめです。

４.　メニュー幅を調整し、左に寄ってしまった偏りを解消

グローバルナビに表示したいメニューがたくさんある場合は、このままの設定でもあまり違和感がないかもしれませんが、4つしかメニューがない状態だと右側があいてしまってなんとなく不恰好…
そこで、この左にぎゅっと寄ってしまったメニューの偏りを改善します。

WordPress管理画面の「外観」→「カスタマイズ」をクリックし、メニューの下の方にある「追加CSS」をクリックします。

さっき、上下の線の色を変える時にコピー、ペーストした画面が表示されるので、その下に以下をコピーして貼り付けて下さい。

215のところは、表示するメニューの数によって変わってきます。

「適当に入れてみる→確認してみる→数字を上下して微調整」

という感じで、幅はお好みで調整してみて下さいね。

プレビューで確認し、ちょうど良い幅になったら「保存して公開」します。
この様になりましたが…

気になる…！！

５.　メニューを真ん中に表示する

今の状態では、メニューにマウスオーバーするとメニューの名前が左寄せになっていることがわかります。
１つのメニューに割り振られた幅が広い場合は、左寄せのままだとちょっと気になるので、これを真ん中に持ってきましょう。

WordPressの管理画面「外観」→「カスタマイズ」から「追加CSS」をクリックします。

先程入力した部分の下に、以下をコピーして貼り付け、「保存して公開」をクリックして下さい。

 

これで、最終的にこんな外観になりました。

メニューが画面に概ね均等に配置されて、マウスオーバーした時にも文字が真ん中に来る様になりましたね。

スポンサーリンク

まとめ

今日は、グローバルナビの外観をアレンジする方法について

こんな内容で解説しました。
ブログの外観は、お好みの雰囲気に近づきましたか？
作業、お疲れさまでした！

今回の作業では初めてCSSなるものが出てきて、ちょっと難しく思ったかもしれません。
ですが、ブログを書くためにCSSを専門的に勉強する必要はないので、あまり考えずにコピー・ペーストしてしまえばOKです。
そして、色を指定する時には「WEB色見本」を活用するのをお忘れなく。

 

では、また次回お会いしましょう🐾