自分のサイトを作っていて、必ず見てもらたかったりアピールしたいページは目立つようにしておきたいですよね。
そんな時に役立つのがグローバルメニューで、よく見掛けるものに『サイトマップ』や『自己紹介ページ』、『問い合わせページ』などがあります。
グローバルメニューは色を変えることでオリジナリティーを出すこともできます。
もちろんオシャレ度も上がるし、方法も難しくないので挑戦してみましょう！
今回はグローバルメニューの色のカスタマイズを説明していきます。
※テンプレートは『賢威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; /*メニューの幅を均等に*/
}
.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の編集に抵抗がある人も多いですが、今回の説明通りにカスタマイズすれば、そう簡単には失敗しないはずです。
どんどん編集して個性を出していきましょう！
ブログテクニックまとめ
僕がブログを実践して得てきた知識をnoteにまとめました。
基本的な考え方からちょっとしたテクニックまで、初心者さんに向けの内容になっています。
もしよろしければ参考にしてください。
⇒ アフィリエイト広告の種類は？広告選びで参考にすべき4つの考え方
コメント