
※当サイトにはプロモーションが含まれています。
(賢威7.1のテンプレートの種類によっては違うと思いますが、)賢威8.0ではグローバルメニューの位置は基本的に左寄せになっています。

グローバルメニューは左寄せじゃなく、中央寄せにしたいにゃ
ということで、グローバルメニューを中央(センター)にするCSSです。
なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。
テーマ:賢威8
WordPressバージョン:5.8.x
PHPバージョン:7.4.x
サーバー:さくらインターネット
※現在、WP:6.2.x、PHP:8.2.xでも動作しています
グローバルメニューを中央にするCSS
賢威のグローバルメニューを中央にするCSSです。
/* グローバルメニューを中央 */
@media (min-width: 768px) {
.keni-gnav_inner > ul {
display: block;
width: 100%;
text-align: center;
}
.keni-gnav_inner li {
display: inline-block;
}
}
このCSSを適用すると、次のように表示されます。
グローバルメニューを中央寄せにしたい場合は、上記のコードを追加CSSに記載して下さい。
補足:ワードプレスの「追加CSS」の編集箇所について
現在のワードプレステーマにCSSを追加したい場合、左メニューにある、
外観 > カスタマイズ
を選択します。


追加したいCSSを記述します(コピペして貼り付けます)。
「公開」ボタンを押して保存すれば完了です。
なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング(文字コード)の関係で、不具合が発生することがあります。
その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン(CSS)が表示されたり、デザインが崩れて表示される事があります。
その際は、強制リロード(ハードリフレッシュ)をしてみてください。
各ブラウザごとの、強制リロードの方法は次の通りです。
Windows | Mac | |
---|---|---|
Google Chrome | 【Ctrl+F5】 【Ctrl+Shif+R】 |
【Command+Shift+R】 |
Microsoft Edge | 【Ctrl+F5】 【Ctrl+Shif+R】 |
【Command+Shift+R】 |
Mozilla Firefox | 【Ctrl+F5】 【Ctrl+Shif+R】 |
【Command+Shift+R】 |
Safari(Mac) | ‐ | 【Command+Option+R】 |
強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。