【Arkhe】メニューにホバーすると下線が引かれるカスタマイズCSS

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

2025-04-02

WordPressテーマ「Arkhe」で、ヘッダーメニューにホバーすると下線が引かれるようにするには、以下のCSSコードを追加してください。

必要に応じて適宜変更してください。

そのままコピペOK！

/* ナビゲーションメニューのメインテキストを強調 */
.c-gnav .__mainText {
    font-weight: bold;
    font-size: 16px;
}

/* ナビゲーションのリストアイテムのデザイン */
.c-gnav li {
    list-style: none;
    padding: 0.5em 1em;
}

/* リストアイテムの区切り線（最後の要素以外に適用） */
.c-gnav li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 0;
    width: 1px;
    height: 60%;
    background-color: #DEDDDD;
}

/* ナビゲーションリンクの下線（ホバー時にアニメーション） */
.c-gnav__a::after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #b89c3e;
    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: #000;
}