Google Chrome で各サイトの表示デザイン（CSS）をカスタマイズできる拡張機能

「Google Reader で左カラム幅を広げたい」と質問があり、Google Chrome なら各サイトの CSS をいじれる拡張機能はないか探したら、ズバリありました。

Stylish - Google Chrome 拡張機能ギャラリー

「こんなものあったらいいな」と思って探すと結構、見つかるので嬉しくなります


さて、この「Stylish」をインストールして、表示されたアイコンを右クリック、メニューから「オプション」を選択します。




開いた画面で「Add new style」をクリック。

さらに開いた設定画面「Edit Style」で以下の情報を入力してカスタマイズします。

Name： 後からみて分かるような設定名を付けます。
Enabled： 有効にする場合、チェックを入れます。

Code： 追加する CSS コードを入力
Applies to： 適用するサイトの URL 情報を入力
　・URL --- フルのアドレス
　・URLs starting with　--- アドレスの前半部分
　・URLs on the domain　---　指定したドメインだけ

ここで Google Reader で左のカラム幅は 260px 固定なので、これを 320px にする場合の入力値を紹介しておきます。

Name： Google Reader navi width
Enabled： チェック

Code：
#nav {width: 320px;}
#chrome {margin-left: 320px;}

Applies to：
URLs starting with --- http://www.google.co.jp/reader/view/

これで「Save」ボタンをクリックすれば設定完了です。



もちろん、幅の数字を変更すれば「好みの幅」に変更できます。


「Stylish」を使えば他のサイトデザインも同様にカスタマイズできます！


自分でサイト作成をしていたり、ブログのカスタマイズで CSS を勉強したこと、使ったことがある人であれば、それほど難しくはありません。

どうしてもデザインが気に入らないサイトやサービスがあれば、この「Stylish」でカスタマイズに挑戦するのも面白いかもしれませんね。


「自分では難しそうだ」という人には「Stylish」を使ったカスタマイズのサンプルも公開されています。

Restyle the web with Stylish! | userstyles.org

希望にあうものがあれば導入、あるいは参考にしてみましょう。