どうも、ぽっぽです。
ワードプレスで子テーマを使ってスタイルを指定する手順を説明しました。
さらに、具体的なスタイル変更をいくつかのテクニックを交えて説明します。
ワードプレスの知識はほとんど関係ありません。ワードプレスで必要だと思ったスタイル変更を例にしているだけです。
スタイル変更に役立つchromeのDevTools
まず押さえるべきは自分がスタイル変更したい箇所についての情報を確認することです。
僕が使っているのはchromeのDevToolsです。
ブラウザでchromeを使っている人は、何もインストールする必要がありません。
DevToolsの起動方法
確認したい箇所にマウスポインタをあわせて右クリックメニューを表示して検証を選択します。
そうするとこのようにDevToolsが表示されて、ElementsタブにHTML情報、左のペインのStylesタブにスタイル情報が表示されます。
Elementsタブで確認した箇所を選択することでも、選択した箇所のスタイルが確認出来ます。
DevToolsの表示場所変更
DevToolsは初回は画面の下にくっついて表示されます。
僕はウインドウを別々にしたほうが好みなので、別々にする方法があります。Customized and control DevToolsを表示して、Dock sideで 一番左にある□が重なった表示のアイコンをクリックします。
Dock sideは左右や下、別ウインドウなどに選択出来ます。お好みの場所を選んでみてください。
フォントの大きさ変更
文字の大きさは既に変更しましたが、クラス名を探す手順を説明します。
Elementsタブで、マウスを移動すると要素の範囲がハイライトされます。これで、コンテンツの記事のクラス名が「entry-content」だと分かったのです。
このため、entry-contentの文字の大きさを指定しました。
見出しのスタイル変更
見出しのスタイルを変更してみましょう。
僕の場合このようなスタイル情報です。マウスで選択してコピーするとインデント情報と合わせてコピー出来るので、スタイルにそのまま貼り付ける事ができます。 インデント情報とは、空白などでまとまった範囲の先頭の位置を揃えることです。
インデント情報はなくても機能しますが、見た目が分かりやすくなりメンテナンス性が向上します。
このように、参考にしたいブログなどを表示してスタイルを確認し、自分のブログのスタイルに利用することが出来るようになりました。
スタイル変更の基礎知識
僕の経験からスタイル変更の基礎知識をご紹介します。
CSSのセレクタ、プロパティなどの基本的な用語の説明は省きます。ある程度知っていることを前提とします。
CSS（カスケーディングスタイルシート）とは
文字の大きさや色など見た目を設定する仕組みのことです。基本的にはHTMLの属性（DIVタグ、SPANタグ）ごとにスタイルを指定します。
HTMLはタグが入れ子の形になっており、一例としてBODYタグの内側にDIVタグ、さらに内側にSPANタグのようになっています。カスケードとは外側で指定したスタイルは内側のタグにも適用されることを意味します。
こうすることで、すべてのタグごとにスタイルを指定する必要はなく、共通のスタイル指定であれば外側で大きく指定してしまえ良いのです。
部分的にここだけスタイルを指定したいという要望は使っていくと出てくるものです。そこで、スタイル定義には指定の優先順位という仕組みがあります。
また、なるべく広い範囲でスタイルを指定することを考えるのでなく、狭い範囲でスタイルを指定するほうがコントロールしやすいです。
スタイルの要素指定の優先順位
- スタイルは上書きされるので後に書いたほう優先
- HTMLタグ指定＜クラス名指定＜ID指定（低い＜高い）
- 指定する条件が複雑なほど優先
同じスタイルのセレクタなら、後に書いたほうが上書きされるので優先されます。
次にHTMLのタグより、クラス名で指定したほうが優先で、IDで指定したほうがより優先です。
そして、最終的な手段で、条件が複雑なほど優先られます。
見出しのセレクタをみると
.entry-content h2 {
background: #f7f7f7;
padding: 20px 15px 18px;
color: #333;
border-left: 9px solid #4865b2;
line-height: 40px;
}これは、「クラス名entry-contentであり、h2タグでもある要素」のセレクタ指定です。h2と単純に指定していたり、.entry-contentと指定したスタイルより優先されます。
このことに気がつくと、「なんで反映されないの？」ということから開放されます。スタイルが変更されない場合、より複雑な条件を指定してみましょう。
いかがでしたでしょうか。スタイル指定は以上のことが分かっていると、「いい見た目だな、どうなっているんだろう」という興味と、「自分でも使ってみよう」という気持ちになりませんか。
