2010年05月15日

ユーザースタイルシート入門 Googleの検索ツールを非表示に

 普段ブラウザーで閲覧しているウェブページは、ページの内容や構造を表すHTMLファイルと、書式情報を表すスタイルシートなどで成り立っています。ページの内容も書式も、普通はウェブサイトの作者が決めるものです。しかし、ブラウザーを利用しているユーザーが、見栄えを変えられるようにした機能というものが存在します。ちょっとしたものでは、ブラウザーの文字の大きさを変えるとか、リンクの色を変えるというものもありますが、実はもっと本格的に見栄えを変えることができます。ユーザースタイルシートは、それを実現するための機能です。これをつかうと、ページの見た目を大幅に変えたり、広告を消すこともできます。
人気ブログランキング

 ユーザースタイルシートはブラウザーの設定のようなものですので、それを適用したブラウザーで見たときのみ表示が変わります。Aさんが作成したサイトをBさんとその他大勢が見ている場合、Bさんがユーザースタイルシートを適用すると、Bさんだけ表示が変わります。なお、自分の好きなように見栄えを変えるには知識やテクニックが必要ですが、設定自体はそこまで難しいものではありません。

UserStyles.png


 ユーザースタイルシートは、Internet Explorer(IE)でも使用できるのですが、IEの場合は設定がすべてのサイトに及んでしまいます。さらに、スタイルシートの解釈がいい加減であるため、IEを使用するのはやめておいた方がよいでしょう。ここでは、Firefoxを使用して説明します。Firefoxでは、サイトごとに、あるいはページごとに書式を設定することができるので扱いやすいです。

 設定にはテキストファイルを編集することで行うので、テキストエディターを用意しておきましょう。なければメモ帳でもできるとは思いますが、EmEditor Freeがお勧めです。さて、編集するファイルは結構ややこしい場所にあります。下記に場所を示しますが、GombeiはWindowsにログインしているユーザーの名前、RondomStringは英数字のランダムな並び、ProfileNameはFirefoxで使用しているプロファイルの名前です。この3つのフォルダーは人によって変わってしまうのですが、1つの上のフォルダーを開いてみれば適切なものがどれか分かると思います。たとえば、Windows 7であれば、Cドライブのすぐ下にある「ユーザー」というフォルダーの下に自分の名前のフォルダーがあると思いますので、それを選択して進んでいって下さい。また、途中に隠しフォルダーもあるので、隠しフォルダーを表示する設定にしておいて下さい。

Windows 2000, Windows XP
C:\Documents and Settings\Gombei\Mozilla\Firefox \Profiles\RondomString.ProfileName\chrome\userContent.css

Windows Vista, Windows 7
C:\Users\Gombei\AppData\Roaming\Mozilla\Firefox\Profiles\RondomString.ProfileName\Chrome\userContent.css

 chromeフォルダーまでたどりついても、userContent.cssは存在しないと思います。ただし、userContent.cssのサンプルファイルがあると思いますので、それをコピーして、名前を[userContent.css]をにします。次にユーザースタイルシートをテキストエディターで開きます。

 既にファイルにはいろいろと書かれていますが、ファイルの最後に次の文字列を入力して下さい。これは、Googleの検索結果において検索ツールを非表示にする書式です。
@-moz-document url-prefix("http://www.google.co.jp/search")
{
  #leftnav { display:none !important; } /* 検索ツール非表示 */
  #center_col { margin:0em !important; } /* 検索結果一覧の左の縦線を消す */
}

 これを書き加えたら、userContent.cssを保存してFirefoxを再起動します。Google検索して、左側に表示されていた検索ツールがなくなっていれば成功です。

HideTools.png
web拍手 by FC2
posted by 北条利彦 at 09:57 | Comment(0) | TrackBack(0) | ウェブブラウザー | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。