ブラウザの開発ツールでCSSを確認する方法

B!
スポンサーリンク

サイトをカスタマイズする時にはCSSの調整は必須です。1からのサイト制作であれば問題ありませんが、既存のテンプレートを調整する時には、どのようなCSSでスタイルが適用されているか確認する必要があります。その時には、ブラウザで用意されている開発ツールを使います。

スポンサーリンク

開発ツールの表示方法

開発ツールは各ブラウザで利用方法が異なります。また、開発ツールには様々な利用用途がありますが、今回は各エレメントのCSSを確認するために利用するものとします。

Goole Chromeの開発ツール

Goole Chromeの開発ツールを利用するには、メニューバー > 表示 > 開発/管理 > デベロッパーツールをクリックしてください。

クリックすると開発ツールが表示されます。

ちなみに...
右クリックが禁止されていないサイトであれば、サイト上で右クリックして、検証をクリックすることで開発ツールを開くことも出来ます。

開発ツールには複数のタブが表示されていますが、ソースコードやCSSを確認するためには、Elementというタブをクリックします。

Firefoxの開発ツール

Firefoxの開発ツールを利用するには、メニューバー > ツール > ウェブ開発 > 開発ツールを表示 をクリックしてください。

ちなみに...
右クリックが禁止されていないサイトであれば、サイト上で右クリックして、要素をち調査をクリックすることで開発ツールを開くことも出来ます。

Safariの開発ツール

Safariの開発ツールを利用するには、メニューバー > 開発 > Webインスペクタを表示をクリックしてください。

ちなみに...
右クリックが禁止されていないサイトであれば、サイト上で右クリックして、要素の詳細を表示をクリックすることで開発ツールを開くことも出来ます。

Internet Exproler(IE)の開発ツール

IEでは、F12キーを押下することで開発ツールを表示することができます。

スポンサーリンク

開発ツールで要素を調査する方法

Google Chromeを例として紹介しますが、ほとんどの開発ツールで同じように操作することができます。

Diverでは、カスタマイズより基本的な色は変更することが可能ですが、細かい箇所に関してはCSSで調整する必要があります。
例えば、下記のような検索ボタンの色に関して、

検索ボタンはCSSで青色に指定されていますが、この色がサイトに合わないから変更したい場合には、開発ツールで要素のCSSを確認しましょう。


要素検証ボタンを押します。そのまま調べたい要素をクリックするとその要素のソースコードやスタイルが表示されます。

下記のようなスタイルが確認出来ました。
ボタンに適用されているす

input[type="submit"].searchsubmit {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 45px;
    padding: 0;
    background: url(images/search_w.png) no-repeat 50% 50%;
    background-size: 17px;
    background-color: #3c74ad;
    border-left: none;
    border-radius: 0 3px 3px 0;
}

色を変えたいだけので、必要なCSSのみを確認します。

input[type="submit"].searchsubmit {
    background-color: #3c74ad;
}

追加CSS、子テーマのstyle.cssもしくはカスタムCSSにてスタイルを上書きすることが出来ます。

 CSSは適用される優先度があります。カスタマイズ等で変更出来るスタイルは、カスタマイズの設定が最優先されます。

CSSを上書きする時の注意点

全てのスタイルはCSSで変更することができますが、それが最善の方法ではない場合もあります。
ヘッダーの色を変えたい時に、要素を調査すると、下記のようなCSSを確認することが出来ます。

各スタイルの右上に、記述されているファイル名が記されています。

このCSSは親テーマのstyle.cssに記述されているので、子テーマのstyle.cssやカスタマイズ > 追加CSSから上書きすることができます。


このスタイルは、ファイル名が表示されずにドメインと行番号が表示されています。
だからこれはスタイルシートで記述されたものではなく、カスタマイズで出力されているものだということが分かりますので、子テーマのstyle.cssやカスタマイズ > 追加CSSから上書きすることができません。
今回の場合には、背景色と文字色のみがカスタマイズで出力されているので、カスタマイズ > 基本カラー から調整することができます。

 わからない場所があればお気軽にご連絡ください。
あなたはそのサイトで満足していますか?

サイトはただ作るだけで満足ですか?あなたのコンテンツはとっても有益なものがたくさんあります。よいコンテンツも埋もれてしまっては全く意味がありません。
Diverを使えば、SEO対策はもちろん、ユーザビリティーを考えられたデザインで、サイト回遊率、直帰率、再訪問がアップします。アフィリエイターだってブロガーだって関係無しです!!しかし、スケールの小さいサイトを量産するような方法には向いていません。サイトを育てて、長い間愛されることの出来るコンテンツを作成出来るのは、このDiverだけです。

スポンサーリンク
最新の記事はこちらから