こんにちは、ふろいどです。
WordPressでブログ作りをしていると、お気に入りのテーマを使っていてもだんだんと見栄えをカスタマイズしたくなってきます。
そんな時に必要となってくるのが、カスタマイズ対象のHTMLタグに適用されているスタイル要素(CSS)の確認です。
文字の大きさや色、背景色等はこのCSSを設定する事により自在に変更可能です。
今回は目当ての箇所に設定されているCSSの確認方法を解説します。
手順で使っている環境
本手順は例として、以下の環境を用いた手順をご説明します。
WordPressバージョン：4.7.4 テーマ ：Simplicity2 OS :MAC OS X (El Capitan) ブラウザ ：Google Chrome 58.0.3029.81 (64-bit)
これ以外の環境でも相当する機能や手順が存在することが大半なので、応用は利くと思います。
やろうとしていること
今回は例として、当ブログの[見出し２]のスタイルを確認したいと思います。
当ブログではWordPressのテーマに[Simplicity2]を使用しており、デフォルトではWordPress上で[見出し２]〜[見出し４]を指定した箇所は以下のような見栄えとなります。
スタイル要素の確認手順
まずはGoogle ChromeでWebページを開いてください。
次に、Google Chromeのデベロッパーツールを開きます。
右上のメニューから下図のように[その他のツール]－[デベロッパーツール]を選択してください。
画面右側にデベロッパーツールが開きます。
なにやら難しい文字列が羅列されておりますが、気にする必要はありません。
では次に、目的とする[見出し２]のスタイルを確認したいと思います。
デベロッパーツールではページ上の確認したいべき箇所をクリックすることにより、その箇所のスタイル適用内容を確認する事ができます。
下図のボタンを押してください。
これで、ページ上の確認したい箇所をクリックする事によりスタイル要素を確認できる状態になりました。
では[見出し２]が設定されている、”見出しレベル２”の文字列をクリックしてみましょう。
これでデベロッパーツール上に[見出し２]に定義されているスタイルの情報が表示されました。
早速内容を確認していきましょう。
上図は[見出し２]で定義された見出しの情報をデベロッパーツールに表示した結果です。
デベロッパーツール上部には、このページのHTMLソースが表示されています。
グレーがけされている行が現在選択している[見出し２]の部分となります。
<h2>見出しレベル２</h2>
と書かれていますが、WordPress上[見出し２]として指定した文字列は、このようにHTMLソース上では<h2>タグで囲んで表現します。
次にその下のスタイル要素の定義情報を見ていきましょう。
赤枠で囲った[CSSの定義情報]が<h2>タグに定義されたスタイルの情報です。
赤字で書かれているのが「プロパティ」で、文字の大きさ・色・背景色など変更したい様々な項目を指定できます。
その右側に”：”で区切られた後に書かれているのがプロパティの「値」です。
例えば一番上に定義された以下の記述を例にとります。
border-left : 1px solid #000
この定義値の意味は以下のとおりです。
プロパティ：左側の境界線
値 ： 1px(太さ) 、solid(1本線) 、 #000(黒のカラーコード指定 )
確かに[見出し２]の左側には黒の1本線がひかれておりますね！
もう一つ見ていきましょう。
font-size : 26px;
上記の記述は
プロパティ：表示する文字のサイズ
値 ：26px
という指定です。
この値を増減させる事により、表示する文字サイズを変更する事ができます。
また、上図の”font-size”は下の方にも同じ様に”font-size: 1.5em”が指定されていますが、取り消し線がひかれています。
スタイルは二重に定義することができますが、後で定義された方が優先され、先に定義したものは打ち消されます。
このため、取り消し線がひかれたスタイルは無効な状態ですから無視してください。
その他の個々のスタイルの意味は以下のサイトで調べるのががわかりやすいと思います。
[TAG index] CSSリファレンス
ただ、見られるようになったからと言って全てを把握する必要はありません。
後々、自分が変更したいと思った箇所のスタイル要素を確認する手段がわかったというだけで十分です。
以上でWordPressで作成したページのスタイル要素確認ができるようになりました。
定義されているスタイル情報が確認できたら、今度はこれをカスタマイズする方法が知りたくなりますよね。
スタイルのカスタマイズ方法は次回解説したいと思います！