Katawara のハンバーガーボタンに Font Awesome のアイコンを使ったカスタマイズを行いました。
この投稿でカスタマイズを行ってありますので、このページをスマホで表示して実際の動きをご覧いただけます。
- 飲食店のサイトをイメージしてフォークとナイフのアイコンを設定してあります。
アイコンは2,000個以上の中から選ぶことができます。 - Katawara のハンバーガーボタンに表示される文字は「MENU」ですが、「メニュー」と日本語表記して、モバイルナビが開いたときに「閉じる」と表示するカスタマイズを行ってあります。「MENU」⇔「CLOSE」と表示することも可能です。
- Katawara のモバイルナビはスライドインする仕様ですが、フェードインで現れるようにカスタマイズしてあります。
- モバイルナビをカラフルなタイルを並べたスタイルにカスタマイズしてあります。
他にもさまざまなカスタマイズが可能です。詳しくは以下のページをご覧ください。
【2026.4.20 追記】閉じるボタンのスタイルをカスタマイズしました
モバイルナビがタイルを並べたようなデザインなので、閉じるボタンにまで背景色がついているとくどいかなと思って、閉じるボタンの背景を透過にしました。
補足
Katawara 標準のハンバーガーボタンは背景画像を使ってアイコンを表示しているため、CSS でかんたんにアイコンを任意の色に変更することはできませんが（手間はかかりますが、背景画像を用意すれば可能です）、Font Awesome のアイコンを使ってカスタマイズすればアイコンの色をかんたんに指定できます。
サイト運営者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
