【Vivaldi】メールパネルの不要な項目を非表示にするCSS
この記事では、Vivaldi のオリジナルカスタムUI機能を使って、メールパネルの不要な項目（カテゴリー）を非表示にするCSSについて書きます。
サイドバーのメールパネル内にある不要な項目を非表示にするCSSです。
例えば、カスタムフォルダー、メーリングリスト、フィルター、フラグ、ラベルを非表示にするといったことができます。現状、標準設定で非表示にすることはできないので、CSSを使って非表示にしてみます。
多分使ってない項目がきっとあると思うので、思い切って非表示にすると見栄えがスッキリして押し間違えも減ります。
使いたくなったら、いつでも元に戻せます。
パネルについて詳しく知りたい場合は、下記記事を参考にしてみてください。
参考：【Vivaldi】サイドバーの使い方。ウェブパネルが便利！
オリジナルカスタムUI（CSS）を使うには？
この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。
有効にしていないという方は、以下の記事を参考にしてみてください。
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;
}セレクタを「,」で区切ることで、まとめれます。まぁ、初心者さんは素直に一つずつ非表示にするのが確実かなと思います。
一部項目が非表示になります。アーカイブ、カスタムフォルダー、メーリングリスト、フラグ、ラベル、全てのアカウントを非表示にしています。
注意点ですが、行を詰めることはできません。できるのかもですが、少なくとも僕の実力だと無理でした。
非表示にした箇所は、そのまま空白が空いている状態です。
CSS ファイルではなく、直接style タグで書き込まれていたのでCSSで調整できないって感じです。直書きされているパターンってどうやって無効、または上書きできるんですかね。よー分からんです。
【余談】フィードを除外
メールパネルの「すべてのメッセージ」をクリックすると、購読しているフィード、登録しているアカウントのメールが全て表示されます。
ここの表示項目は、上部にあるアイコンで切り替えできます。
僕の場合、フィードはフィードパネルのほうで確認しているため、メール内では除外したいです。
その場合は、上部にある
フィードアイコンをクリックします。これでフィードは除外されます。再び表示させたくなった場合は同じようにクリックするだけです。
アイコンをクリックすると、ゴミ箱に入れたメールが非表示になります。
僕にとってゴミ箱に入れる＝不要なメールなので、非表示にしています。常に削除していないメール・かつ登録したGmailだけを「すべてのメッセージ」に表示するようにしています。
朝起きて、メールパネル内で受信したメールを確認→確認したメールはDeleteで削除するのがルーティーンです。
感想
以上、Vivaldiのメールパネルの不要な項目を非表示にするCSSについてでした。
今後のアップデートで、フィードパネルを使っている場合、メールパネル内にフィードは表示させないといったことができるといいなぁと思います。gmailのようにメールはメール、フィードはフィードで使い分けたいです。