広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【Vivaldi】フィードパネルの未読カウンターを非表示にするCSS

2023年11月30日カスタムCSS

「Vivaldi」ブラウザのアイコン画像

この記事では、Windows版「Vivaldiヴィヴァルディ」ブラウザののオリジナルカスタムUI機能を使って、フィードパネルの未読カウンター数字を非表示にするCSSについて書きます。

本記事はオリジナルカスタムUIが有効になっている前提です。詳しくはこちらを参考にしてみてください。

【Vivaldi】フィードパネルの未読カウンターを非表示にするCSS

僕はWindowsの「Vivaldi」ブラウザを利用しています。本ブラウザには標準でRSSリーダーが搭載されていて、僕はよくフィードパネルから新着記事を確認しています。

この時未読の通知(記事)がある場合、フィードパネルの右上に未読の数字が表示されます。

「Vivaldi」ブラウザのフィードパネルに表示される未読カウンター画像

僕は好きな時に未読の記事を確認したい派です。この数字が表示されていることで、なんかそわそわしちゃって、ブログ作業に集中できない時があります。

「非表示にしたいな~」と思い設定を見てみると、どうやらフィードパネルだけを非表示にすることは記事執筆時点(2023年11月)でできないようです。

設定→メール→「メールカウンター」の「パネルボタンに表示する」のチェックを外すことで、非表示にはできます。しかし、本設定はフィードパネルだけでなく、メールパネルにも反映される設定です。メールとフィードどちらも数字が消えてしまいます。

「Vivaldi」ブラウザのメールとフィードパネルの件数を非表示にする手順画像1

僕はメールパネルも表示して利用しています。メールパネルでは、新着メールの件数を表示してほしいです。

「Vivaldi」ブラウザのメールとフィードパネルの件数を非表示にする手順画像2

フィードパネルの未読数字だけを非表示にはできないっぽいので、カスタムCSS機能を利用してみます。CSSを利用することでできます。

設定からサクッと変更するのと比べて、少々手間ですが、一度環境を構築して、CSSを書き込めば、「Vivaldi」のアップデート等で使えなくなるまでは、ずっと適用されます。戻したくなったら、いつでもオンオフできます。

本記事は、Windows版(PC版)Vivaldiでの解説です。スマホやタブレットのアプリ版ではできません。

「Vivaldi」のオリジナルカスタムUI(CSS)を有効にする

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

「Vivaldi」上でCSSファイルを使えるように「vivaldi://experiments/」から変更して、CSSファイルを読み込ませます。

フィードパネルの未読件数を消すCSS

以下のCSSになります。

/*フィードパネルの未読カウンター非表示*/
.button-toolbar>[title="フィード"]>.button-badge {
    display: none !important;
}
注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、「Vivaldi」ブラウザのアップデートにより、いつの間にか使えなくなる可能性があります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

上記のCSSをテキストエディター(Visual Studio CodeやWindows標準でインストールされているメモ帳アプリなど)で開いた「Vivaldi」のカスタムCSSファイルに書き込みます。

「フィードパネルの未読カウンター非表示」CSSを書き込んだ「Visual Studio Code」画像

書き込めたらブラウザを再起動します。再起動しないとCSSが反映されないので注意です。CSS導入後は未読の通知があってもフィードパネルに件数が表示されなくなります。溜まった通知に囚われることなく作業できます。

「Vivaldi」ブラウザのフィードパネルに表示される未読カウンターを、カスタムCSSで非表示にした画像

見たくなったらいつでも確認できます。

「Vivaldi」ブラウザのフィードリーダーのスクリーンショット
画像に映っている記事は、「【Canva】オリジナルトートバッグを印刷して作成してみた!

使わなくなった場合は書き込んだCSSを削除します。

【余談】設定であればいいんだけど今のところはない?

冒頭で紹介したメール→「パネルボタンに表示する」は本記事を書いている後半に気づきました。最初は気づいておらず、「なーんかそういう設定あったと思うんだけどどこだっけ~~」と探している状態でした。

設定を探している段階で色々試したことを書いておきます。メールパネルを使っていない方や、メールパネルは表示しているけど新着メールの件数表示は不要という方は、冒頭のとおり設定→メール→「パネルボタンに表示する」のチェックを外します。CSSなど利用しなくても非表示にできます。

フィード設定ページ

フィードパネルなのでそのまま「フィード」設定ページに何かヒントがあるかなと見てみましたが、それらしき設定はありませんでした。

「Vivaldi」ブラウザのフィード設定ページ画像

【パネル】リーディングパネルの「未読カウンターを表示する」

フィードと言いつつベースはパネルなので「パネル」設定ページを見てみました。リーディングリストパネルに「未読カウンターを表示する」があり、まさにドンピシャの機能でした。

「Vivaldi」ブラウザのパネル設定画像1(未読カウンターを表示する)

しかし、「リーディングリストパネル」の項目内にあるとおりで本当に「リーディングリストパネル」だけの反映でした。後で読むに追加した未読ページの件数表示をオンオフできます。フィードパネルにはなーんの影響もありませんでした。

「Vivaldi」ブラウザのパネル設定画像2(未読カウンターを表示する)

もし今後メールとフィードが分離したとしたら「フィードパネル」に「未読カウンターを表示する」という設定が追加されるんでしょうかね~。

【パネル】フォルダーカウンターを表示する

パネル→「パネルオプション」の「フォルダーカウンターを表示する」もそれっぽい設定だなぁと思いオンオフしてみましたが、フィードパネルは何にも変わりませんでした。

変わった部分はパネルの中身です。例えば、ウィンドウパネルを開くとウィンドウ名の横部分に開いているタブの数が表示されます。ここの件数表示のオンオフでした。

「Vivaldi」ブラウザのパネル設定画像1(フォルダーカウンターを表示する)

ウィンドウパネル以外でいうとメモパネルのフォルダーの横にある数字もオンオフの対象でした。

「Vivaldi」ブラウザのパネル設定画像2(フォルダーカウンターを表示する)

フィード(RSS)のポップアップ通知が不要な場合

「フィードは受信したいけどWindowsの右下にポロンッと表示されるフィード通知はオフにしたい!集中力が途切れる!」という方は、フィードの削除でも停止でもなくフィードの通知をオフにするといいかもしれません。

以下の記事を参考にしてみてください。通知と未読カウンターは別々です。通知を切っても受信はされて件数(数字)はパネルに表示されます。

ウェブサイト・メールの通知が不要な場合

ウェブサイトとメールから届くポップアップ通知のオフ方法を、それぞれ書いています。

フィードの受信自体を解除(削除)したい場合

そもそもフィードの購読自体をやめたい場合は、下記記事を参考にしてみてください。削除方法を紹介しています。

感想

以上、「Vivaldiヴィヴァルディ」ブラウザのオリジナルカスタムUI機能を使って、フィードパネルの未読カウンター数字を非表示にするCSSでした。

「Vivaldi」は実装されていない機能でも、本記事のようにカスタムCSSでカスタマイズできる点がいいですよねぇ…。

2023年11月30日カスタムCSS

Posted by ナポリタン寿司