ChromeデベロッパーツールでCSS要素を特定してサイトを簡単カスタマイズ

Blogger
この記事は約5分で読めます。

WordPressでブログやサイトを運営している方にとって、サイトをいじるというのは大きな楽しみの一つでしょう。

タイトルの色やフォントを変えてみたり、ウィジェットのデザインを変えてみたり、プラグインを利用して新しい機能を追加してみたり、そんなことをしているうちに1日が過ぎてしまった方も珍しく無いでしょう。

こうした作業をする際に欠かすことができないのがCSSの操作でして、インターネット上には多くのサンプルコードがたくさんあります。

でも、どの要素を指定すればいいの?というところで躓いてしまうことが多々あります。はい、恥ずかしながら僕はずっとそれが分かりませんでした。

  

初心者が悩む「どの要素をいじればいいの」とは

例えば、投稿記事内の各タイトルの要素は、どのWordPressテーマでも基本的には同じで、「H1」とか「H2」といったタグが利用されています。タイトルの色を変えたいと思ったら以下のようにstyle.cssファイルに追記してあげればいいのです。

h2 {
    background-color: #57b196;
    border-left: 0 none;
    color: #fff;
    padding: 15px 30px;
}

でも、例えばサイトのここをいじりたい!と思った時にどうしましょう。

top-css

恐らくインターネットを探せば、CSSで色を変える時のコードは簡単に見つかります。

しかしながら、”ここ!”をどのように指定すればいいのか、というのはどのようにして探せばいいのでしょうか。

CSSの要素指定の仕方は意外と説明が少なかった

実は僕はこの”ここ!”がずっと分かりませんでした。そのため、利用しているテーマ名と変えたい内容をGoogle検索にかけて、先人の方々に習う形で対応していました。

でもこれだと困ることがあります。

  • 自分がいじりたい場所を言語化できない
  • 同じような変更をしている先人がいないと対応できない
  • 海外のテーマだととても難儀する

例えば”ウィジェットのこの部分!”は言語化が難しいですし、上手く言葉で表現できてGoogle検索をしても、同じことをしている先人がいなければアウトですし、さらには海外のマイナーなテーマを利用した日には探すのがとても大変です。

そういうわけで、素人でも、というか素人だからこそ自分がいじりたい場所の要素を自分で見るけることが大切です。そして労力が大きく落とせ、さらには応用も効かせることができるようになります。

Chromeデベロッパーツールの検証モードを利用したCSSを要素の探し方

で、もちろん僕もどうやって要素を特定すればいいのか、何度も調べたのですが、今ひとつ分かりませんでした。多くのサイトではGoogle Chromeのデベロッパーツール・検証モードを使えばいいと書いてあるのですが、検証モードのどこに要素が書いてあるのか意外と説明が無かったのです。(もしくは僕がずっと見落として続けていたか)

で、ある時ふと「あ、ここに書いてある!」ということに気づきまして、それ以来今までの労力が半減しました。

①Google Chromeの検証ツールを起動させる

まずChromeで検証モードを起動させましょう。

目的のページを開いた状態で、「F12」を押します。すると以下のような画面になります。

screenshot-css-1

この右側がいわゆる検証ツールです。このサイトのコードが細かく記載されていて、最初見ると頭が痛くなりますが、必要なところだけ説明していきます。

②自分がカスタマイズしたい場所の要素を特定する

では、ここから要素の特定をしていきます。

今回は『Read More』と記載されている場所の色を変えたいと思います。

まず検証ツール左上にある矢印ボタンをクリックします。この状態で左側に表示されているサイトの各場所にカーソルを移動させるとその場所にハイライトがつくと思います。加えて、該当する場所の要素が表示されます。

screenshot-css-2

そして、自分がカスタマイズしたい場所の上でクリックしましょう。

するとその場所に関するコードが右側に表示されます。各要素の説明は以下の通りです。

screenshot-css-3

まず左側に表示されているのが、該当部分に関する様々な要素のCSSコードです。

例えば「Read More」の文字のスタイルだけではなく、カーソルを上に乗せた時に色を変えたりすることもありますよね。そのためには別の要素で条件を指定してあげて、そこでスタイルを指定していきます。

さて、今回僕はテキストの色を変えたいので、「.entry-read a」という要素で指定します。基本的にこの左側に要素の一覧が出てきますので、それをコピーして、あとはお好みのCSSを指定すればOKです。

今回は例えばこんな感じ。

.entry-read a{
 color:#FFFF00;
 }

とりあえずテストで一時的な対応なので、違いが分かりやすいようにテキスト色を黄色にしてみましょう。

さて、その結果がこちら。

screenshot-css-4

ちょっとブラジルっぽい色になりました。とはいえ、目にうるさいのですぐに戻しますが。

こんな感じで、要素の指定ができれば、後はインターネット上でCSSコードを見つけてくればどんな場所にでも好きなスタイルを適用させることができますね。

おまけ:スマホ・タブレット画面で確認したい時は

ちなみにスマートホンやタブレットで”ここ!”という時にも同じツールを利用して要素を特定することができます。

screenshot-css-5

こんな感じで、検証ツール左上のアイコンをクリックして、サイズを指定すれば、その端末で表示される画面を見せてくれます。

この後の使い方は上記で説明したものと同じですので、がしがしお好みに合わせてカスタマイズしてあげてください!

ご質問はこちら Comment/Question

  1. […] » ChromeデベロッパーツールでCSS要素を特定してサイトを簡単カスタマイズ » WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方 […]

  2. […] ChromeデベロッパーツールでCSS要素を特定してサイトを簡単カスタマイズ […]

PHP Code Snippets Powered By : XYZScripts.com
タイトルとURLをコピーしました