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

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

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

動作につきましては当サイトのグローバルメニューでご確認ください。(記事をWordPressに移行したので確認できません。)

「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。

WordPress侍

2020.11.21

役に立つ！はてなブログのカスタマイズ20選

https://wordpress-samurai.com/hatenablog_customize_20

併設していた「はてなブログPro」を解約し、サイトを閉鎖いたしました。しかし、はてなブログのカスタマイズ記事を多数掲載していたので、そのまま無くすというのも勿体ないと思い、WordPressサイトではありますが、カスタマイズ記事だけをこちらのサイトに移設いたしました。記事文章につきましてはなるべく原文を使用しているため、おかしな内容になっているかもしれませんが、「はてなブログ」を利用されている方にはご理解いただけると思っています。また、はてなブログと動作が違うものもいくつかあります。それは、イメージを持...

はてなブログをやるなら、制限が少ないはてなブログProがオススメ！

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

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

WordPress侍

2017.06.07

はてなブログカスタマイズ グローバルメニューにアイコンWebフォントを使う

https://wordpress-samurai.com/globalmenu

このブログを開設した時に行ったカスタマイズを紹介いたします。グローバルメニューを設置しているブログは多いですね。そのメニューの先頭に はてなブログのアイコンWebフォントを表示させ、見た目の印象を変えてみました。使用したテーマははてなブログテーマで一番人気がある「Brooklyn」です。 「役に立つ！はてなブログのカスタマイズ20選」をまとめてみました。はてなブログをやるなら、制限が少ないはてなブログProがオススメ！グローバルメニューの設置参照にしたというかCSSをコピペしたサイトは制作者さんのサイトですが、現...

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

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

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

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

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

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

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

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

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

まとめ

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

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