QooQカスタマイズ：ページ上部のナビに区切り線を入れる方法！

本日もお気に入りbloggerテンプレートのqooqのメニューをカスタマイズしちゃいますよっ！ふっふっふ～！

実はHTMLのカスタマイズはあんまり自信がなくって、おそるおそるだったんですがなんとか形になったので笑

今回はqooqのページ上部にあるメニューに区切り線を入れる方法になります。

1. ナビに区切り線を入れるカスタマイズ
2. ナビの区切り線の種類を変える！

完成予想図

↓↓↓↓↓これが…↓↓↓↓↓


こうなる！
（見本は点線になってますが、好きな区切り線の種類に変えられます♪）

それから、デフォルトのqooqはナビがヘッダーの上にあるんですが、わたしはカスタマイズしてナビをヘッダーの下にもってきてます。

ナビをヘッダーの下にもっていく方法はこちら！

ナビの間に区切り線を入れる！

さっそくやっていきますよー。カスタマイズ！

今回はHTMLの編集はしなくてもよかったのでバックアップは取らなくてもいいと思います。
（気になる人はバックアップ取っておいたほうがいいかもです。わたしはとりませんでした笑）

カスタマイズ（色とか変えるところです）の下の方に「cssを追加」っていうcssをかけるところがあるのでそこに下のソースコードをコピペ！

今回のカスタマイズおわり笑！

↓↓↓↓↓これをコピペ！↓↓↓↓↓
#navigation-content li {
  border-right :4px dotted $(brand.subfont);
  padding-right :1em;
}
#navigation-content li:last-child {
  border-right :none;
  padding-right :0;
}
↑↑↑↑↑ここまでコピペ↑↑↑↑↑

区切り線の種類の変更

border-rightって書いてあるところの「dotted」（ドット）を、

• 「solid」：直線
• 「dashed」：点線
• 「doubled」：二重線