- ツール→インターネットオプションを選択
- 全般のカテゴリーでユーザー補助をクリック
- ユーザスタイルシートのチェックボックスにチェックを入れる
- 適用されたいCSSファイルを選択
- ＯＫボタンを押す
ユーザースタイルシートをご存じですか？
ユーザースタイルシートというものをご存じでしょうか？どんなサイトも自分好みのデザインに変えてしまう究極のスタイルシートです。今回はユーザスタイルシートの使い方と、作るコツを紹介します。
何はともあれ使ってみる
とにかくユーザスタイルシートを使ってみましょう。まずは次のCSSファイルをダウンロードしてください。
このユーザスタイルシートを使うと、背景が黒、文字色が白のページに早変わり。あくまで効果を体感するためのものなので、実用性は無視してます。
IE6で使うには
IE6でユーザスタイルシートをつかうには以下の手順を踏みます。
firefoxで使うには
firefoxの場合、初期のままだと難しいので、エクステンションを導入します。
- インフォアクシアのサイトへアクセス
- Web Developerをインストール。方法はインフォアクシアのサイト参照
- 新しく追加されたツールバーのCSS→ユーザー定義のスタイルシートを追加する
- 適用されたいCSSファイルを選択
- 開くボタンを押す
＊Web Developer非常に便利なツールなので、サイト制作のお供に導入しておくといいでしょう。
Operaで使うには
Operaの場合は以下の手順を踏みます。
- ツール→ページスタイル→ユーザースタイルシートを指定
- 表示→スタイル→ユーザーモードにチェック
＊Operaの場合、標準搭載のユーザースタイルシートが充実しているので、最初からユーザーモードにチェックを入れていろいろ試せます。
お使いのブラウザーにあわせて試してみてください。
自分用ユーザースタイルシートを作る
作る場合は以下の３点を気をつけてください。
使えるセレクタは全称セレクタとタグのみ
classやIDは使い物になりません。なぜならサイトによって使っているclassは全然違うから。 全称セレクタとタグのみをセレクタに使用しましょう。
!importantを忘れるな
ユーザースタイルシートは制作者のスタイルシートより優先度が低いので、!importantを忘れると役に立たないことが多いです。全てのプロパティにつけておきましょう。
*{
background-color:#000000 !important;
background-image:none !important;
color:#efefef !important;
}
こんな感じです。!importantをつけたプロパティは何よりも優先されます。
過大な期待は禁物
ユーザースタイルシートはHTMLを正しく使っていないサイトに使うとむしろ逆効果な場合もあります。
ex：fontタグで文字の大きさを変えて見出しと本文の区別をつけている場合、見出しと本文の区別が付かなくなる
あまり過大な期待はせず、背景画像を消したり文字色を濃くして読みやすくする程度にしておくのが無難かもしれません。