Google Chromeの「検証」機能が凄い!

投稿日: カテゴリー: Wordpress

ブラウザの開発用機能ってビギナーには本当に便利。

以前から、Adobe主催のセミナーなんかで良く耳にしていたが、WordpressのCSSをカスタムしていると本当に実感できる。
現在、絶賛勉強中の「テーマのオリジナルカスタム」において、例えば「サイトタイトルをWEBフォントでデザインされたモノに変更したい!」なんて事は当然ある。
今回はこんな感じで変更してみた。

  まず『Google Chrome』をインストール

でもって、自身のサイトを表示させ『右クリック』で【検証】を選択。

すると、開発用の分割画面が表示される。

で開発画面の左上に表示されている【四角に矢印】のついたアイコンをクリックし、サイト上で変更したい部分(今回はサイトのメインタイトル)にカーソルを動かすと…
なんと!現在、どのようなCSSが割り当てられているかペロペロッと表示してくれるのである!

あとは表示されたクラスと同名でプラグイン「オリジナルCSS」に記述してあげれば良いのだ。楽ちん。
基本的にテーマに記述されたCSSを元に、変更のある部分だけ「オリジナルCSS」のCSSが優先される。
なので、全てのCSSを記述しなくても、フォントファミリーとサイズだけ変更したければ、その2つを変更してあげれば良いのである。

具体的にはこんな感じ。

サイトタイトルは、Chromeで調べたところ「.site-title」というクラスが割り当てられていた。
因みに、Chromeのデベロッパーツールではツール上でCSSを触ることができる。実際に反映されることはないが、試しに「こんな感じ〜」の確認は目視で確認することができる。
実際に「.site-title」のフォントサイズを変更したら、目視で大きくなった事を確認出来た。
そこで、下記のソースを追加してフォントフェイスとサイズを変更。

で、次にデベロッパーツールでモバイル版に表示を切り替える。
解りやすいアイコンなので、どこにあるかは直ぐ理解できる。
すると、先に追加したCSSがモバイル版でも活きてしまう。
なので、さらに下記を追加。

これで、表示サイズが767px以下のデバイスではそれようのフォントサイズに指定できる。

 

WordPressにオリジナルのCSSを追加する分にはCSSを知っていればさほど難しくないけれども、すでに用意されたクラスなどが割り当てられている場合などはどのようなスタイルなのか、またクラス名は何なのかなどを知るには『Google Chrome』のデベロッパーツールなどは本当に便利だと思う。