【Twenty Twenty-One #9】メニューアイコンをレスポンシブ対応！

日本語版だからなのかわかりませんが、このテーマはスマホで表示した場合、「メニュー」の表示がおかしい気がします。

「メニュー」の文字が不自然に縦書きになってますよね。また、その横にあるメニューアイコンが小さすぎて認識しづらい見た目になっています。

今回はこのメニューアイコンを下記のように修正したいと思います！

「メニュー」の文字を消す

まずは単純に「メニュー」の文字を消します。正直3本線のアイコンがあればメニューだということは認識できるので不要な文字を削除します。

/* テキスト「メニュー」を消す */
span.dropdown-icon.open {
    text-indent:150%;
    white-space:nowrap;
    overflow:hidden;
}

上記のやり方で、メニューの文字を消せます。ソースの意味としては、簡単に言うと『「メニュー」の文字の位置を表示範囲の外に無理やり移動させ、はみ出た分は隠す。』といった内容になります。

アイコンを大きくする

・・・といったことをやろうと思ったのですが、メニューの文字を消したら勝手に大きくなりました（笑）メニューの文字分横幅がとられていたせいで、その分アイコンのサイズが小さくなっていたようですね（笑）

最終的にこうなりました！

なお、iPadなどのタブレットの場合はメニューが横にずらーっと並んでもそこまで邪魔ではなかったので、今までの内容はスマホ表示のみに反映することにしています。

まとめ

意外とWordPress初期公式テーマといっても、こういう細かいところがおかしな表示になってたりするものですね。カスタマイズをするときはPC、iPad、スマホ全表示で確認することが大事ですね！

デモサイト↓↓
Twenty Twenty-One　デモサイト

みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。