ユーザ用ツール

サイト用ツール


サイドバー

プログレス合同会社

広告

windows:chrome:extensions:user-javascript-and-css

User JavaScript and CSS

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

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

カスタマイズの開始

windows:chrome:extensions:chrome-ext-usrjscss0101.png

編集画面の表示

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

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

windows:chrome:extensions:chrome-ext-usrjscss0102.png

新規ルールの選択

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

windows:chrome:extensions:chrome-ext-usrjscss0103.png

開発者モードの設定要求

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

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

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

windows:chrome:extensions:chrome-ext-usrjscss0104.png

JavaScript/CSSの設定

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

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

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

開発者モードの有効化

windows:chrome:extensions:chrome-ext-usrjscss0201.png

拡張機能の管理

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

windows:chrome:extensions:chrome-ext-usrjscss0202.png

開発者モードの有効化

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

Gmailサイトのカスタマイズ

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;
}

3行目
32pxから変更しています。
8行目、9行目
10pxから変更しています。
19行目~21行目
リンク箇所を等倍フォントにします。

windows/chrome/extensions/user-javascript-and-css.txt · 最終更新: 2024/09/02 by プログレス合同会社