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

 

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

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

是非ご活用ください!

 

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

スポンサーリンク

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

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

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に強いテーマ・柔軟なカスタムに対応できるテーマに興味のある方は、お勧めしますよ!


【賢威】