【Gmail】未読メールの太字書式を解除するCSS。統一した見た目にしよう！
受信したメールをPC版「Gmail」で見た時、デフォルトでは太字で表示されます。クリックして中身を確認したら太字が解除されます。
個人的にはパッと見た時にごちゃごちゃ感が増して苦手でした。さらに未読メールは以下記事の方法で背景色を変更しているので太字装飾は不要でした。
https://www.naporitansushi.com/gmail-unread-background-css/CSSを使うことで太字などの装飾を解除できます。
本記事はChrome拡張機能を導入できるPCブラウザ向けです。スマホのアプリ版ではできません。
インストール方法
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は以下の記事を参考にしてみてください。
「Gmail」の一覧にある未読メールの太字を解除するCSS
スタイルシートを開く
「Gmail」にアクセスします。インストールした「Stylebot」の拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。
もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
こちらに以下のコードを書き込みます。
/*Gmailのメール一覧の太字を解除*/
td[role="gridcell"] span span {
font-weight: normal !important;
}「font-weight」が文字の太さという意味で「normal」は文字通り通常の太さにするって意味です。
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：mail.google.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
文字の太さが変わったか確認
受信トレイ（すべてのメールとかでもOK）を開きます。
未読、既読に関わらず全てのメール件名と内容が通常の文字太さで表示されます。あくまで一覧への適用でメールの中身には多分影響しません。
一時的に無効化したい場合は、「Stylebot」アイコンを左クリック→「mail.google.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
感想
以上、PCウェブサイト版「Gmail」のメール一覧上の文字装飾をリセットするCSSでした。
今んとこ太さ装飾しか見ていないので太さを変えるCSSだけ紹介しています。もしここに下線や斜線といった装飾が実装されたら再び記事を修正したいと思います。
冒頭でも書きましたが、未読メールの背景色を変えるCSS記事もおすすめです。