QooQのHTML編集は、上の方でCSSのカスタマイズが容易に行えます。
本記事では【３ナビゲーション】について解説していきます！
当ブログはQooQ list版ですが、QooQ list版は記事一覧がリストになっているだけのQooQなので同様のカスタマイズが行えます。
ナビゲーションCSS
投稿日時点で当ブログが実際に使用しているCSSは以下のようになっています。
コメントアウトで説明を加えているので参考にしてみてください。
/****************************************
ナビゲーション
*****************************************/
#navigation{
padding: .2em 0 .2em 0;
font-size: 1.4rem; /*文字サイズ*/
background: $(brand.subcolor); /*背景色*/
color: $(brand.subfont); /*文字色*/
}
#navigation a{
color: inherit; /*リンク文字色*/
}
#navigation-button,
#navigation-label{
display: none;
}
#navigation-content ul{
display: flex;
justify-content: right; /*右寄せ*/
flex-wrap: wrap;
}
#navigation-content li{
margin-right: 1.2em; /*文字間*/
list-style: none;
}
#navigation-content li a{
font-weight: bold; /*リンク太字*/
}
@media ( max-width : 768px ) {
#navigation-label{
display: block;
text-align: right; /*ハンバーガーメニュー右寄せ*/
font-size: 2.5rem; /*ハンバーガーメニューサイズ*/
}
#navigation-content{
display:none;
}
#navigation-button:checked ~ #navigation-content{
display: block;
}
}
パソコン表示
当ブログでは右寄せで表示させています。
変更する場合はrightの部分を以下に変更してください。
左寄せ：left ／ 中央寄せ：center
また文字間を少し広げています。
モバイル表示
↓↓↓
モバイル表示時に出るハンバーガーメニューも右寄せにしています。
また初期設定だとかなり小さく分かりにくいため、表示を大きくしています。
ちなみにQooQのメニューは二本線なので、正確にはハンバーガーメニューではありません。
正式なハンバーガーメニューは三本線になります。
便宜上ここではハンバーガーメニューと呼称しています。ご了承ください。
