ユーザーCSSを使って”スタイリッシュに”ページを表示する「Stylish」

Firefoxには、ユーザーの好みに応じて自分だけのページ表示方法を適用することができる機能を持っています。

それを簡単に実現してくれる拡張機能が「Stylish」です。

音楽ファン必見！新着ビデオ・クリップを見るなら「GyaO」今回は「Stylish」を紹介ということで、実際にユーザーCSSを適用してどのように表示が変化するのかをご紹介したいと思います。

たまたまGoogle Readerの表示をかっこよくするCSSが配布されていましたのでそれを使って手順をご説明します。

最初にFirefoxアドオン「Stylish」をインストールしておきます。

次に「gReader.zip」というCSSファイルをダウンロードします。

圧縮ファイルですので、これを任意の場所に解凍します。

解凍したファイルの中には、greaderというフォルダとMACOSというフォルダがあります、Windowsユーザーの方は”greader”フォルダを開いてください。



フォルダを開くとさらにいくつかのフォルダとファイルが表示されます、今回はFirefoxを利用してCSSを適用しますので”Firefox＋Camino”フォルダを開きます。



そのフォルダの中に”greader.css”というファイルがありますので、それをFirefoxの画面上にドラッグ＆ドロップします。



新規タブにgreader.cssの中身が表示されるはずです。



表示されたCSS文を全て選択してコピーしておきます。

ここでアドオン画面に移り”Stylish”の設定画面を開きます。



スタイルの管理という画面が開きますので、”新規作成”ボタンをクリックします。

スタイルの追加という画面が開きますので、説明欄にgooglereaderとでも記入し、下部の大きなテキストボックスに先ほどコピーしたCSSを貼り付け、保存ボタンをクリックします。



”スタイルの管理”画面を閉じます。

これで設定は完了です。Google Readerにアクセスすると、表示がどのように変わっているでしょうか、まずはCSS適用前↓



こちらがCSS適用後です↓



セッティングボタンやその他の操作系も含め、全体的にちょっと”スタイリッシュ”になっていますね。


この手の見栄え変更はGreasemonkeyが手軽で対応サイトも多いですが、「Stylish」を使ってもこのように様々なサイトの見栄えを自分好みに変更することができます。他にもいろんなユーザーCSSが配布されていますので、オフィシャルページや検索エンジンで検索するなどして探してみてください。

＊効果を元に戻すには作成したスタイルをダブルクリックして設定画面を開き、右上の”有効”という部分のチェックを外します。