【Arkhe】ヘッダーメニューにホバーすると白い下線が引かれるCSSカスタマイズ（アルケー）

当サイトは広告を含んでいます。

2025-05-23

ホバーで白い下線が引かれるようにしたい、、、

WordPressテーマ「Arkhe（アルケー）」では、デフォルト設定でヘッダーメニューにホバーするとテーマのメインカラーにフォントカラーが変更されるようになっています。

今回は、ヘッダーメニューにホバーすると白い下線が引かれるCSSカスタマイズ方法をご紹介します！

【Arkhe】ヘッダーメニューカスタマイズCSS

このままコピペOK！

/* ナビゲーションリストアイテムの基本スタイル */
.c-gnav li {
    list-style: none; /* リストマーカーを非表示 */
    padding: 0.5em 1em; /* 内側の余白 */
}

/* ナビゲーションリンクの下線（ホバーアニメーション用） */
.c-gnav__a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 0.3px;
    background: #fff; /* 白い下線 */
    bottom: -1px;
    transform: scale(0, 1); /* 初期状態で非表示 */
    transform-origin: left top;
    transition: transform 0.3s; /* アニメーション */
}

/* ホバー時に下線を表示 */
.c-gnav__a:hover::after {
    transform: scale(1, 1);
}

/* 現在のページに下線を常時表示 */
.c-gnav__a.current::after,
.c-gnav__li.current-menu-item > .c-gnav__a::after {
    transform: scale(1, 1);
}

/* トップページでは現在地表示の下線を非表示にする */
.home .c-gnav__a.current::after,
.home .c-gnav__li.current-menu-item > .c-gnav__a::after {
    transform: scale(0, 1) !important;
}

/* ホバー・フォーカス時の文字色変更 */
.c-gnav__li.-current, 
.c-gnav__li.focus, 
.c-gnav__li:hover {
    color: #fff;
}

/* サブメニューでは下線アニメーションを無効化 */
.sub-menu .c-gnav__a::after {
    content: none !important;
    display: none !important;
    background: none !important;
    transform: none !important;
    transition: none !important;
}