【Vivaldi】メールパネルの不要な項目を非表示にするCSS

2022年1月11日2022年1月24日カスタムCSS

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、メールパネルの不要な項目（カテゴリー）を非表示にするCSSについて書きます。

サイドバーのメールパネル内にある不要な項目を非表示にするCSSです。

例えば、カスタムフォルダー、メーリングリスト、フィルター、フラグ、ラベルを非表示にするといったことができます。現状、標準設定で非表示にすることはできないので、CSSを使って非表示にしてみます。

多分使ってない項目がきっとあると思うので、思い切って非表示にすると見栄えがスッキリして押し間違えも減ります。

使いたくなったら、いつでも元に戻せます。

パネルについて詳しく知りたい場合は、下記記事を参考にしてみてください。

参考：【Vivaldi】サイドバーの使い方。ウェブパネルが便利！ | ナポリタン寿司のPC日記

1. オリジナルカスタムUI（CSS）を使うには？
2. CSS
3. 【余談】フィードを除外
4. 感想

オリジナルカスタムUI（CSS）を使うには？

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

有効にしていないという方は、以下の記事を参考にしてみてください。

【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！

この記事では、ウェブブラウザ「Vivaldi」にCSSを適用する方法について書きます。Vivaldiには、CSSでブ ...

https://www.naporitansushi.com/vivaldi-css/

CSS

CSSは以下になっています。全部を使うのではなく、自分が非表示にしたい項目だけを抜粋して使ってみてください。

/*メールパネル項目削除CSS*/

/*全てのメッセージ*/
#mail_panel div[data-id="ALL_MESSAGES"] {
  display: none !important;
}

/*未読*/
#mail_panel div[data-id="ALL_MESSAGES_Unread"] {
  display: none !important;
}

/*受信済み*/
#mail_panel div[data-id="ALL_MESSAGES_Received"] {
  display: none !important;
}

/*送信済み*/
#mail_panel div[data-id="ALL_MESSAGES_Sent"] {
  display: none !important;
}

/*下書き*/
#mail_panel div[data-id="ALL_MESSAGES_Drafts"] {
  display: none !important;
}

/*送信箱*/
#mail_panel div[data-id="ALL_MESSAGES_Outbox"] {
  display: none !important;
}

/*スパム*/
#mail_panel div[data-id="ALL_MESSAGES_Spam"] {
  display: none !important;
}

/*ゴミ箱*/
#mail_panel div[data-id="ALL_MESSAGES_Trash"] {
  display: none !important;
}

/*アーカイブ*/
#mail_panel div[data-id="ALL_MESSAGES_Archive"] {
  display: none !important;
}

/*カスタムフォルダー*/
#mail_panel div[data-id="Custom Folders"] {
  display: none !important;
}

/*メーリングリスト*/
#mail_panel div[data-id="MAILING_LISTS"] {
  display: none !important;
}

/*フィルター*/
#mail_panel div[data-id="MAIL_FILTERS"] {
  display: none !important;
}

/*フラグ*/
#mail_panel div[data-id="MAIL_FLAGS"] {
  display: none !important;
}

/*フラグ（赤）*/
div[data-id="MAIL_FLAGS_Red"],
/*フラグ（オレンジ）*/
div[data-id="MAIL_FLAGS_Orange"],
/*フラグ（黄色）*/
div[data-id="MAIL_FLAGS_Yellow"],
/*フラグ（緑）*/
div[data-id="MAIL_FLAGS_Green"],
/*フラグ（青）*/
div[data-id="MAIL_FLAGS_Blue"],
/*フラグ（紫）*/
div[data-id="MAIL_FLAGS_Purple"],
/*フラグ（グレー）*/
div[data-id="MAIL_FLAGS_Gray"] {
  display: none !important;
}

/*ラベル*/
#mail_panel div[data-id="MAIL_LABELS"] {
  display: none !important;
}

/*全てのアカウント*/
#mail_panel div[data-id="ALL_MESSAGES_All Accounts"] {
  display: none !important;
}

上記のCSSを、エディタ（Visual Studio Codeやメモ帳など）でファイルに書き込みます。以下の感じです。

書き込めたら、ブラウザをリロードします。

パネル内の項目が非表示になります。

下記のCSSでフィード項目も非表示にできるんですが、これを非表示にしちゃうとフィードパネルの方も消えちゃいます。

/*フィード*/
#mail_panel div[data-id="FEEDS_LABELS"] {
  display: none !important;
}

僕の場合、下記のCSSを使っています。1つずつ非表示にしてもいいんですが、少しでもコードを見やすくするために、まとめたほうがいいかなと思います。

/*メールパネル項目削除CSS*/

/*僕が使ってるメールパネル非表示CSS*/
#mail_panel div[data-id="ALL_MESSAGES_Archive"],
#mail_panel div[data-id="Custom Folders"],
#mail_panel div[data-id="MAILING_LISTS"],
#mail_panel div[data-id="MAILING_LISTS_Important Mailing Lists"],
#mail_panel div[data-id="MAIL_FLAGS"],
#mail_panel div[data-id="MAILING_LISTS_Other Mailing Lists"],
#mail_panel div[data-id="MAIL_LABELS"],
#mail_panel div[data-id="ALL_MESSAGES_All Accounts"] {
  display: none !important;
}

セレクタを「,」で区切ることで、まとめれます。まぁ、初心者さんは素直に一つずつ非表示にするのが確実かなと思います。

一部項目が非表示になります。アーカイブ、カスタムフォルダー、メーリングリスト、フラグ、ラベル、全てのアカウントを非表示にしています。