はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてなブログやはてなブックマークのお知らせ数字バッジの非表示はユーザーCSSで可能、作業中断原因を取り除こう

はてなブログや関連サービスを快適に使うために、標準で備わっている機能をあえて使わないという選択もありだ。便利なはずのサービスが自分のペースを乱すなら本末転倒。サービスを賢く使いたいね。

概要

はてな関連サービス共通で利用できるお知らせ機能の数字バッジはユーザーCSSで非表示にできる。その際のCSSコードの具体例を載せる。

Amazon.co.jp: Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

お知らせ機能とは

お知らせ機能とは、はてなの各種サービスでアクションがあった場合に通知される機能だ。例えば次のとおり。

  • ブログが読者登録される
  • ブログが言及される
  • はてなブックマークされる
  • はてなスターされる
  • IDコールされる
  • その月のアクセス数が千、一万、十万を超える

これらは合計で20件までしか表示されない。20件を超えれば未読でも流れてしまって確認できない。

はてなブログのお知らせ通知バッジは20件でカンスト

はてなブログ、twitter、LINEの通知バッジは最高何件でカンストするか調査した記録 - はぴらき合理化幻想

はてなスターやIDコールが分からない人は次の記事を参考にしてほしい。筆者がはてなの各種サービスを楽しんでいたころの記事だ。

はてなスター/引用スター/IDコールではてなブログやブックマークが11倍楽しい! - はぴらき合理化幻想

なぜお知らせバッジを非表示にするのか?

気になってしまうから。自分のペースを乱されるから。

たとえば、ブログの記事作成でプレビューし、お知らせ通知に数字バッジが付いているとつい見てしまう。結果、記事作成が中断されてしまい作業効率が悪くなる。

記事作成が完了するまで見ないと決めて実行できる人ならいいが、筆者はそれほど意志が強くない。よって仕組みを改めて、誘惑原因を取り除くことにした。

Amazon.co.jp: 見てしまう人びと:幻覚の脳科学

お知らせ数字バッジを非表示にする

標準機能では非表示にできないが、ユーザーCSSで強制的に非表示にできる。筆者はChrome拡張機能のStylebotを使用している。

ユーザースタイルシートを編集できるChrome拡張機能stylebotの使い方 - はぴらき合理化幻想

StylebotのオプションでGlobal Stylesheetに次のコードを追加する。ブログであろうとブックマークであろうとURLが異なっていても数字バッジは非表示になる。

.notify-count {
  display: none;
}

Global Stylesheetの設定手順は次のページが参考になる。

chrome拡張機能stylebotオプション2

ユーザーCSSでiframeを簡単に判別!ウェブサイトの表示が遅い原因を特定しやすいよ - はぴらき合理化幻想

購読中のブログの未確認件数

2015年2月に新機能が追加された。「購読中のブログ」で更新されたブログの数がバッジで表示されるようになった。

ブログの更新確認はfeedlyで行っているので、筆者がはてなで購読しているブログでアクティブなブログは10程度しかない。それでもこのバッジが表示されるとせわしない。読まなければいけないような感じを受けてしまう。よって、非表示にすることにした。

これも標準では非表示にできないので上述のStylebotを活用する。次のコードを追加すると表示が消える。便利。

.badge-subscribe {
  display: none;
}

Amazon.co.jp: 目に見えないけれど大切なもの―あなたの心に安らぎと強さを

おまけ

当ページで述べた方法とはコンセプトがまったく異なるが、はてなブログ以外ではてなブックマークされてすぐに気づけるようにする方法もある。

簡単設定!他ブログではてなブックマークされてすぐに気付く方法、WordPress/FC2/ライブドア/bloggerなど - はぴらき合理化幻想

まとめ

お知らせ機能のバッジは作業を中断させる魔力がある。自分のペースでお知らせを受け取りたいのなら、数字バッジを非表示にしてしまえばいい。

バッジを非表示にするだけなので、お知らせを確認したくなればお知らせアイコンをクリックでいつでも見られる。サービスは自分のペースで使えるようにしたいね。

不可能を可能に!はてなブログのプロフィールページをカスタムできるJavaScriptプラグインを自作した - はぴらき合理化幻想

AdSenseコードを残したまま特定のページで広告を非表示にするJavaScriptプラグイン「AdSense Filter」を自作した - はぴらき合理化幻想

テレ東ニュース番組の看板猫にゃーにゃが殴り込みに来てそのまま住み着いたにゃーฅ•ω•ฅ - はぴらき合理化幻想

はてなブログ管理画面で購読中のブログにある「おすすめブログ」を非表示にする - はぴらき合理化幻想

はてなブログproで最初にすべき設定、内部SEO対策や表示速度の改善策 - はぴらき合理化幻想

てすとてすと