読者です 読者をやめる 読者になる 読者になる

Google Chromeのデフォルトcssをカスタマイズ!

chrome

chromecssをカスタマイズしてみます。
作戦は、以下の2通り

  1. Extensionsを使う:Chrome Stylist https://chrome.google.com/extensions/detail/pabfempgigicdjjlccdgnbmeggkbjdhd
  2. コマンドラインを活用:custom.css + コマンドラインオプション

ではいってみましょう。

Extensionsを使う

Chrome Stylistをインストールします。
https://chrome.google.com/extensions/detail/pabfempgigicdjjlccdgnbmeggkbjdhd

とりあえず最初は、常時表示できるように、設定を変更しましょう。

chrome://extensions/ を開いて、
Chrome Stylistのoptionsをクリック。
iconを常時表示にすれば、いつでも楽ちんに編集できます。

そしたならば、次に適当なサイトを開いて、Chrome Stylistのアイコンをクリック
サイトは、限定したくなければ、http://*とかでOK
そして、編集。
例えば、text field(一行テキストの入力フォーム)のフォントサイズを20pxにするならば、

input[type="text"] {
  font-size: 20px;
}

とかします。設定はお好みで( ´艸`)
Chrome Stylistのoptionsから他の人が作ったstyleを適用することもできます。
http://userstyles.org/

コマンドラインを活用。

extensionsに頼るもんか!なんて人はどうぞ。(Macを基準に書いていきます。ごめんなさい(´;ω;`))

まずは、custom.cssの編集。

vi ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/custom.css

適当に編集します。編集は普通のcssと同じ。

次に、chromeコマンドラインオプション付きで起動します!

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-user-stylesheet

full pathで実行ファイルを指定して、オプションとして、--enable-user-stylesheetを指定します。

上記のコマンドで実行中のchromeは、custom.cssの編集と同時にcssが反映される!ので操作性抜群です。

AppleScriptにしたいというときは、

do shell script "/Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome --enable-user-stylesheet"

っていう感じでOK。

enjoy!