賢威のサイトタイトル下のメニュー【グローバルナビ】のデザインをカスタマイズする

賢威ではグローバルナビ(グローバルメニュー)が標準装備されています。 

グローバルナビは、どのページを開いてもページの上に表示されるメニューで、ユーザーがサイトの内容を把握したり、見たいページに行きやすくするものです。

ここでは、グローバルナビのデザインをカスタマイズする方法をご紹介します。

グローバルナビのデザインをカスタマイズする 

 

グローバルナビは↓この部分です。 

賢威グローバルナビ

 

 グローバルナビのデザインは『design.css』で変えます。

 『グローバルナビの設置』についてはこちらを参考にしてください。

 

あまり高度なことはせず、下記の要素を組み合わせてアレンジしていきます。

  1. 文字の色
  2. 背景の色・マウスオーバー時の色
  3. 線の色・種類・太さ・位置

 

今回は、賢威6.2 コーポレート版で説明します。

他のテンプレートでも同じような箇所を変更すれば問題ありません。

 

マネー版のグローバルナビの背景は濃い色の画像なので、背景色を変えてもあまり変わりません。

ヘルシー版も画像ですが、画像の色が薄いので変わります。 

 

 

文字・線・背景のを変える

WordPress管理画面>外観>テーマ編集をクリックします。 

WordPress テーマ編集

 

右のメニューから「design.css」をクリックします。 

WordPress design.css

 

/*--------------------------------------------------------
グローバルナビ
--------------------------------------------------------*/

と書かれたところを変更します。

 

まず文字・線・背景の色を変えてみましょう。

色は下記のサイトを参考にしてください。

ColorCodeHex.com

カラーコード表

 

グローバルナビ デザイン

 

背景色を白から薄水色(#c1ebff)、下線の色を黒から水色(#009fe8)に変更しました。

記述を変更したら一番下の「ファイルを更新する」をクリックします。

以下も同様に、記述を変更した場合はファイルを更新します。

 

メニューの背景色は別の箇所です。 

グローバルナビ デザイン

 

メニューの縦線の色も変更します。 

グローバルメニュー デザイン

 

黒から水色(#009fe8)に変更しました。 

グローバルメニュー デザイン

 

グローバルメニューの文字色、背景色、マウスをのせた時の背景色を変更します。 

グローバルメニュー デザイン

 

文字色を黒から濃い青色(#006999)

背景色を白から薄水色(#c1ebff)

マウスをのせた時の背景色をグレーから水色(#86d8ff)に変更しました。

わかりやすくするためにグローバルナビの背景色を白に戻しました。

 

グローバルメニュー デザイン

 

 

 線の形を変更する

 

次は線の追加と線の太さ・位置の変更について説明します。

 

まず、メニューの上に線を追加します。 

グローバルナビ デザイン

 

Border-topの行を追加すると、線が追加されました。 

グローバルナビ デザイン

 

 メニューと下の線との間にすきまができておかしいのでくっつけます。

「メニューと下線の間の余白をなくす」という考え方です。 

グローバルメニュー デザイン

 

このようになります。 

グローバルナビ デザイン

 

次は、線の太さ・種類を変更します。

太さはpxの数値を変えます。種類は「CSS 線の位置と種類」の表を参考にしてください。 

グローバルナビ デザイン

 グローバルメニューの縦と横の線をすべて太くして盛り上がった線に変えました。 

グローバルナビ デザイン

 

次はグローバルナビの縦・横の幅を変えます。

emの横の数値を変更します。 

グローバルナビ デザイン

 

縦幅を0.8emから1.8emに変更しました。

四角の線と文字の間の余白の幅を変更するという考え方です。 

グローバルナビ デザイン

 

横幅を2emから3emに変更しました。

グローバルナビ デザイン

 

 

 メニューの文字の大きさを変える

 

最後にグローバルメニューの文字サイズを変更します。

font-sizeのemの横の数値を変えます。

 

グローバルメニュー 文字サイズ

 

文字サイズを1.2emから1.5emに変更しました。 

グローバルメニュー 文字サイズ

 

このように一つ一つを変更してアレンジしてみてください。 

 

こちらの記事も参考になります

2 Responses to “賢威のサイトタイトル下のメニュー【グローバルナビ】のデザインをカスタマイズする”

  1. コバヤシミキ より:

    ゆどさん、はじめまして小林と申します。
    初めてメールさせていただきます。

    3週間前に賢威を購入しワードプレスも使い始めたばかりで
    設定に四苦八苦しております。出来ない設定があると
    最近ゆどさんのブログを拝見させていただくようになりました。
    大変、大変お手数ですが、出来ればグローバルナビの設定を
    教えていただけないかと思い、思いきってメールさせていただきました。

    どうしてもゆどさんのように表示されず
    色々調べているのですが、原因が分からず困っています。(泣)

    ブログの中に「『グローバルナビの設置』については
    別の記事で説明したいと思います。」とあるのですが
    記事が見つからず少々途方に暮れています。。。

    お時間ある時にでも、返信いただけると
    大変ありがたいです。

    どうぞ宜しくお願いします。

    • yudnali より:

      小林さん
      コメント有難うございます。

      記事を書き忘れていていたようでご迷惑おかけしました。

      グローバルナビ設置の記事をつくりましたので参考にしてください。
      http://yudnaliatah.com/global-navigation-set-2535

      これでできない場合はどこでつまずいているかご連絡ください。

コバヤシミキ にコメントする

サブコンテンツ

このページの先頭へ