CSSで変更したい要素を特定する方法(Chrome デベロッパーツール)

こちらの記事はブラウザ「Google Chrome」を使用している方向けの記事となります

 Wordpressでホームページを作成していると「ここの部分変えたいんだけど、なんて名前の部分なんだろう?」「プラグインの変更でデザインが変わっちゃったんだけど変更したいなぁ」と思うときがあるかと思います。

 ホームページを作るのにhtmlからすべて自作した場合は全容を理解した上で作成するのでわかりますが、Wordpressやホームページ作成ソフトで作った場合、テンプレートやプラグインがあるため大体のレイアウトは任せてしまえます。

 そこで簡単に修正したい箇所を特定するため、Google Chromeで使用できる「デベロッパーツール」のご紹介とともに動画にてどのように特定するかをご紹介いたします。

1.デベロッパーツールとは何か?

 デベロッパーツールとは

Google Chrome に組み込まれたウェブ作成およびデバッグツールのセットです。 
引用元:Tools for Web Developers

 利用できることは多岐に渡り、Webページで使われているソースの確認、ホームページの表示スピードの確認やJavaScriptのデバックなどが出来ます。

 WebデザイナーやWebアプリケーションエンジニアなどのプロも使用されるほどのものではありますが、一般の方でも全機能といえずとも自身のホームページのデザイン変更に役立てることが出来ます。

 今回は題の通りCSSで変更したい部分の特定方法についてご説明いたします。

2.使い方の手順

 初めて行う人もいらっしゃると思いますので、出来るだけ一からご説明するようにいたします。

 ① ブラウザ「Google Chrome」を立ち上げる。


 ② 右上部分にある「〇で囲まれている︙」→「その他のツール」→「デベロッパー ツール」の順にクリックする。
(Windowsの場合:「ctrl]+「shift」+「i」同時押し もしくは ページ上で右クリック→検証をクリック 
 Macの場合:「Command」 + 「Option」 + 「i」同時押し もしくは ページ上でCtr + クリック→検証をクリック)

 今回の例ではWindowsの場合でのご紹介とさせていただきます。
  1「Google Chromeの設定から開く場合」


  2「ページ上で右クリック→検証をクリック」した場合


 ③ 下記のようにデベロッパーツールが開かれます。
 ※ホームページによってはコピーガードのためにショートカットキーや右ボタンクリックを禁止しているページもあります。その場合は「Google Chromeの設定」から選択して表示させてください。

 


 これでデベロッパーツールを開くことが出来ました。
 次は今回使う部分の説明と使用方法について解説いたします。

3.使用部分の説明と使用方法について

 2.使い方の手順にてデベロッパーツールを開くことが出来ましたが、最初は何なのか全くわからないと思います。

 ここからは私のホームページの紹介もかねて、2019年7月現在のトップページから各使用する項目について説明いたします。


 赤枠部分のElementタブにHTML、青枠部分のStyleタブにCSSのソースが表示されています。
 上記のように表示されていない場合はElementタブ→Styleタブの順にクリックすれば同様に表示されます。

 
 デベロッパーツールの左上にある□と矢印が合体しているボタンをクリックすると各要素のHTMLとCSSを見ることが出来ます。


 試しにサイトタイトルがどのようなHTML、CSSで構成されているかを確認してみます。


 HTML、CSSともに表示が変わりました。
 ここで確認したいのが編集したい要素のHTMLとCSSがどのように記載されているかになります。 


 ここで要素名が「.site-name-text」であり、cssでどのように指定されているかわかることが出来ました。

 表示されているCSSを編集して要素の見え方がどのようになるか確認してみます。

 要素の大きさを変更されることが確認できました。
 変更したい要素名がわかったので該当されるstyleシートを変更するかカスタムCSSを変更すれば見え方を変更できます。

 私的にはカスタムCSSに追加し続けると今後ホームページの速度低下にもつながるのでstyleシートから直接編集することをお勧めいたします。
 なお、どのCSSを弄ればわからない場合はstyleから始まる部分にカーソルを持っていくとわかります。


 いかがでしょうか。
 Wordpressを使っているとどうしてもプラグインやテーマ頼りになってしまい、いざCSSを弄ろうと思ってもよくわからないことがあるかと思います。

 また、デベロッパーツールはプロの方も使用されている便利なツールです。ホームページの速度確認やエラー確認なども出来ますので是非一度触ってみてください。

 こちらの記事が皆様の少しでもお役に立てば幸いです。

 

 著者 : マエヒロ

 

コメント

画像を押して、質問に来てね!

タイトルとURLをコピーしました