自分のサイトを作っていて、必ず見てもらたかったりアピールしたいページは目立つようにしておきたいですよね。

そんな時に役立つのがグローバルメニューで、よく見掛けるものに『サイトマップ』や『自己紹介ページ』、『問い合わせページ』などがあります。

さらに、グローバルメニューは色を変えることでオリジナリティーを出すこともできます。

もちろんオシャレ度も上がるし、方法も難しくないので挑戦してみましょう!

今回はグローバルメニューの色のカスタマイズを説明していきます。

※テンプレートは『賢威7.0 スタンダード版』を使用しています。

 

初心者向け!カスタマイズする際のコツ

グローバルメニューをカスタマイズする前に3つのポイントを説明します。特にカスタマイズ経験のない初心者さんは必ず読んでください。

 

カスタマイズは全てbase.cssから

グローバルメニューのカスタマイズはどのようなものであってもbase.cssの編集が必要になります。

まずはbase.cssがどこにあるのかを説明していきます。

 

ワードプレス管理画面を開く

ワードプレス管理画面、左側にあるメニューから『外観』→『テーマ編集』へと進む。

 

 

base.cssを見つける

『テーマ編集』の画面右に『テンプレート』があります。

そこから下にスクロールさせると、『スタイル』という項目内にbase.cssがあるのでそこをクリック。

 

 

これでbase.cssの編集画面に進むことができます。

なお、編集が終わったら必ず更新ボタンを押すようにしてください!(結構忘れがち)

 

カスタマイズ箇所を探す方法

base.cssには様々なコードが記載されていて、その中で編集場所を探すのは大変ですよね。カスタマイズを説明しているサイトは数多くても、実践は意外と難しいわけです。

初心者さんが躓くのもこれが原因だと思いますが、そんな時は『サイト内検索』を使いましょう。

※ウインドウズPC使用時

 

 

検索ボックスは『ctrl+F』を同時押しすると出てきます。

ここに検索ワードを入力し、ボックス内にある下向き・上向きの矢印をクリックすれば、そのワードまで飛ぶことができます。

 

カスタマイズが反映されない時の対処法

cssを編集しても結果が反映されない場合、キャッシュが邪魔をしている可能性があります。

これはキャッシュ消去により解決できます。

方法は以下を参考にしてください(google chromeのみ)

⇒ 賢威でカスタマイズが反映されない時の対策は?

 

グローバルメニューの色変更

ここからはグローバルメニューの色変更について説明していきます。

なお、使用テンプレートは『賢威7.0 スタンダード版』となります。

 

背景色

以下のグローバルメニューの色を、赤から青に変えてみます。

 

 

まずはbase.css内で”グローバルナビ”項目にある以下のコードを編集します。

 

 

※以下に該当箇所を記載しておくので、『.global-nav-in li a{』や『display: block;』などをコピーしてサイト内検索しましょう。

 

カスタマイズ前

.global-nav-in li a{

display: block;

min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/

padding: 1em; /*画像をメニューにする場合は値を0に*/

background-color: #bd4646;

color: #fff;

text-decoration: none;

}

 

例えば青色に変える場合は、変更該当箇所を青の色コードである『#000080』に書き換えます。

 

カスタマイズ後

.global-nav-in li a{

display: block;

min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/

padding: 1em; /*画像をメニューにする場合は値を0に*/

background-color: #000080;

color: #fff;

text-decoration: none;

}

 

するとグローバルメニューの背景が青に変わりました。

 

 

文字色

グローバルメニューの文字色をカスタマイズしてみましょう。背景色と同じ位置にあるコードを編集することで色が変わります。

 

 

カスタマイズ前

.global-nav-in li a{

display: block;

min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/

padding: 1em; /*画像をメニューにする場合は値を0に*/

background-color: #bd4646;

color: #fff;

text-decoration: none;

}

例えば赤色に変える場合は、変更該当箇所を赤の色コードである『#bd4646』に書き換えます。

 

カスタマイズ後

.global-nav-in li a{

display: block;

min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/

padding: 1em; /*画像をメニューにする場合は値を0に*/

background-color: #bd4646;

color: #bd4646;

text-decoration: none;

}

 

見づらいですが文字の色が赤に変わっています。

 

 

フッターの色

ヘッダー同様、フッターのグローバルメニューも背景の色変更が可能です。

以下のグローバルメニューの背景色を赤から青へ変えてみます。

 

 

いつもの通り、base.css内で”グローバルナビ”項目にある以下のコードを編集します。

 

 

※以下に該当箇所を記載しておくので、『フッター』や『.site-footer』などをコピーしてサイト内検索しましょう。

 

カスタマイズ前

.site-footer{

background: #bd4646;

color: #fff;

}

 

背景色を赤(#bd4646)から青(#000080)へ書き換えます。

 

メリット

.site-footer{

background: #000080;

color: #fff;

}

 

フッターグローバルメニューの背景色が青に変わりました。

 

 

区切り線の色

グローバルメニューは項目ごとに区切り線があります。

ここではその色を変えたり、グローバルメニューの背景と同じ色にすることで『見えなくする』ことができます。

 

 

上の図の区切り線を白から青にして境界を無くしてみましょう。

base.css内で”グローバルナビ”項目にある以下のコードを編集します。

 

 

なお上に載せたコードには

 

『border-left: 1px solid #bcbcbc;』

『border-right: 1px solid #bcbcbc;』

 

と似たようなコードがありますが、『グローバルメニューボタンの左側の線か右側の線か』の違いです。

 

 

左右共に色を変えたい場合は両方のコードを編集する必要があります。

 

※以下に該当箇所を記載しておくので、『/*メニューの幅を均等に*/』などをコピーしてサイト内検索しましょう。

 

カスタマイズ前

.global-nav-in ul{

display: table;

width: 100%;

margin: 0;

padding: 0;

border-right: 1px solid #bcbcbc;

table-layout: fixed; /*メニューの幅を均等に*/

}

 区切り線をグレー(#bcbcbc)から青(#000080)へ書き換えます。
カスタマイズ後

.global-nav-in ul{

display: table;

width: 100%;

margin: 0;

padding: 0;

border-right: 1px solid #000080;

table-layout: fixed; /*メニューの幅を均等に*/

}

 

区切り線が見えなくなりました。

 

 

マウスオーバー時の色

次に、マウスをグローバルメニュー上に置いた時に変化する背景色と文字を変える方法です。

 

 

初期設定だと背景色が青から白、文字色が白から黒へ変わっています。ここから、背景色を青から赤、文字色を白から青へ変えてみましょう。

base.css内で”グローバルナビ”項目にある以下のコードを編集します。

 

 

※以下に該当箇所を記載しておくので、『.global-nav-in li a:hover』などをコピーしてサイト内検索しましょう。

 

カスタマイズ前

.global-nav-in li a:hover,

.global-nav-in li a:active,

.global-nav-in li a:focus{

background-color: #eee;

color: #333;

}

 

景色を青から赤(#bd4646)、文字色を白から青(#000080)へ変えてみましょう。

 

カスタマイズ後

.global-nav-in li a:hover,

.global-nav-in li a:active,

.global-nav-in li a:focus{

background-color: #bd4646;

color: #000080;

}

 

すると、この通りに変わります。

 

 

コンテンツ幅

ヘッダー画像やコンテンツ幅からグローバールメニューがはみ出す例です。

この問題、実は色変更で解決できます。

 

 

これもbase.cssの”グローバルナビ”を編集することで修正可能です。

修正箇所は以下の通りです。

 

 

※以下に該当箇所を記載しておくので、『.global-nav{』などをコピーしてサイト内検索しましょう。

 

カスタマイズ前

.global-nav{

padding: 0;

background: #bd4646;

}

 

変更点は赤文字で書いた色コードです。

『グローバルメニューを短くする』のではなく、はみ出した部分の色を背景色と同じにする考えを利用しています。

なので、この部分を白にすれば問題解決です。白のコードは『#ffffff』なので書き換えましょう。

 

カスタマイズ後

.global-nav{

padding: 0;

background: #ffffff;

}

 

するとグローバルメニューがコンテンツ幅となりました。

 

 

まとめ

賢威のグローバルメニューの色をカスタマイズして綺麗に見せる方法をまとめてみました。

色はその人の個性が出るので見ていて楽しいですし、そうなると自分もやってみたくなりますよね。

cssの編集に抵抗がある人も多いですが、今回の説明通りにカスタマイズすれば、そう簡単には失敗しないはずです。

どんどん編集して個性を出していきましょう!