ユーザスタイルシートを使ってみよう

ユーザスタイルシートとは

User Stylesheet

ネットサーフィンをしていて、「うわ、このサイト滅茶句茶見にくい」とか「文字が小さくて読めない」、「色使いが酷くて目が痛い」という経験はありませんか？

そういった問題は、ユーザスタイルシートを対象のサイトに適用する事によって簡単に解決する事が出来ます。 ユーザスタイルシートを用いると、どんなサイトでも常に同じ外観を維持できるため、ネットサーフがぐんと楽になります。

メリット

• 背景色や背景画像を自由に変更できるので、見やすい背景にできる
• フォント弄り系のスタイルを無効化できる
• アンカー（リンク）を簡単に見つけられるようになる
• サイトの構造を把握しやすい

デメリット

• 全て同じスタイルになると、時々何処のサイトにいるか分からなくなる
• 適切にHTMLでマーク付けされていないサイトでは、フラットな構造になってしまう。

適用してみる

まずはサンプルをダウンロード

usr_simpleblue.css [4.3Kbyte]

IEに適用

1. 『ヘルプ(H)』→『インターネットオプション』を開く
2. 『全般』タブの『ユーザー補助(E)』をクリック
3. 『自分のスタイルシートでドキュメントの書式を決定する(D)』のチェックボックスをonにする
4. 『参照』ボタンを押し、ローカルディスクから適用したいCSSファイルを決定する
5. 『OK』を押すと、スタイルが適用される

適用した例

自分で作ってみる

簡単なものから

とりあえずあらゆる要素を考えるのは面倒なので、背景画像を好きなものに変えるスタイルシートを作成してみましょう。

body{ 
  background-image: url(c:\My Documents\wall.jpg) !important;
  background-attachment: fixed !important;
  color: black !important;
}

これをテキストエディタにコピー＆ペーストして、適当な名前で保存してください。拡張子は[.css]にします。 url()の括弧の間に、「http://〜」でも「c:\〜」でも構わないので、使いたい画像のアドレスを記述します。 必要ならば、colorの後の色名を変える事で文字色も任意のものにできます。 あとはこのスタイルシートを上記の方法で実際に適用すればOKです。

背景を変えた例

猫式空間トップページに適用。まあ、サンプルに使った画像に関するツッコミは無しということで。

更に詳しく知りたい方は

CSSのプロパティに関する細かい説明は省略します。 更なる情報を得たい方は、下記のサイトを参考にして下さい。

• スタイルシートWebデザイン
• ユーザースタイルシートのススメ