賢威のサイトタイトル下のメニュー【グローバルナビ】のデザインをカスタマイズする
賢威ではグローバルナビ（グローバルメニュー）が標準装備されています。
グローバルナビは、どのページを開いてもページの上に表示されるメニューで、ユーザーがサイトの内容を把握したり、見たいページに行きやすくするものです。
ここでは、グローバルナビのデザインをカスタマイズする方法をご紹介します。
グローバルナビのデザインをカスタマイズする
グローバルナビは↓この部分です。
グローバルナビのデザインは『design.css』で変えます。
『グローバルナビの設置』についてはこちらを参考にしてください。
あまり高度なことはせず、下記の要素を組み合わせてアレンジしていきます。
- 文字の色
- 背景の色・マウスオーバー時の色
- 線の色・種類・太さ・位置
今回は、賢威6.2 コーポレート版で説明します。
他のテンプレートでも同じような箇所を変更すれば問題ありません。
マネー版のグローバルナビの背景は濃い色の画像なので、背景色を変えてもあまり変わりません。
ヘルシー版も画像ですが、画像の色が薄いので変わります。
文字・線・背景の色を変える
WordPress管理画面＞外観＞テーマ編集をクリックします。
右のメニューから「design.css」をクリックします。
/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/
と書かれたところを変更します。
まず文字・線・背景の色を変えてみましょう。
色は下記のサイトを参考にしてください。
背景色を白から薄水色（#c1ebff）、下線の色を黒から水色（#009fe8）に変更しました。
記述を変更したら一番下の「ファイルを更新する」をクリックします。
以下も同様に、記述を変更した場合はファイルを更新します。
メニューの背景色は別の箇所です。
メニューの縦線の色も変更します。
黒から水色（#009fe8）に変更しました。
グローバルメニューの文字色、背景色、マウスをのせた時の背景色を変更します。
文字色を黒から濃い青色（#006999）
背景色を白から薄水色（#c1ebff）
マウスをのせた時の背景色をグレーから水色（#86d8ff）に変更しました。
わかりやすくするためにグローバルナビの背景色を白に戻しました。
線の形を変更する
次は線の追加と線の太さ・位置の変更について説明します。
まず、メニューの上に線を追加します。
Border-topの行を追加すると、線が追加されました。
メニューと下の線との間にすきまができておかしいのでくっつけます。
「メニューと下線の間の余白をなくす」という考え方です。
このようになります。
次は、線の太さ・種類を変更します。
太さはpxの数値を変えます。種類は「CSS 線の位置と種類」の表を参考にしてください。
グローバルメニューの縦と横の線をすべて太くして盛り上がった線に変えました。
次はグローバルナビの縦・横の幅を変えます。
emの横の数値を変更します。
縦幅を0.8emから1.8emに変更しました。
四角の線と文字の間の余白の幅を変更するという考え方です。
横幅を2emから3emに変更しました。
メニューの文字の大きさを変える
最後にグローバルメニューの文字サイズを変更します。
font-sizeのemの横の数値を変えます。
文字サイズを1.2emから1.5emに変更しました。
このように一つ一つを変更してアレンジしてみてください。
こちらの記事も参考になります
賢威ヘッダー（ページ上部）の文字の色・サイズ・背景を変える 賢威テンプレートで作ったサイトのページ上部（ヘッダー） […]
賢威7 サイト全体・各エリアの背景色をカスタマイズする 賢威7のサイト全体と各エリアの背景色の変更について解説します。スタンダード版は、1箇所の変更でサイト全体の背景色を変えることができますが、 […]
賢威サイト全体の文字の色・サイズ・フォント、行間を変える 賢威テンプレートで作ったサイト全体の文字色・文字サイズ・フォントを
好みのものに変更する方法と、行と行の間隔を変更する方法をご紹介し […]
賢威ヘッダーを画像に変える－背景画像挿入・文字と画像の入れ替え 賢威のヘッダーを画像にする方法として ①文字（テキスト）の後ろに背景画像を設置する方法と […]
賢威 サイトタイトルの下のメニュー（グローバルナビ）を作る方法 賢威テーマを使ったWordPressのサイトタイトルの下にあるメニュー（グローバルナビ）の設置方法について解説します。
プルダウンメニュ […]
賢威 サイト全体の背景色の変更・背景画像の挿入の方法 賢威のテンプレートの背景は非常にシンプルで全面一色です。これを少しカスタマイズするとサイト全体の雰囲気がぐっと良くなりますよね。もちろんデ […]
ゆどさん、はじめまして小林と申します。
初めてメールさせていただきます。
3週間前に賢威を購入しワードプレスも使い始めたばかりで
設定に四苦八苦しております。出来ない設定があると
最近ゆどさんのブログを拝見させていただくようになりました。
大変、大変お手数ですが、出来ればグローバルナビの設定を
教えていただけないかと思い、思いきってメールさせていただきました。
どうしてもゆどさんのように表示されず
色々調べているのですが、原因が分からず困っています。（泣）
ブログの中に「『グローバルナビの設置』については
別の記事で説明したいと思います。」とあるのですが
記事が見つからず少々途方に暮れています。。。
お時間ある時にでも、返信いただけると
大変ありがたいです。
どうぞ宜しくお願いします。
小林さん
コメント有難うございます。
記事を書き忘れていていたようでご迷惑おかけしました。
グローバルナビ設置の記事をつくりましたので参考にしてください。
http://yudnaliatah.com/global-navigation-set-2535
これでできない場合はどこでつまずいているかご連絡ください。