当サイト記事にはアフィリエイト広告が含まれます

【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を編集する場合の注意点

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

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

参考にしたサイト

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