WordPressテーマで言うとSTORKとかSANGOとかDigipress系とか、それ以外にもイケてる系のデザインでは最近よく見かけるやつです。
主にグローバルメニューで使われており、このオークニズムでも実装しているので、カーソルを合わせてみると挙動が確認できるかと思います。
CSSの疑似要素を使い、簡単にコピペで実装できますので軽くご紹介します。
:hover（ホバー）エフェクト
いわゆるホバーエフェクトと言われるやつで、何かの要素にカーソルを合わせた時に変化させるというCSSアクションです。
一番よく使われるのが、リンクとかかな。
body a:hover {color:#fff;}
みたいな記述をすると、リンクにカーソルを合わせた際に色が白に変わります。
これをグローバルメニューに応用するとき、昔のノリではカーソルを合わせた際に四角形のボックスごと光ったり、色が変わったりしてました。
別にそれがダサいとかそーゆーわけじゃないんですが。。。今回のアニメーションエフェクトの方がよりシャレてますｗ
なので、ぜひみなさんも実装してみましょう！😂
CSS
まずはCSSの記入。
はてなブログの場合場所は
管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」です。
コードはこちら
| /* ホバーアニメーション（下線） */ | |
| .underline { | |
| position: relative; | |
| } | |
| .underline:hover, | |
| .underline:focus, | |
| .underline:active { | |
| cursor: pointer; | |
| } | |
| .underline:after {/*疑似要素とアニメーション設定を加えてwidthを0にしておく*/ | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| bottom: -2px;/*自由変更*/ | |
| height: 3px;/*自由変更*/ | |
| background-color: #fff;/*自由変更*/ | |
| width: 0; | |
| transition: width .4s;/*自由変更*/ | |
| } | |
| .underline:hover:after, | |
| .underline:focus:after, | |
| .underline:active:after {/*ホバーしたら100%の位置まで伸びる*/ | |
| width: 100%; | |
| } |
微調整するなら、
14行目：下線の位置を調整。（上からどれだけ離すか）
15行目：下線の太さを調整。
16行目：下線の色を調整。
17行目：下線のアニメーションの速さを調整。
以上をいじればいいと思います。おそらく、個々人のグローバルメニューの高さとかが影響して見栄えが変わります。
あと、影響があるとすれば…
グローバルメニューの「a」で高さの設定や「overflow: hidden;」を使っているせいで下線が見えなくなっている場合もあります。
「a」高さを若干縮めるとか「overflow: visible;」にするとか…なんとか自分で頑張ってくださいｗ
Twitterで聞いてくれれば僕が個別で確認しにいきますm(_ _)m
スポンサーリンク
HTML
上記CSSを記載すれば、あとはHTMLにて「class="underline"」を付与するだけでOKです。
たとえば僕の場合、メニューの一番左のホームだと
<a href="http://www.okuni.me/" class="underline">
となり、残りのメニューにも全部「class="underline"」を付与していきます。
これだけで完了です！簡単ですね！😂
管理画面でプレビュー確認
あとは、プレビューにて実際にうまく反映されているかの確認。
下線が出てこないたいがいの場合は、CSSで述べた「a」での高さや「overflow: hidden;」が影響してるかと思いますので、その辺をご確認いただければと。
まとめ
今回はサクッとしたカスタマイズなので簡単に終わりましたね！ｗ
とはいえ、これは案外はてなブログで実装している人が少ないのでおすすめです！WordPressの超有名テーマのSTORKとかSANGOとかではみんなやってますよ！😂
昨日の記事でも言及しましたが、ほとんどのアニメーションにもはやjQueryなんて必要ないです。CSSだけで作った方が挙動も滑らかだし何より軽い！
今後も色々紹介していくので良かったらまた読んでくださいませ〜(ﾟ∀ﾟ)