【WordPress】Lightningのメニューバーをカスタマイズする方法

2026年5月10日 2026年5月10日

remy_world

WordPressでメニューバーをデフォルトで作成したものを使っていくと、もう少しかっこよくしたいなぁと思う時がくると思います。初心者は最初どうすれば良いかと悩むと感じましたので、メモに残しておきます。

安全にカスタマイズする方法（Lightning向け）

Lightningの CSS を直接編集すると、テーマ更新時に確実に上書きされて消えます。これは WordPress 全般に共通する仕様ですので、Lightning は公式に 子テーマ利用 や 追加CSS を推奨しています。

親テーマの更新の影響を受けないで、カスタマイズできる2つの方法をご紹介します。またいずれの方法もレスポンシブ対応も維持されていますので、とても便利です。

１）子テーマを作って style.css に書く（推奨）

wp-content/themes/ に子テーマフォルダを作る
style.css と functions.php を用意
style.css にカスタムCSSを書く

Lightning は公式サイトから子テーマ用のサンプルも配布しているので、それを使うと楽です。

２）外観 → カスタマイズ → 追加 CSS に書く（お手軽）

管理画面 → 外観 → カスタマイズ → 追加 CSS
ここにグローバルメニューの装飾を記述

しかし、２）の方法はCSSのコーディングが増えると、見づらくなり管理しづらいです。

従って、ここでは１）の方法で検討しています。

検証結果（子テーマを使う）

事前にメニュー項目となるページを作成する

固定ページを必要分作成してメニューに追加・登録します。

デフォルトのメニュー

この状態から、style.cssに独自のCSSを書いて装飾します。

サイズを大きく操作し易くする

例えば、メニューをもっと分かりやすくするために、もう少し大きくしてバックグランドに色を付けます。そして、ホバーすると色を変えるようにしたいとします。

/**グローバルナビゲーションをカスタマイズ*/
.global-nav{
   margin: 8px;
}

/* ulはブロックレベル要素 */
.global-nav ul{
    display: flex;
    list-style: none;
    padding: 0 8px;
    gap: 4px;
    height: 62px; 
    padding: 0;
    margin: 0;
}

.global-nav ul li{
    border: 1px solid #eee;
    padding: 8px;  /*0*/
    background-color: #434343;
    width: 136px;  /**←適切な幅を決める*/
    /* li要素をコンテナにしてFlexboxを適用 */
    display: flex;
    /* 縦方向（上下）の中央揃え */
    align-items: center;
    /* 左右中央 */
    justify-content: center;
}


.global-nav ul li a{
    color: white;
    display: inline-block;
    /* text-align: center; */
    font-size: 14px;  
    font-weight: bold;
    
}

.global-nav ul li:hover{
    background-color: #b60114;
}

/**グローバルナビゲーションをカスタマイズ*/
.global-nav{
   margin: 8px;
}

/* ulはブロックレベル要素 */
.global-nav ul{
    display: flex;
    list-style: none;
    padding: 0 8px;
    gap: 4px;
    height: 62px; 
    padding: 0;
    margin: 0;
}

.global-nav ul li{
    border: 1px solid #eee;
    padding: 8px;  /*0*/
    background-color: #434343;
    width: 136px;  /**←適切な幅を決める*/
    /* li要素をコンテナにしてFlexboxを適用 */
    display: flex;
    /* 縦方向（上下）の中央揃え */
    align-items: center;
    /* 左右中央 */
    justify-content: center;
}


.global-nav ul li a{
    color: white;
    display: inline-block;
    /* text-align: center; */
    font-size: 14px;  
    font-weight: bold;
    
}

.global-nav ul li:hover{
    background-color: #b60114;
}

大きくしたメニュー

少し格好よくなりました!?

メニューにアイコンを付けて分かり易くする

2つ目は、アイコンを文字の上に付けたいとします。

Font Awesome アイコンを使ったり、画像アイコンを用意したりしても良いですが、ここでは一番簡単な絵文字で行う方法を紹介します。絵文字は機種依存性がありますので、機種（OS,ブラウザ）によって見た目が変わる可能性がありますが、動作しないことはありません。

WordPress のタイトル欄は HTMLで記述することができます。そのタイトルに以下のようなフォーマットで記述するだけです。CSSも先程と同じです。

<span>絵文字</span><br><span>タイトル</span>

<span>絵文字</span><br><span>タイトル</span>

絵文字を追加したメニュー

大分見やすくなりました!!

以上です😁

Follow me!

カテゴリー: Lightning、Wordpress