ブログ

【Cocoon】グローバルナビメニューに区切り線をカスタマイズ

ちょここ
ちょここ

ヘッダーメニューをもう少し、見やすくしたいな〜

カテゴリーとの間にたて線(|)で仕切りをカスタマイズすることができます。

さらに、【線の太さ・線の種類・線の色】を変える応用編もご紹介したいと思います。

スポンサーリンク

区切り線のパターン

まず区切り線には2パターンあります。

① 内側のみ区切り線

② 外側まで区切り線

お好きなデザインでカスタマイズしましょう!!

カスタマイズの際に注意すること
  • カスタマイズする時は『子テーマ』でカスタマイズすること。
  • 事前にバックアップをとること。

それではカスタマイズのやり方をご紹介します。

区切り線をカスタマイズする方法

CSSをコピーする

どちらかデザインしたい方のCSSをコピーしてください。

①内側のみ区切り線をカスタマイズする場合のCSS

#navi .navi-in > ul > li{
  border-right: 1px solid #000000;
}

#navi .navi-in > ul > li:last-child{
  border-right-width: 0;
}

.navi-in > ul > .menu-item-has-children > a::after{ 
  right: 10px; 
} 

②外側も区切り線をカスタマイズする場合のCSS

#navi .navi-in > ul > li{
  border-left: 1px solid #000000;
}

#navi .navi-in > ul > li:last-child{
  border-right: 1px solid #000000;
}

.navi-in > ul > .menu-item-has-children > a::after{ 
  right: 10px; 
}

WordPressを開く

【外観】→【カスタマイズ】の順にクリック

追加CSSをクリック

コピーしたCSSを貼り付け

CSSの貼り付けはこんな感じです。

貼り付けが正常だと、右側にカスタマイズする内容が確認できます。

好みのデザインにカスタマイズできたら【公開】をクリック。

これで完成です。

区切り線の太さをカスタマイズ

数字を変えるだけでOK!!

太さを変えるだけでこんなにデザインが変わります。

太さ【1px】

太さ【3px】

太さ【5px】

太さ【10px】

区切り線の種類をカスタマイズ

主要な線の種類をご紹介します。

①罫線(solid)←この英単語だけをコピーして貼り付けてください。

②二重線(double)

③破線(dashed)

④点線(dotted)

区切り線の色をカスタマイズ

カラーコードをコピーしてオレンジ枠に貼り付けてください。

まとめ

いろいろカスタマイズができると楽しくなってきます。

太さ・種類・色をカスタマイズして自分好みのデザインにするべくどんどんチャレンジしてください。

注意

カスタマイズした部分が間違ってないのに、反映されない場合「半角スペース分ズレているか無くなっている」可能性があります。

もう一度CSSを最初から貼り直すか、画像とどこが違っているか見比べて修正してください。

タイトルとURLをコピーしました