普段のブラウジングをもっと快適にするユーザーCSSの作り方/Opera Dragonflyの使い方

背景色がきつい!
フォントサイズが小さすぎて見づらい!
バナーのテカテカを消したい!
ブラウジング時にこんなことを感じたことがある人は少なくないはず。ホームページは各人が思い思いのデザイン・配色で作成しているため、それを長時間眺めると非常に目の負担にもなります。特に黒背景⇒白背景⇒黒背景はきつい。できればそのような配色に悩まされることがなく、自分の好きな配色でホームページのコンテンツを楽しみたいものです。
そんなときに役立つのが ”ユーザーCSS”
ブラウザはOperaでユーザーCSSに対応しており、かつ非常に使いやすいです(Firefoxでもあると思いますが使ったことがありません。ですが下記で紹介するテクニックは役に立つはず)
ユーザーCSSの作り方
CSSをカスタマイズすることで下記のことができます。
* サイトごとに特定要素コンテンツを非表示
* フォント(ココログ)を自分好みに修正
* 背景とフォントの組合せを目に優しい色に統一
* 動画サイトでは動画領域以外を非表示
* 広告非表示等カスタマイズ可能
がんばってCSSを駆使すればもっと複雑なこともできるが、手っ取り早いのが↑
サイトごとに特定要素(広告など)コンテンツを非表示
<タグ class="クラス名">の要素を消すには
.クラス名{
display:none;
}
<タグ id="ID名">の要素を消すには
#ID名{
display:none;
}
フォント(ココログ)を自分好みに修正
*{
font-family:"'Arial', '好きなフォント名', 'MS PGothic' !important;"
}
注釈 font-familyは左優先、表示できない場合、後のフォントを見ていく
ココログのフォントが汚いのもこれで直せますね!
背景とフォントの組合せを目に優しい色に統一
*{
color: 好きなフォント色 !important;
background: 好きな背景色 !important;
}
動画サイトでは動画領域以外を非表示
body {
visibility:hidden;
}
#動画プレーヤーの要素{
visibility:visible;
position: absolute;
top: 配置したい位置px;
}
ユーザーCSS作成のコツ
すべてのサイト共通CSSを 各サイトは専用css はそれをインポートして階層的にするのがコツ。下記は概念図
なお外部CSSを継承するには、下記のようにCSSファイル上部に記述します。
@import "外部スタイルシート.css";
ユーザーCSSを使うならOperaが一番!
肝心の消した要素のid,classが何かを調べる方法はOperaならDragonfly、Firefoxならfirebugが非常便利。調べたい要素をクリックするだけで対応するhtmlやその要素に適応されているcssスタイルだけを表示可能です。
WEBから簡単に要素を特定する方法
ここではOperaのDragonflyの使い方を紹介する。Dragonflyは非常に強力なツールでCSSデザイン解析やJavascriptデバッグなどがブラウザで直接できる。これを利用すればWEBから簡単に要素を特定することもできる。
起動は[Tools] ⇒ [Advanced] ⇒ [Opera Dragonfly]
ブラウザウィンドウ下半分の領域でDragonflyが起動される。あとは思いのままに操作します。なおDragonflyはOperaのバージョンが古いとバグを多く含んでいるので、なるべく最新のものを使いたいです。オススメは10.61以降。
あとはページの見たい領域をクリックすると、HTMLの該当タグに自動で飛べたり、逆にHTMLをクリックするとページがその部分をハイライトしてくれる。
上の画像はYahoo ニューストピックスの邪魔な右領域部分を調べている状態です。class名がわかりましたね。
あとは消すなり焼くなり、自由自在です。
ユーザーCSSの適用方法
あるサイト用にユーザーCSSを作成したら、そのサイト上で[右クリック] ⇒ [Edit Site Preferences] ⇒ [Display] ⇒ [My Style Sheet]から作成したCSSファイルを指定するだけ。
関連記事を読む
□ 「Operaはマイナー」 「Operaは遅い」 という人に伝えたい 『Operaは速くてクール!!』
□ OperaブラウザでFLASH広告・動画をデフォルトでブロック クリックするだけで再生できるCSS+JavaScript
















































![ヱヴァンゲリヲン新劇場版:破 EVANGELION:2.22 YOU CAN (NOT) ADVANCE. [Blu-ray]](http://ec3.images-amazon.com/images/I/31%2ByQte3wtL._SL500_AA300_.jpg)










![魔法少女まどか☆マギカ 6 【完全生産限定版】 [Blu-ray]](http://gongchengshi.cocolog-nifty.com/photos/uncategorized/2011/04/30/01.png)







![[カステルバジャック] castelbajac 長財布 056616](http://gongchengshi.cocolog-nifty.com/photos/uncategorized/2011/04/30/04.png)


