WordPress テーマ「COCOON」を使ったサイトのグローバルナビのカスタマイズ方法について備忘録です。
その１
[Cocoon設定]＞[ヘッダー]＞[グローバルナビメニュー]
「色」「幅」を変更できます。
その２
CSSをいじる。
[外観]＞[テーマファイルディター]
「Cocoon Child」を変更します。
16行目に「/*必要ならばここにコードを書く*/」を書いてくれているので、この下にCSSを挿入します。
+‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥+
13 /************************************
14 ** 子テーマ用のスタイルを書く
15 ************************************/
16 /*必要ならばここにコードを書く*/
17
18 ←この辺から挿入します
+‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥+
貼り付けたら「ファイルを更新」を押して、都度サイトをチェックします。
- - - - - - - - - - ココカラ- - - - - - - - - -
グローバルナビメニューの高さを変更#navi .navi-in > ul li{
height: 80px;
line-height: 80px;
}
- - - - - - - - - - ココマデ- - - - - - - - - -
グローバルナビメニュー 文字の大きさを変更- - - - - - - - - - ココカラ- - - - - - - - - -
#navi .navi-in > .menu-header .item-label{
font-size: 13px;
}
- - - - - - - - - - ココマデ- - - - - - - - - -
文字を太くするCSSコード- - - - - - - - - - ココカラ- - - - - - - - - -
#navi .navi-in{
font-weight:bold;
}
- - - - - - - - - - ココマデ- - - - - - - - - -
マウスオーバー時の文字色と背景色を変更マウスオーバーしてから色が変わり終わるまでの時間も調整します。
- - - - - - - - - - ココカラ- - - - - - - - - -
#navi .navi-in a:hover{
color: #ff0000!important;
background: #000000;
transition: all 0.5s ease;
}
- - - - - - - - - - ココマデ- - - - - - - - - -
メニューにグラデーションをつけるデフォルトは「白から黒」です。
白#ffffffは残して、黒「#000000」の部分を色パレットから好きな色に変えます。
- - - - - - - - - - ココカラ- - - - - - - - - -
#navi.navi.cf{
background: linear-gradient(#ffffff,#000000);
}
#header-container{
background: linear-gradient(#ffffff,#000000);
}
- - - - - - - - - - ココマデ- - - - - - - - - -
サブメニューの色を変えるCSSデフォルトはグレー#808080です。
好きな色に変えます。
サブメニューもグラデーション化させるCSS黒「#000000」の部分を色パレット（参考：
https://www.colordic.org/w）から好きな色に変えます。
- - - - - - - - - - ココカラ- - - - - - - - - -
#navi .navi-in > .menu-header .sub-menu{
background: #ffffff;
}
#navi .navi-in > .menu-header .sub-menu a{
background: linear-gradient(#ffffff,#000000);
}
#navi .navi-in > ul .sub-menu a:hover{
opacity: 0.8 ;
}
- - - - - - - - - - ココマデ- - - - - - - - - -
メニューに仕切り線をつける
- - - - - - - - - - ココカラ- - - - - - - - - -
/*メニューをグラデーション化*/
#navi.navi.cf{
background: linear-gradient(#ffffff,#000000);
}
#header-container{
background: linear-gradient(#ffffff,#000000);
}
/*サブメニューの背景をグレーに*/
#navi .navi-in > .menu-header .sub-menu{
background: #808080;
}
/*1番左と2番目の仕切り線*/
#navi .navi-in > ul li{
border-right: 1px solid #ffffff;
border-left: 1px solid #ffffff;
}
/*左から3番目以降の仕切り線*/
#navi .navi-in > ul li + li{
border-right: 1px solid #ffffff;
border-left: none;
}
/*サブメニューの仕切り線は無し*/
#navi .navi-in > ul ul li{
border-right: none;
border-left: none;
}
- - - - - - - - - - ココマデ- - - - - - - - - -
以上、備忘録でした。
・
