賢威のサイトタイトル下のメニュー【グローバルナビ】のデザインをカスタマイズする
賢威ではグローバルナビ(グローバルメニュー)が標準装備されています。
グローバルナビは、どのページを開いてもページの上に表示されるメニューで、ユーザーがサイトの内容を把握したり、見たいページに行きやすくするものです。
ここでは、グローバルナビのデザインをカスタマイズする方法をご紹介します。
グローバルナビのデザインをカスタマイズする
グローバルナビは↓この部分です。
グローバルナビのデザインは『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に変更しました。
このように一つ一つを変更してアレンジしてみてください。
ゆどさん、はじめまして小林と申します。
初めてメールさせていただきます。
3週間前に賢威を購入しワードプレスも使い始めたばかりで
設定に四苦八苦しております。出来ない設定があると
最近ゆどさんのブログを拝見させていただくようになりました。
大変、大変お手数ですが、出来ればグローバルナビの設定を
教えていただけないかと思い、思いきってメールさせていただきました。
どうしてもゆどさんのように表示されず
色々調べているのですが、原因が分からず困っています。(泣)
ブログの中に「『グローバルナビの設置』については
別の記事で説明したいと思います。」とあるのですが
記事が見つからず少々途方に暮れています。。。
お時間ある時にでも、返信いただけると
大変ありがたいです。
どうぞ宜しくお願いします。
小林さん
コメント有難うございます。
記事を書き忘れていていたようでご迷惑おかけしました。
グローバルナビ設置の記事をつくりましたので参考にしてください。
http://yudnaliatah.com/global-navigation-set-2535
これでできない場合はどこでつまずいているかご連絡ください。