TCDテーマSOLARIS・SERUM・NANO・FAKE：スマホ表示時のハンバーガーメニュー下に文字を入れる方法

Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？

▼変更箇所イメージ

A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります）

今回の記事では、テーマSOLARIS、SERUM、NANO、FAKEでスマホ表示時のハンバーガーメニュー下に文字を追加する方法を紹介します。以下のCSSをカスタムCSSエリアに記載してください。

※各テーマでのCSSの記述自体は同様のものですが、CSSを付与するIDは異なります。

▼SOLARIS参考CSS

#global_menu_button:after{
    display: block;
    content: "MENU";
    font-size: 7px;
    color: #fff;
    margin-top: 7px;
    position: absolute;
    left: 50%;
    top:37px;
    transform: translateX(-50%);
    line-height:1em;
}

▼SERUM参考CSS

#drawer_menu_button:after{
    display: block;
    content: "MENU";
    font-size: 7px;
    color: #fff;
    margin-top: 7px;
    position: absolute;
    left: 50%;
    top:37px;
   transform: translateX(-50%);
   line-height: 1em;
}

▼NANO参考CSS

#js-menu-btn:after{
    display: block;
    content: "MENU";
    font-size: 7px;
    color: #000;
    margin-top: 7px;
    position: absolute;
    left: 50%;
    top:37px;
   transform: translateX(-50%);
   line-height: 1em;
}

▼FAKE参考CSS

#menu_button:after{
    display: block;
    content: "MENU";
    font-size: 7px;
    color: #000;
    margin-top: 7px;
    position: absolute;
    left: 50%;
    top:37px;
   transform: translateX(-50%);
   line-height: 1em;
}

▼修正後変更箇所イメージ

ハンバーガーメニューの実装はテーマによって少し記述が違いますので、全く同じCSSで調整することはできない場合が多いです。他テーマに関しては以下の関連記事も参考にしてください。
※基本的にはいずれのテーマも疑似要素を指定することで対応できるかと思いますので、是非お試しください。

関連記事

2024.06.21

TCDテーマOOPS!・REHUB：スマホ表示時のハンバーガーメニュー下に文字を入れる方法

Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.テーマにもよりますが、カスタムCSSで対応できます。 今回の記事では、テーマ「OOPS!」でスマホ表示時のハンバーガーメニュー下に文字を追加します。 以下のCSSをカス...

2024.07.29

TCDテーマRIKYU：スマホ表示時のハンバーガーメニュー下に文字を入れる方法

Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります） 今回の記事では、テーマRIKYUでスマホ表示時のハンバーガーメニュー下に文字を追加する方法を紹介...

2024.07.29

TCDテーマGENESIS・ISSUE・SEEED：スマホ表示時のハンバーガーメニュー下に文字を入れる方法

Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか？ ▼変更箇所イメージ A.カスタムCSSで対応できます。（テーマのよって若干修正内容が異なります） 今回の記事では、テーマGENESIS、SEEED、ISSUEでスマホ表示時のハンバーガーメニュー...