うぇぶ活

沖縄に移住していたが、故あって名古屋へ移住したカップルweb人がアフィリエイトでダブルフリーランスを目指すための活動雑記

はてなブログ グローバルメニューの文字をホバーしたら他の文字が半透明表示になるCSS

はてなブログWordPressみたいにカスタマイズできるというものではないので、せめてグローバルメニューくらい目立たせないとなぁと思います。

今回はグローバルメニューのメニュータイトルにマウスカーソルを移動させたら、他の文字が半透明になるというカスタマイズtipsです。

動作につきましては当サイトのグローバルメニューでご確認ください。

グローバルメニューの設置は

以前の記事で、当サイトのグローバルメニューの設置については説明していますので、ご参考ください。

 

affiliate-couple.hatenablog.com

 

そのグローバルメニューのカスタマイズをベースとして、新たに”class”と”CSS”を追加しました。

 そんなに難しくはありませんので、やってみてください。

 

ホバーした文字以外は、半透明表示状態にするCSS

 

今回は”class”を”sfade”としました。 


/* ホバーした文字以外は、半透明表示状態にする */

.sfade { visibility: hidden; }
/* 文字間で:hoverが起動しないため*/

.sfade > * { visibility: visible; }
/* 文字が `hidden` されていても、他の文字を元の位置に戻す */

.sfade > * { transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms; }
/* マウスが文字間を移動時にジャンプするのを防ぐため、フェードをわずかに遅延させてスムーズにする。 */

.sfade:hover > * { opacity: 0.4; transform: scale(0.9); }
/* 指定した文字にホバーしたら、すべての項目をフェードアウトする */

.sfade > *:hover { opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms; }
/* 現在ホバーされているアイテムをフェードインする */    
    

上記スクリプトを「管理画面」→「カスタマイズ」→「デザイン」→「デザインCSS」へ記述します。

グローバルメニューにclassを追記する


    <div class="sfade"></div>

「管理画面」→「カスタマイズ」→「ヘッダ」→「タイトル下」内の、グローバルメニューの記述に追記します。

classを記述する場合は半角空けて追記すれば良いです。

うまく反応しましたでしょうか?

まとめ

はてなブログは大きなカスタマイズは出来ませんが、小さなカスタマイズの積み重ねで、カッコ良いサイトに変化します。

 

それもはてなブログの良いところなのかもしれませんね。。

 

written by GENさん