Chrome でユーザースタイルシートを設定する方法

最近ユーザースタイルシートというものの存在を知ったので、この記事にて紹介する。

ユーザースタイルシートを利用すると、ユーザ独自の CSS を自分の管理外のサイトにも適用できる。

今回は Chrome 拡張の Stylebot を用いてユーザスタイルシートを設定する。Stylebot はユーザスタイルシートの管理をしてくれる拡張機能である。

Stylebot のインストール

https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha にアクセスし「Chrome に追加」ボタンをクリック。

stylebot インストール

Stylebot の設定

Stylebot は個人的にはデフォルトでは使いづらいので、少々設定を行う。Chrome のメニュー(ブラウザ右上のボタン)から「ツール」>「拡張機能」を選択。Stylebot の「オプション」を選択。

stylebot の設定

Basics メニューの Default Editing Mode の Edit CSS を選択。

stylebot オプション

以上で設定は終了。

ユーザスタイルシートの設定方法

では、実際にユーザースタイルシートを設定してみる。今回は Yahoo! Japan のフォントファミリーをメイリオにしてみる。

まず、Yahoo! JAPAN にアクセス。

右上に CSS という文字が追加されているので、クリック。

ユーザースタイルシートの設定(Yahoo! JAPAN)

するとテキスト入力スペースが表示されるので、通常と同様に CSS を記述。Live Preview Changes にチェックが入っているとリアルタイムに CSS が適用される。Save を押すと保存される。

ユーザースタイルシートの設定 2 (Yahoo! JAPAN)

無事メイリオになりましたね!

ちなみに先ほどの Stylebot のオプションから Global Stylesheet を編集して有効化すると、ユーザースタイルシートが
許可されている全サイトの CSS 書き換えも可能なので、好きなフォントがある方はそれに設定すると嬉しいかも。

関連記事

Chromeの便利なショートカットキー集
Google ChromeをVim的に操作するためのプラグイン「Vichrome」
サイトのデザイン変更が反映されない時の対策

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/css/2395/trackback/