ユーザビリティー向上に欠かせないグローバルメニュー。

 

今回は、賢威でのカスタムをまとめました。

オーソドックスな色の変更から、使える幅の自動調整化まで網羅しましたので

是非ご活用ください!

 

ワードプレスのテーマは賢威が良いですよ!

 

スポンサーリンク

グローバルメニューの幅を自動調整させる方法

賢威のディフォルトの設定では、グローバルメニューの幅は自動調整されません。

blobal03

 

それを、これから紹介するコードを追記するとこうなります。

blobal04

【design.css】をカスタムします。

ダッシュボード⇒外観⇒テーマの編集⇒design.css

この順番で編集画面を表示させます。

 

以下の文字列を追記してください。

#global-nav ul{display: flex; /*フレキシブルボックス*/text-align: center; /*センタリングするかどうか*/}#global-nav ul li{width: 300px; /*幅の最大値*/}

これで、この様にメニュー数に用事てきっちりと幅調節がされるようになりました!

 

グローバルメニューの文字サイズを変更する方法

blobal05

 

文字サイズを変更したい場合も同じく【design.css】をカスタムします。

ダッシュボード⇒外観⇒テーマの編集⇒design.cssこの順番で編集画面を表示させます。

 

以下の文字列を見つけてください

/*●グローバルメニュー*/#global-nav .menu-wrap{ display: block; }#menu{padding-bottom: 5px;font-size: 1.2em;}

 

ここのfont-size: 1.2emの数字を変えれば文字サイズが変わります。

 

グローバルメニューのボタン背景色を変更する方法

blobal02

【design.css】をカスタムします。

ダッシュボード⇒外観⇒テーマの編集⇒design.cssこの順番で編集画面を表示させます。

#global-nav #menu li a:link,#global-nav #menu li a:visited{ background-color: #fff; } /*すでに訪れたリンクの背景色*/#global-nav #menu li a:hover,#global-nav #menu li a:active{ background-color: #efefef; } /*マウスカーソルを乗せた時の背景色*/

 

掲載されている通りになりますが、

#global-nav #menu li a:visited{ background-color: #fff; }

#global-nav #menu li a:active{ background-color: #efefef; }

それぞれの#からの色コードを変えれば色が変わります。

 

グローバルメニューの文字色を変更する方法

blobal07

【design.css】をカスタムします。

ダッシュボード⇒外観⇒テーマの編集⇒design.cssこの順番で編集画面を表示させます。

/*メニューのデザイン*/#global-nav #menu li a{ display: block; padding: 0.8em 2em; color: #333; /* メニューのフォントの色*/ text-decoration: none;}

 

color: #333; /* メニューのフォントの色*/ の#からの色コードを変えれば、文字色が変わります。

 

グローバルメニューの背景色を変更する方法

blobal01

【design.css】をカスタムします。

ダッシュボード⇒外観⇒テーマの編集⇒design.cssこの順番で編集画面を表示させます。

以下の文字列を見つけてください。

/*--------------------------------------------------------グローバルナビ--------------------------------------------------------*/#global-nav{background-color: #fff;border-bottom: 4px solid #000;} /*メニュー下のラインの設定*/

background-color: #fff; #からの色コードを変えれば、ラインの色が変わります。

 

グローバルメニューしたのラインのカスタム

blobal06

【design.css】をカスタムします。

ダッシュボード⇒外観⇒テーマの編集⇒design.cssこの順番で編集画面を表示させます。

以下の文字列を見つけてください。

/*--------------------------------------------------------グローバルナビ--------------------------------------------------------*/#global-nav{background-color: #fff;border-bottom: 4px solid #000;} /*メニュー下のラインの設定*/

border-bottom: 4px の数字を変えればラインの太さが変わります。

solid #000; #からの色コードを変えれば、ラインの色が変わります。

 

ドロップダウンメニューの幅変更、色変更の方法

グローバルメニューと言えば、ドロップダウンメニューもですよね!

blobal08

 

【design.css】をカスタムします。

ダッシュボード⇒外観⇒テーマの編集⇒design.cssこの順番で編集画面を表示させます。

以下の文字列を見つけてください。

/*ドロップダウンメニューのデザイン*/#global-nav #menu li ul li{margin: 0;padding: 0;width: 12em;background-color: #eaeaea;border-top: 0;border-right: 0;white-space: normal;}#global-nav #menu li ul li a{display: block;padding: 0.8em 2em;}

width: 12em; ここの数字の変更で幅が変わります。

background-color: #eaeaea; ここの色コードを変えれば、背景色が変わります

 

グローバルメニューについてはこちらで解説しています

グローバルメニューはユーザビリティー向上に繋がりますので、しっかりと作りこみたいですよね。
よく分からない方は、こちらで解説していますので、併せてご活用ください^^
メリット大!グローバルメニューを有効活用しよう!

 

賢威はSEOに強いだけではなく、このようにさまざまなカスタムに対応していますので

オウンドメディア構築はもってこいのテーマです。

SEOに強いテーマ・柔軟なカスタムに対応できるテーマに興味のある方は、お勧めしますよ!


【賢威】

manual