グローバルメニューのデザインをカスタマイズしました。
自分の思うようなデザインにするために、参考にしたCSSのコードを一つ一つ調べたので備忘録にまとめました。
グローバルメニューをカスタマイズ
デザインを選ぶ
スマホで見た時にメニューが縦にアコーディオンみたいに出るデザイン
スマホで見た時にメニューが横から出てくるデザイン
前者のデザインではメニューを押そうすると記事を読んだら上まで戻らないといけませんが、後者のデザインだと記事を読んで下までいってからでも押せます。
ブログの回遊率を考えると後者を選びたい。
しかし、アドセンスで広告を貼ることを考えると前者のデザインがよさそうです。
隙あらばアドセンスを狙いたいと思うので今回は前者のデザインを選びました。
CSSをコピペする
参考サイトのCSSをコピー、
「 デザイン」→「 （カスタマイズ）」→「 デザインCSS」
に張り付ける。
HTMLとjQueryをコピペする
jQuery（ジェイクエリー）とは
JavaScriptでできることをコンパクトかつ便利にまとめたライブラリ言語である。例えば、クリックしたら画像が入れ替わる、マウスオーバーした要素がアニメーションのように動く、時間によってページの色を変化するなど、JavaScriptで書くと時間がかかる作業をjQueryを使えば簡単に記述できる。
digital hollywoodのサイトから引用
参考サイトのHTML＆jQueryをコピー、
「 デザイン」→「 （カスタマイズ）」→「ヘッダ」→「ブログタイトル下」
に張り付ける。
HTMLの中にリンクと文字を入れる。
色を変える
コピペしたCSSのコードの色を書き換える。
備忘録：グローバルメニューのCSS
もともとのCSSはメニューを左から並べ、メニューの文字の長さに横幅を合わせるデザインでした。
私はメニューは真ん中を基準に並べ、メニューの横幅は均等なデザインにカスタマイズしました。
一階層目（親リンク部分）
グローバルメニューの土台部分：#menu
グローバルメニューの一番後ろの部分（ピンクにした部分）
#menu{
width: 100%;
margin: 10px auto;/*上下の余白*/
background: #364f6b;/*メニューの一番後ろの色*/
}グローバルメニューの親リンクをのせる部分：#menu-inner
親リンクをのせるところ（ピンクにした部分）
下の画像では親リンクが3つのっています。
#menu-inner{
width: 1000px;/*親リンクをのせる部分の横幅*/
height: 40px;/*メニューの全体の縦幅（1/3）*/
margin: 0 auto;
background: #364f6b;/*親リンクをのせる部分の色*/
}
#menu-btn{display: none;/*MENUボタンを表示しない*/
}親リンクのデザインをする部分（1か所目）：#menu-content
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
display: flex;/*←親リンクを中央揃えにするために追加、親リンクを横に並べる*/
justify-content: center;/*←親リンクを中央揃えにするために追加、親リンクを中央に揃える*/
}親リンクを中央に揃えるために上記のセレクタに二つのコードを追加、下記のセレクタから一つのコードを削除しました（青くした部分）。
CSSのコードとして正しいかどうかわかりませんが、私の思うような配置になりました。
（親リンクの幅がわかりやすいように真ん中はマウスオーバーしています）
親リンクのデザインをする部分（2か所目）：#menu-content > li
親リンクの縦・横幅や文字位置を調整する部分
もともとはここで親リンクを左から並べるように指定していたが（float: left;）、それは削除した。
#menu-content > li{
position: relative;
/*float: left;←親リンクを中央揃えにするために削除*/
height: 100%;
text-align: center;/*親リンクの文字を枠内で中央揃え*/
width: 18%;/*←親リンクの横幅を均等にするために追加、親リンクひとつ分の横幅*/
}もともとのデザインでは親リンクの幅は文字の長さにあわせて伸縮するようになっていたが、文字の長さによらず同じ幅になるように変更したかったので、コードを2か所追加、2か所削除した（緑にした部分）。
親リンクをデザインする部分（3か所目）：menu-content > li > a
親リンクの色を指定、親リンクの横幅を均等にするためにコードを調整する部分
#menu-content > li > a{ position: relative; display: block; height: 100%; /*padding-left: 15px;←親リンクの横幅を均等にするために削除*/ /*padding-right: 15px;←親リンクの横幅を均等にするために削除*/ width: 100%;/*←親リンクの横幅を均等にするために追加*/ line-height: 40px;/*親リンクの全体の縦幅（2/3）*/ background: #364f6b;/*親リンクの背景色*/ color: #fff;/*親リンクの文字色*/ font-size: 90%;/*親リンクの文字サイズ*/ text-decoration: none; z-index: 2; }
もともとの文字サイズは70%でしたが、小さく感じたので大きくしました（70％から90%に）。
親リンクをマウスオーバーしたときの変化：#menu-content
マウスオーバーしたときの文字色や背景色
#menu-content > li > a:hover{
background: #537294;/*親リンクホバーの背景色*/
color: #fff;/*親リンクホバーの文字色*/
}#menu-content > li > a > .blogicon-chevron-down
メニューの前にアイコンを追加したので、後ろにはいらないかなと思ってヘッダー下のhtmlから下向き矢印のアイコンは削除しました。
気がかわるかもしれないのでCSSは残しました。
#menu-content > li > a > .blogicon-chevron-down{
margin-right: 5px;
}二階層目（子リンク部分）
いまのところ子リンクは使わないので触っていません。
使うときに変更する予定の部分
- 色を差し替え
- 文字の大きさを少し大きくする
- 場合によっては横幅を調整
/*２階層目*/
#menu-content > li > ul.second-content{
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
#menu-content > li:hover > ul.second-content{
visibility: visible;
top: 40px;/*メニューの全体の縦幅（3/3）*/
z-index: 1;
transition: all .3s;
}
#menu-content > li > ul.second-content > li{
text-align: center;/*子リンクの文字の位置*/
width: 200px;/*子リンクの横幅*/
height: 40px;/*子リンクの縦幅（1/2）*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*子リンクの縦幅（2/2）*/
background: #444;/*子リンクの背景色*/
color: #fff;/*子リンクの文字色*/
font-size: 70%;/*子リンクの文字サイズ*/
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #555;/*子リンクホバーの背景色*/
color: #fff;/*子リンクホバーの色*/
}トグルメニュー
トグルメニューは、飛び出したときに2列になるようにしました。
1層目のCSSカスタマイズで「float: left;」を削除してしまったので、ここで追加しています（紫にした部分）。
「MENU」の文字を70%から80%に少し大きくしました。
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*グローバルメニューからトグルメニュー切り替わる幅*/
#menu-inner{
width: 100%;
height: auto;
}
#btn-content{text-align: right;}/*「MENU」ボタンの位置*/
#menu-btn{
display: inline-block;
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background: #537294;/*「MENU」ボタンの色*/
color: #fff;/*「MENU」の文字色*/
font-size: 80%;/*「MENU」の文字サイズ*/
}
#menu-content{
display: none;
width: 100%;
}
#menu-content > li{
width: 50%;/*トグルリンクを2列にする*/
height: 40px;/*トグルリンクの縦幅（1/2）*/
float: left;/*←トグルリンクを2列にするために追加*/
}
#menu-content > li > a{
width: 100%;
line-height: 40px;/*トグルリンクの縦幅（2/2）*/
padding: 0;
text-decoration: none;
}
ヘッダー下のHTMLは文字の前にはてなのアイコンフォントを入れただけです。
私がカスタマイズしたグローバルメニューのCSS
/*****グローバルメニュー****/
#menu{
width: 100%;
margin: 10px auto;
background: #364f6b;/*メニューの一番後ろの色*/
}
#menu-inner{
width: 1000px;/*メニュー全体の横幅*/
height: 40px;/*メニューの全体の縦幅（1/3）*/
margin: 0 auto;
background: #364f6b;/*親リンクがのる部分の色（後ろから2番目の色）*/
}
#menu-btn{display: none;}
#menu-content{
padding-left: 0;
margin: 0;
width: 100%;
height: 100%;
list-style-type: none;
display: flex;/*←親リンクを中央揃えにするために追加、親リンクを横に並べる*/
justify-content: center;/*←親リンクを中央揃えにするために追加、親リンクを中央に揃える*/
}
#menu-content > li{
position: relative;
/*float: left;←親リンクを中央揃えにするために削除*/
height: 100%;
text-align: center;/*親リンクの文字を枠内で中央揃え*/
width: 18%;/*←親リンクの横幅を均等にするために追加、親リンクひとつ分の幅*/
}
#menu-content > li > a{
position: relative;
display: block;
height: 100%;
/*padding-left: 15px;←親リンクの横幅を均等にするために削除*/
/*padding-right: 15px;←親リンクの横幅を均等にするために削除*/
width: 100%;/*←親リンクの横幅を均等にするために追加*/
line-height: 40px;/*親リンクの全体の縦幅（2/3）*/
background: #364f6b;/*親リンクの背景色*/
color: #fff;/*親リンクの文字色*/
font-size: 90%;/*親リンクの文字サイズ*/
text-decoration: none;
z-index: 2;
}
#menu-content > li > a:hover{
background: #537294;/*親リンクホバーの背景色*/
color: #fff;/*親リンクホバーの文字色*/
}
#menu-content > li > a > .blogicon-chevron-down{margin-right: 5px;}
/*２階層目*/
#menu-content > li > ul.second-content{
visibility: hidden;
position: absolute;
top: 0;
margin: 0;
padding-left: 0;
list-style-type: none;
z-index: -1;
}
#menu-content > li:hover > ul.second-content{
visibility: visible;
top: 40px;/*メニューの全体の縦幅（3/3）*/
z-index: 1;
transition: all .3s;
}
#menu-content > li > ul.second-content > li{
text-align: center;
width: 200px;/*子リンクの横幅*/
height: 40px;/*子リンクの縦幅（1/2）*/
}
#menu-content > li > ul.second-content > li > a{
display: block;
line-height: 40px;/*子リンクの縦幅（2/2）*/
background: #364f6b;/*子リンクの背景色*/
color: #fff;/*子リンクの文字色*/
font-size: 80%;/*子リンクの文字サイズ*/
text-decoration: none;
}
#menu-content > li > ul.second-content > li > a:hover{
background: #537294;/*子リンクホバーの背景色*/
color: #fff;/*子リンクホバーの文字色*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*グローバルメニューからトグルメニュー切り替わる幅*/
#menu-inner{
width: 100%;
height: auto;
}
#btn-content{text-align: right;}/*「MENU」ボタンの位置*/
#menu-btn{
display: inline-block;
padding: 8px 15px;
margin: 5px;
cursor: pointer;
background: #537294;/*「MENU」ボタンの色*/
color: #fff;/*「MENU」の文字色*/
font-size: 80%;/*「MENU」の文字サイズ*/
}
#menu-content{
display: none;
width: 100%;
}
#menu-content > li{
width: 50%;/*トグルリンクを2列にする*/
height: 40px;/*トグルリンクの縦幅（1/2）*/
float: left;/*←トグルリンクを2列にするために追加*/
}
#menu-content > li > a{
width: 100%;
line-height: 40px;/*トグルリンクの縦幅（2/2）*/
padding: 0;
text-decoration: none;
}
/*２階層目*/
#menu-content > li:hover > ul.second-content{display: none;}
#menu-content > li > a > .blogicon-chevron-down{display: none;}参考にしたサイトと色の配分（濃い部分と薄くなる部分）は同じにしました。
変更する部分がわかりやすいように色分けしました。
終わりに
はじめにコードを目にしたときは、何がなんやらでしたが、調べていくうちに少しづつわかるようになるのが面白い。
暗号を解いているような気分になります。
今回もなかなか骨折りでしたが、できばえには満足しているので頑張ったかいがありました！
