【Gmail】メール上部のボタンラベルから不要項目を非表示にするCSS

2025年2月5日Google

この記事では、PCウェブサイト版「Gmail」のメール上部にあるラベル（アーカイブ、未読にする、スヌーズ、ToDo リストなど）を非表示にするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

PC版「Gmail」でメールを開くと上部に各種ボタンが表示されます。代表的なのが削除のゴミ箱アイコンとかですかね。

僕はこの中でいくつか使っていない項目がありました。スヌーズとかToDo リストに追加とか。

あっても邪魔なだけなのでCSSを使って非表示にしてみます。

自身の環境上だけの反映で他人には一切影響しません。というか自分のデバイスでかつCSSを導入したブラウザのみの範囲です。CSSを書き込んでいない別ブラウザではいつも通りの表示です。

本記事はChrome拡張機能を導入できるPCブラウザ向けです。スマホのアプリ版ではできません。

1. 【前提】ボタンのラベル表示は「アイコン」
2. インストール方法
3. 「Gmail」のラベルから不要なボタンを消すCSS
4. 削除ボタンを無理やり拡大するCSS
5. メール一覧の黄色いマーク、スターマーク
6. 他のCSSや拡張機能記事紹介
7. 感想

【前提】ボタンのラベル表示は「アイコン」

「Gmail」は設定からボタンのラベル表示をアイコンかテキストか選択できるようになっています。

本記事の対象者はデフォルトの「アイコン」になっている方です。「テキスト」でも一部項目は非表示になりますが、一部項目は非対応です。

【Gmail】メール上部のラベルをアイコンからテキスト表示にする方法

この記事では、PCウェブサイト版「Gmail」のメールを開いた時、上部に表示される受信トレイに移動、迷 ...

https://www.naporitansushi.com/gmail-mail-button-labels-icon...

インストール方法

Chromeウェブストアからインストールできます。

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

「Gmail」のラベルから不要なボタンを消すCSS

スタイルシートを開く

「Gmail」にアクセスします。インストールした「Stylebot」の拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。全部を書き込む必要はありません。自分が消したい項目だけコピペします。「戻る」と「削除」は僕が消したいと思わなかったのでそもそも書いていません。

CSS

/*【ヘッダー】アーカイブ*/
div[gh="mtb"] :is(div[title="アーカイブ"], [aria-label="アーカイブ"]) {
    display: none !important;
}

/*【ヘッダー】迷惑メールを報告*/
div[gh="mtb"] :is(div[title="迷惑メールを報告"], [aria-label="迷惑メールを報告"]) {
    display: none !important;
}

/*【ヘッダー】未読にする*/
div[gh="mtb"] :is(div[title="未読にする"], [aria-label="未読にする"]) {
    display: none !important;
}

/*【ヘッダー】スヌーズ*/
div[gh="mtb"] :is(div[title="スヌーズ"], [aria-label="スヌーズ"]) {
    display: none !important;
}

/*【ヘッダー】ToDo リストに追加*/
div[gh="mtb"] :is(div[title="ToDo リストに追加"], [aria-label="ToDo リストに追加"]) {
    display: none !important;
}

/*【ヘッダー】受信トレイに移動*/
[role="button"]:is([aria-label="受信トレイに移動"], [title="受信トレイに移動"]) {
    display: none !important;
}

/*【ヘッダー】ラベル*/
[role="button"]:is([aria-label="ラベル"], [title="ラベル"]) {
    display: none !important;
}

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

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

下記画像のようにずらずら書けたらOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト（例：mail.google.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。

「Stylebot」拡張機能で「mail.google.com」スタイルシートが有効になっているか確認する手順画像

消えたか確認

適当に受信したメールを開きます。CSSを書き込んだ項目が非表示になってスッキリします。

一時的に無効化したい場合は、「Stylebot」アイコンを左クリック→「mail.google.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。

削除ボタンを無理やり拡大するCSS

僕は削除（ゴミ箱に移動）ボタンを一番使っていてそれ以外はおまけ程度です。思い切って削除ボタンを押しやすいよう当たり判定を広げてみました。

CSS

/*削除ボタン拡大*/
[role="button"]:is([aria-label="削除"], [title="削除"]) {
    transform: scale(4);
    margin: 0px 68px !important;

    &>div>div {
        width: 26px !important;
    }
}