【Cocoon】CSS一行で解決！ヘッダーのセンターロゴを残したままグローバルナビを右寄せ・左寄せにする方法

現在、ブログをカスタマイズ中のminimuです。

ヘッダーに「センターロゴ」で表示したグローバルメニューを右寄せ・左寄せにする方法を調べたらCSSでとても簡単に実装できたので、同じようにカスタマイズしたい人のためにCSSコードを載せます。

使用テーマ：Cocoon（スキンなし）

追加したCSS

今回追加したCSSはこちら。左寄せ・右寄せ用にどちらも載せていますので、お好みの方を使ってください。

/* グローバルメニューを左寄せにする */
.navi-in > ul {
	justify-content: flex-start;
}

/* グローバルメニューを右寄せにする */
.navi-in > ul {
	justify-content: flex-end;
}

補足：「flex-start」が左寄せ、「flex-end」が右寄せです。

CSSを追加・編集する場合、かならずバックアップを取るようにしてください。また、編集は自己責任でお願いいたします。

バックアップの方法がわからないという方のために、筆者もよく参照させてもらっているブログ「turicco」の参考記事を載せておきます！

変更先のタグについて参考にした記事はこちらです。