User JavaScript and CSS

User JavaScript and CSSは閲覧しているウェブサイトに独自のJavaScriptやCSSを埋め込んで、表示をカスタマイズする拡張機能です。

例として、Gmailのメール一覧の行間がちょっと間延びしています(個人的な感想です)ので、詰めて表示するようにカスタマイズしてみます。

カスタマイズを適用させたいウェブサイト(ここではGmailの受信トレイ)を表示させます。

Chromeツールバーの『拡張機能アイコン』➡『User JavaScript and CSS』と進みます。

『New rule: サイト名』をクリックして新規ルールを作成します。

2024/06からGoogleの要件により、ユーザースクリプト拡張機能を使用する場合は開発者モードを有効にする必要があります。

後ほど有効にしますので、『Close』で閉じます。

開発者モードを有効にした後は、表示されなくなります。

ルール名、適用するURLパターンを設定して、適用したいJavaScript/CSSを編集します。

JavaScript/CSSの内容は後述します。

『Save』ボタンで保存します。

Chromeツールバーの『拡張機能アイコン』➡『拡張機能を管理』と進みます。

右上の『デベロッパーモード』を有効にします。

Gmailサイトをカスタマイズします。

/* ラベル 行間隔調整 */
.TN {
  height: 30px;
}
 
/* メール一覧 行間隔調整 */
.zA {
  padding-bottom: 8px;
  padding-top: 8px;
}
 
/* 送信メール 等倍フォント */
.Am, .LW-avf.Am {
  font-size: 0.85rem;
  font {
    font-family: Monospace;
  }
}
.aoP a[href] {
  font-family: Monospace;
}