unitoneテーマでの小技 | 東京都墨田区のHP・デザイン・イラスト制作会社 TenCy株式会社
  • 2025.3.31

    unitoneテーマでの小技

    こんにちは。3月も終わりです。
    桜も咲き始めました。春といえばにおい。においが増えてきます。
    色んなにおいがすると景色に色が付くような感じがしていいんですよね~ってすごい分かった風なことを誰かに言ったら全然ピンと来てもらえなくて悲しくて空を見上げたら鼻水が逆流してむせかえった記憶があります。

    さて、今回はunitoneというテーマを使用した際のハンバーガーメニューにおける小技です。地味に役に立ったのでご紹介です。

    unitoneとは

    unitone は、WordPress テーマの一つで、特にデザインの自由度が高く、柔軟なレイアウト構築が可能な点が特徴です。
    フルサイト編集にも対応しています。弊社はこのテーマを使用することが多々あります。

    ハンバーガーメニューの中の要素を検証ツールで見れない…

    WEB制作をしているとグGoogleの検証ツール(参考:https://skillhub.jp/blogs/269)をよく使用すると思うのですが、コーディングをしててちょっと困ったなと思ったのが、ハンバーガーメニュー内の要素を選択ツールでフォーカスできなかったことです。
    これはどういうスタイルが当たっているのかな~と思って要素に重ねるとハンバーガーメニューが閉じてしまうのです。
    他のテーマではこの現象は起きなかったので、特有のものなのか分かりませんが、こういった現象が起こりました。

    解決方法

    解決方法はズバリ「Googleの拡張機能」を使う、です。ですが、そのものの機能を利用するというわけではありません。
    拡張機能を画面上に一度開いて閉じるだけです。なぜこれでできるようになるかは分かりませんが、直ります。理論的なことがあるのだと思いますが、突き詰められてないのでWEB制作におけるライフハックとして見てください…

    私は「HeadingsMap」(https://chromewebstore.google.com/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=ja)という拡張機能を使用してやってみました。

    1. 検証ツールを開く
    2. ハンバーガーメニューを開く
    3. HeadingsMapを開く
    4. HeadingsMapを画面上の×ボタンで閉じる。
    5. 検証ツールの選択ツールで確認

    この手順です。

    別の拡張機能

    別の拡張機能でもできるものもあると思います。
    WEB制作者であればよく使用するであろう「WhatFont」でもできました。
    自身が使用しているもののなかで試してみてください。

    まとめ

    今回はunitoneでハンバーガーメニューの要素を検証ツールので選択できるようにする小技?ライフハック?についてご紹介しました。
    地味に見れないと大変だなとなることもあると思うのでもし使用する場面があれば活用してみてください。

    OTHER NEWS

    一覧にもどる