Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか?
▼変更箇所イメージ
![変更箇所イメージ](https://tcd-manual.net/wp-content/uploads/2024/06/oops_menu_desc_1.jpg)
A.テーマにもよりますが、カスタムCSSで対応できます。
今回の記事では、テーマ「OOPS!」でスマホ表示時のハンバーガーメニュー下に文字を追加します。
以下のCSSをカスタムCSSエリアに記載してください。
ハンバーガーメニュー下に文字を追加
▼テーマ「OOPS!」参考CSS
#js-menu-button:after{ display: block; content: "MENU"; width: 60px; font-size: 8px; color: #fff; margin-top: -45px; }
ハンバーガーメニューの実装はテーマによって少し記述が違いますので、全く同じCSSで調整することはできない場合が多いです。例えば別テーマ「REHUB」の場合は、以下のようなCSSでのカスタマイズが必要です。
▼テーマ「REHUB」参考CSS
#js-menu-button:after{ display: block; content: "MENU"; font-size: 8px; color: #000; margin-top: 8px; } @media (max-width: 767px) { button.p-menu-button { height: 68px; } } }
▼修正後変更箇所イメージ
![変更箇所イメージ](https://tcd-manual.net/wp-content/uploads/2024/06/oops_menu_desc_2.jpg)
基本的にはいずれのテーマも疑似要素を指定することで対応できるかと思いますので、是非お試しください。
関連記事
![](https://tcd-manual.net/wp-content/uploads/2022/06/labo.png)
Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか? ▼変更箇所イメージ A.カスタムCSSで対応できます。(テーマのよって若干修正内容が異なります) 今回の記事では、テーマSOLARIS、SERUM、NANO、FAKEでスマホ表示時のハンバーガー...
![](https://tcd-manual.net/wp-content/uploads/2022/06/labo.png)
TCDテーマRIKYU:スマホ表示時のハンバーガーメニュー下に文字を入れる方法
Q.ハンバーガーメニューの下に「MENU」のような文字を追加することはできますか? ▼変更箇所イメージ A.カスタムCSSで対応できます。(テーマのよって若干修正内容が異なります) 今回の記事では、テーマRIKYUでスマホ表示時のハンバーガーメニュー下に文字を追加する方法を紹介...
この記事は役に立ちましたか?
もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!