Blogger・QooQのページナビを中央または右側に変更する

Blogger のフリーテンプレート「 QooQ 」のトップに設置してあるページナビ。左寄せがデフォルトですが、これを CSS で中央寄せあるいは右寄せにすることができます。
さらに、下の画像のように最初の 1つを左に置き、残りは右寄せというカスタマイズ方法も合わせて紹介します。ブログタイトルを中央にしている場合に、全体のバランスがよくなると思います。

QooQ-navigation

このページで紹介している方法はパソコン表示用です。QooQ ではモバイル用に別の指定がされています。

ページナビを中央寄せにする

中央寄せにする場合は親要素に「 text-align 」を使用することが多いですが,「 flex 」が使用されているので「 justify-content 」のプロパティで記述します。
また、子要素の余白指定が原因でわずかな左よりになるので、それを修正するための記述もします。
#navigation-content ul {
    justify-content: center;
}
#navigation-content li {
    margin: 0 0.5em;
}

右寄せにする場合

右に寄せる場合も「 flex 」に対応した記述をします。
#navigation-content ul {
    justify-content: flex-end;
}

最初の 1つだけ左、残りは右に


QooQ

子要素の 2番目に margin-left を指定します。
#navigation-content li:nth-child(2) {
    margin-left: auto;
}
ページナビの先頭はトップページへのリンクとなる「ホーム」がデフォルトですが、並び順は変更ができるので何を先頭に持ってくるかが悩みどころです。

ラムネグ