【SANGOカスタマイズ】ヘッダーメニューホバー時の下線の太さ&長さを調節する方法

なんか色々大きい。

WordPressテーマ「SANGO」を購入してから使用感を確かめてみると、ほとんどデメリットというか不便なところはないと言ってもいいほど便利なテーマで感動しましたが、「なんだか色々とパーツが大きい」ということが時折引っかかっていました。

それは文字サイズであったりアイコンであったりと色々あるのですが、今回はその中でも「ヘッダーメニュー」にフォーカス。もちろん人によって好みがあるものだと思いますが、個人的な肌感として「ホバー時の下線が太い&長い」とだいぶ序盤あたりから感じていました。

 

ということで今日は、なんだかデザイン的に気持ちがスッキリしないというミニマリスト的な人に向けて、グローバルメニューがホバーされた際にアクションする、下線の太さや長さを調節するカスタマイズ方法について解説していきます。ぜひ同様の設定を施したいという場合には、解説をもとに一緒に設定を進めていきましょう。

カスタマイズ前後をGIFアニメで比較

まず、カスタマイズに移っていく前に、「実際に今回のカスタマイズをしたらどうなるのか?」ということについて見ていきましょう。わかりやすいようにGIFアニメーションを作成したので、カスタマイズ前後でどのような変化が起きるのか確認してみてください(スマホで動作しない場合はPCでご確認ください)。

  • カスタマイズ前(ちょっと気持ち下線が太い&長い&動きが遅い。)

  • カスタマイズ後(下線を細く&短く&動きを速くした。)

 

いかがでしょうか?個人的な好みはあるにせよ、僕はカスタマイズ後の方が視覚的にもライトで見やすいかなぁなんて思っています。実際、このカスタマイズは塩谷舞さんのWebメディア「milie(ミリュー)」を参考に実装してみたのですが、なんだか安心感というか心のゆとりを持つことができる、ような気がします。

ぜひカスタマイズ前後を比較してみて「こんな感じにしてみたい」と感じたのであれば、ぜひここからの解説をもとにカスタマイズを進めていきましょう。

SANGOのヘッダーメニューホバー時の下線の太さ&長さを調節する方法

ということで、ここからは実際にヘッダーメニューのホバー時に関する設定を施していきます。特段これと言って難しいことをするわけではなく、CSSで動きを指定するだけのカンタンな作業で終わるのでご安心くださいね。

「外観→テーマの編集」に移動する。

CSSにカスタマイズを施していくには、まずWordPressのダッシュボード画面から「外観→テーマの編集」に移動しましょう。

「style.css(子テーマ)」でホバー時の下線の動きを指定する。

そして、子テーマの「style.css」を選択し、以下のコードを一番下のあたりに追記します。(テーマの編集を行うときは必ず子テーマで行うようにしましょう。)

 

こちらのコードでは、擬似要素「:after」を使って、ヘッダーナビで指定されているクラスに対し様々な動きを加えるよう設定しています。先ほどのGIFアニメと同様な動きをするように設定しているので、あれくらいの細さや長さのデザインを実現したい場合には上記のコードをそのまま使っていただければOKです。

ただ、ヘッダーメニューの文字列や日本語・英語の相性、その他にもあなたのサイトのヘッダー部分のデザインに合ったメニューの動きを実装するべきだと思うので、細かい微調整が必要な場合はここからの解説をもとに調節していきましょう。

太さや長さなどの細かい微調整も忘れずに。

先ほど記載したコードのそれぞれの値について、イメージで解説すると次のようになります。

 

ちょっとこれだけだとわかりづらいどころもあるかもしれないので、文章でも解説を加えておきます。

  • bottom: 15px;:メニュー文字と下線の間の幅(数字が大きければ幅も広がる)
  • left: 12%;:下線を右側へ移動させる(widthと合わせて調節すると○)
  • width: 75%;:下線の長さ(文字と同じくらいの幅だとスタイリッシュ)
  • height: 1px;:下線の太さ(基本的に1〜3pxでお好みの設定を)
  • transition: transform .2s ease-in-out;:下線の動きの速度(.2sの数字が大きければ遅くなる)

基本的にこのようなイメージになるので、ぜひサイトの雰囲気や世界観などと合わせていきながら、数値を微調整してみてくださいね。

最後に

以上、ヘッダーメニューホバー時の下線の太さ&長さを調節する方法ということで、SANGOのちょっとしたカスタマイズ方法について解説しました。いかがだったでしょうか?

ヘッダーメニューはサイトの顔とも言えるべき大切な部分で、ユーザーがあなたのサイトを訪れた際にもまず目にするのがこのヘッダー部分になります。そういったところにこそ細かい配慮やこだわりを持っていくことで、サイト全体に対して愛着のあるメディア運営をしていくこともできると思うので、ぜひ解説を参考に微調整をしてみてください。

その他SANGOに限らずWordPressサイトのカスタマイズについて、ご質問や疑問点などがあれば、ぜひ気軽にお問い合わせくださいね。

 

ABOUT ME

RIKU(坂本陸)WEBマーケター及びコンサルタント

オフィシャルメディア「LIVE YOUR LIFE」運営/オンラインスクール「THE LIFE SCHOOL」主催/早稲田大学在学中にPC1台で起業し、その後大学中退の道を選び独立。現在は個人ならびに法人向けのコンサルティング活動・メディア制作や、就職活動・進路選択に悩む大学生のキャリア相談など幅広く活動中。23歳、RADWIMPSと甘いものに目がない。

⇒詳しいプロフィールはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA