親要素の指定方法！ブログ初心者にCSSのセレクタ簡単な付け方を説明

ブログを見ていると、親要素という単語を見かけます。カスタマイズ初心者は、親要素を見つけるのが得意ではないので、超簡単にそれを見るける方法を書いていきますね。

ここでは、文章を書いてる部分コンテンツ範囲でのセレクタの付け方をメインに見ていきましょう！

親要素とは！？

まず親要素とは何なの！？ですよね。これはHTMLの『子にあたる部分（要素）』を『囲む要素が親要素』、ブログの構造を階層化すれば解りやすいので、下記の黄色の部分が親要素になります。

<div class="oya">ここは親要素
    <div class="ko">ココは子要素
        <div class="mago">ここは孫要素</div>
    </div><!--.ko終了タグ--->
</div><!--.oya終了タグ--->

親要素のクラスoyaは、『子要素たち』を囲んでいるのが解ります。

孫要素magoからみれば『子要素ko』と『子要素の親oya』が親要素。逆にoyaから見れば『子要素ko』と『孫要素mago』が子要素。ko・magoは、oyaの『子孫の要素』なのでどちらも子要素です。

HTMLタグを指定し装飾する範囲を決めるセレクタ

セレクタは、HTMLタグの部分（要素）を装飾する範囲を決めるときに使います。文章を書く部分コンテンツには、h見出し・p段落・olやulのliリスト・blockquote引用・aリンクなど色々なタグがあって、どこを装飾するか範囲を決めてあげます。

<div class="content">
    ここは親要素
    <h2>h2タグだよ</h2>
    <p>段落</p>
    <ol>
        <li>親はol番号リスト、これは項目で、olの子要素ね。</li>
    </ol>
    <blockquote>
        <p>『引用』の段落</p>
        <p>引用元：<a href="#">引用の段落のリンク</a></p>
    </blockquote>
</div><!--.content終了タグ--->

例えばh2タグを装飾したいとき、<h2>h2タグだよ</h2>このh2に囲まれた『h2タグだよ』を装飾するため、CSSにはh2{color: red;}などと書きますよね。装飾する範囲は、『h2』と指定するのがセレクタです。

HTMLタグの親要素を付けて、CSSで装飾の範囲を決める

HTMLタグはブログの至るところに、点在しています。例えばul li番号なしのリストは、リストの前の『点リストマーク』を消すことによって、ナビゲーションや、サイドバーなどの縦並び、Gushでは記事下の関連記事にも使われます。

• ←これがカスタマイズしたul liリスト
• このマークを消して横並び、縦並びにしてる状態
• 見た目が違うのは、CSSで場所を指定し装飾してるから。

ただ親要素をつけずに、番号なしのリストを指定しul li{color: blue;}とul liのフォントを青く指定しても、全く反映しません＾＾；

親要素を『それぞれの領域』ナビゲーションや関連記事のみに反映させる！と指定しないと、全てのリストが青くなってしまうからです。だから元々『それぞれの領域を指定するため』に『親要素』を指定します。

CSSで親要素を指定するには、どこを見れば良い！？

CSSで装飾の範囲を決めるのに、親要素が必要なときはHTMLを見たら良いんですね。WordPressならダッシュボード内の『外観』『テーマの編集』コンテンツ部分関連でしたら、『個別投稿 single.php』です。

single.phpの<?php the_content(); ?>を探して、コンテンツの親要素を調べる方法

こんなの解んない(*’ω’*)

ってなっちゃうかもしれないので、次も説明しますね＾＾；

超簡単！！テーマのCSSで指定している親要素を見る

HTMLでは見てもチンプンカンプンになるので、テーマのCSSを開きます。子テーマを使っているなら『親テーマのCSS』です。そこでカスタマイズしたい要素の親要素に、何を指定しているか見ればOK！ですね。CSSの親要素は例えば下記。

.hoge(親要素) ul li

装飾したいのがリスト、ulのliなら『ul』で検索します。

※WindowsならCtrlキー＋Fキーで検索。

これで簡単に解る場合もありますけど、ブログ画面を見て『ココをカスタマイズ』したい場合もあったりしませんか！？

ブログ画面上で装飾したい場所の親要素を見る方法もオススメ！

初心者は、要素の検証を使ってカスタマイズするのが一番解りやすいので、激オススメします！親要素を知るには、F12キーをクリック。詳しい使いかたは、要素の検証の使いかたで説明しています。（また下記画像の文も参考にどうぞ＾＾）

画像の上部青いトコロをみてください。ul liの要素リスト、またその前のリストマークなど指定してクリックすると、画像のように要素の検証画面のスタイルにCSSが出てきます。

次は画像の下部。このブログは、.article-innerを親要素として指定してるのが解ります。

また要素の検証画面、HTMLタグの横、三角マークを展開すると▼になり子要素を表示します。開いてみたら該当ぶぶんの親要素が解りやすいですね。Gush4では下記のとおりですけど、使ってる人が少ないのでやり方の参考まで＞＜

Gush4の記事の親要素。関係ないけど記事下・サイドバー

上記の検証画面にマウスを置いて動かしていくと、ブログの画面がどの部分か親要素や領域がわかりますよ。

親の領域が要素の検証で解るgif画像

ゆっくり検証画面のHTMLタグにマウスを置いて動かしてる様子です。どの範囲を装飾したいか領域を指定しやすくなりますね。細かい部分は展開すれば見られます。

コンテンツ内に指定する領域を作りたい！

ブログの投稿画面での装飾は、自分で親要素を作って反映させる領域を作ってカスタマイズすることも可能です。

• <div class="hoge">ここをカスタマイズ</div>
• <span class="geho">この領域を装飾</span>

※divとspanの違いが気になるかたはリンク先でご確認ください＾＾

"ローマ字"で名前を入れて、セレクタで指定すれば装飾できます。ローマ字部分は、属性値と言って書きかたは下記をどうぞ＾＾

LINKHTMLの要素！属性、属性値とは！？class名を複数設定するHTMLの書き方

領域の指定で孫要素を含めるか、子要素のみを指定したい場合のセレクタ

セレクタの指定方法は、直下の子要素のみを指定する場合は子セレクタ>という方法で指定し、子要素・孫要素たちまで反映させたい場合は、子孫セレクタという方法で指定します。

LINKCSSの基本、子セレクタの説明！初心者向け、子孫セレクタとの違い付き

さいごに

HTMLタグを確認してCSSで反映させるには、親要素で指定する領域を決めたら、他の領域には反映させずに済みますよね。

超カンタンに親要素を見るには、

• CSSで親要素を確認する。
• 要素の検証を使う。

要素の検証で確認したい場所をクリックして、親要素をHTMLタグにマウスをあてて、どの領域が親にあたるかを上へ上へと調べていき、ブログで確認すれば親要素がみつかりますよ！

それでは。かうたっくでした＾＾