web-dev-qa-db-ja.com

ブラウザでのユーザースタイリングのためのCSSを理解する

Webブラウザの特定のサイトの外観に特定の変更を加えたい。このサイトはCSSを使用しているので、ユーザーのCSSオーバーライドを作成する必要があると思います（これが間違っている場合は修正してください）。

私のブラウザはFirefox（chrome/userContent.cssで何かを書くべきだと思います）とChrome（User\ StyleSheets/Custom.css）です。

私がしたい特定の変更は、 https://unix.stackexchange.com/ のすべてのページの背景パターン（暗い点）を削除することです。しかし、より一般的には、釣りをする方法を教えてください。変更するパラメーターを見つける方法と、ユーザーcssにこの変更を書き込む方法を教えてください。

firefoxgoogle-chromehtmlcss
13
Gilles 'SO- stop being evil'

Firefoxが私のメインブラウザであるため、Firefoxに精通していることしか話せません。私はあなたの「魚を教えて」という要求を満たすために、ここで物事を一般的に保つように努めます。そのために、2つの例を紹介します。あなたの例と、より現実的なレッスンが含まれている例です。まず、ユーザーのCSS作成を簡単にするためのツールをいくつか紹介します。

  1. 最新のFirefoxに更新します。最近のバージョンのいくつかは、Webサイトインスペクターツールの拡張が行われているので、それらが必要になります。
  2. オプション： Firebug拡張機能 をインストールすると、はるかに強力なサイトインスペクターツールが提供されます。 （個人的には、ユーザーCSSの作成にFirebugを使用していませんが、完全を期すためにここに言及します）
  3. スタイリッシュな拡張機能 をインストールします。これはユーザーCSS中心の拡張機能であり、ユーザーCSSの作成を大幅に簡素化します。

さて、実際に何かを書くこと。先に進む前に、HTMLとCSSの基本的な知識が必要です。 W3Schoolsには、 [〜＃〜] html [〜＃〜] と [〜＃〜の基本的な構造と構文に慣れるための適切なチュートリアルがあります。 ] css [〜＃〜] 。この答えのために、例を達成するのに十分な初心者を助けるのに十分な情報を含めます。

  1. ページに移動します。 （あなたの場合、 https://unix.stackexchange.com/ ）
  2. 操作しようとしている要素を右クリックします。 （この場合、背景がページ全体に影響するため、ページのほぼどこにでもあります）
  3. ポップアップメニューから[要素の検査]を選択します。これはFirefoxの統合された検査ツールを使用します。ここではFirebugについては取り上げませんが、同様のペインと機能があります。
  4. これにより、Firefoxウィンドウの下部と側面にパネルが開きます。下部に、HTMLが表示されています。右側には、選択したページ要素のCSSルールが表示されています（これは右クリックしたものになります）。下部で、さまざまな要素をクリックして移動します。ページは要素のツリーに編成されており、ツリー内の各ノードを折りたたんだり展開したりできます。要素をクリックすると、選択した要素がページ自体で強調表示されます。
  5. 一般に、この時点で、操作しようとしている要素とその親要素（ツリー内にその要素を含むアイテム）を検査する必要があります。実際に操作する必要のある要素を特定します。たとえば、このページの回答をいじっている場合は、回答のテキストを含む<p>要素から始めることになりますが、テキストの周りにすべてのものを含める必要があります。 /下向き投票矢印、投稿者の情報、共有/編集/フラグのリンクなど。したがって、IDが「answer-」である<div>タグに2、3レベル上に移動します。 #### "および" answer "のクラス。これは、回答のすべてのウィンドウドレッシング要素を含む要素です。それをクリックすると、Webページのその部分が強調表示されます。 （この場合、ページの背景は上部近くになります<body>タグ内。HTMLの上部までスクロールします。 <body>タグをクリックします。）
  6. 次に、操作するこの要素のCSSプロパティを特定する必要があります。右側のCSSを見て、変更するプロパティを見つけます。個人的には、私はCSSにかなり慣れていないので、この時点で、プロパティとその動作について詳しく知るために、「css」+プロパティ名をグーグルで検索することがよくあります。 SEの回答を見ている私の例を続けて、回答の周りのマージンを変更したいとしましょう。 all.cssファイルのmarginプロパティは0pxに設定されていますが、これらの要素の周囲には明らかにマージンがあります。いくつかのグーグルは、パディングプロパティを探すように教えてくれます。パディングプロパティはアイテムの周囲のマージンにも影響を与える可能性があるためです。案の定、回答に設定されるパディングに関連する2つのプロパティ、padding-bottomとpadding-topがあります。 （特定の問題については、背景画像を探しているので、CSSプロパティで「background」を探してください。「background」プロパティが表示されます。 -）上部近く。そのページの本文要素に適用されます。グーグル "css background property" は、そのプロパティがどのように機能するかを学習し、色を含めることができることを示します。画像へのURLとさまざまな修飾子。 background-image プロパティがどのように機能するかを掘り下げるために少しナビゲートすると、いくつかの有用な情報が表示されますデフォルト値の「none」。背景画像をデフォルト値に戻したいので、その情報が必要になります。）

  7. 今はStylishを使用しています。 Stylishを使用しない別の方法は、回答に投稿したファイルを編集することです。スタイリッシュなため、多くのサイトのユーザーCSSを簡単に管理できます。 StylishはFirefoxウィンドウに小さなアイコンを追加し、それをクリックして「新しいスタイルを書く」->「（このサイト）.com」に移動します。スタイルに名前とオプションでいくつかのタグを付けます。そうすると、次のことができるようになります。このスタイルをSuperuser.comやStackexchange.comなどに適用されるスタイルとして区別します。このウィンドウには、このドメイン専用のCSSを変更できるテンプレートが表示されます。特定のURLのCSSを変更する必要がある場合は、それを行うことができます。または、すべてのサイトに適用されるCSSを記述したい場合は、空白のスタイルを取得することもできます。スタイリッシュメニューから適切なエントリを選択するだけです。私の回答変更の例では、次の内容を含むテキストボックスが表示されます。この：

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}

    @ -moz-documentブロックに入れられたものはすべて、括弧内のドメインにonlyが適用されます。上記の太字の項目を参照してください。回答のパディングを変更するには、テキストボックスを次のように更新します。

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}

    CSSを知らない人のためにこれを分解するために、最初にクラスを選択します（最初に「。」を付けます。 IDで選択していたので、そこに「＃」を入れました。）answer（so'answer '）。次に、中括弧でブロックを開いて、変更する選択したアイテムのプロパティを一覧表示します。まず、padding-bottomを変更し、0ピクセルに設定します。次に、padding-topについても同じことを行います。各プロパティと値はセミコロンで終わります。次に、中括弧でブロックを閉じます。 （UNIXの例では、次のようにします。

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}

    ここでは、unix.stackexchange.comドメインで作業しています。 「body」要素を選択しています（HTML要素を選択する場合はCSSセレクターでもあるため、ここでは#sや.sは必要ありません）。背景をnoneに設定しています。）

  8. スタイリッシュなスタイル編集ウィンドウの下部にあるボタンに注目します。 「プレビュー」では、入力した変更が適用されるため、実際の変更を確認できます。 「保存」は変更を保存します。 「キャンセル」はかなり明白です。実行しているほとんどすべてのユーザーCSS変更については、[プレビュー]をクリックして、変更が希望どおりに機能したかどうかを確認する必要があります。どちらの例でも、機能しなかったことがわかります。これには重要な理由がありますが、これについては今説明します。

  9. CSSには、ユーザーCSS、作成者CSS、ブラウザーCSSの処理方法を決定するための優先順位の特定の階層があります。通常、ページの作成者によって作成されたページのCSSがあり、そのページの多くの要素のルールが含まれています。ルールが作成者によって定義されていないが、ユーザーのCSSにある場合、ブラウザーはそれを使用します。どちらもその要素に対してCSSが定義されていない場合、ブラウザーはその要素に対して独自のデフォルトのCSSルールを使用します。したがって、ここには重みの階層があります。作成者>ユーザー>ブラウザです。 3つすべてで何かが定義されている場合、重みの大きいCSSが優先され、CSSが有効になります。重みの小さいCSSを取得して重みの大きいCSSをオーバーライドする方法があります。それは、それらを重要に指定することです。これを行うには、次のように、各CSS宣言に「！important」を含めます。

    @namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}

    もう一度[プレビュー]をクリックすると、ユーザーのCSSが機能することがわかります。 [保存してお楽しみください]をクリックします。

Chromeを使用している場合、その組み込みのインスペクターはすでに非常に優れています。 スタイリッシュな拡張機能 もあります。 CSSの変更を少し異なる方法で入力します。[インストールされたスタイルの管理]を選択し、[新しいスタイルの書き込み]をクリックして、コードボックスの下に投稿を適用するサイトまたはURLパターンを入力し、[コード」ボックス、例：.

body {
  background:none !important;
}
15
Keen

サイトに次のものを配置した場合と同じように実行します。

foo.bar { background-pattern:none; }

そして、追加します

!important

の前に }。これが 少し詳細 非ユーザーCSSの使用についてであり、それでもあなたの使用について説明しています。

2
tobylane

firebug をインストールして関連するCSSプロパティを識別し、それをオーバーライドする greasemonkey スクリプトを記述します。

2
Benjamin Bannier