初心者はカスタマイズしたいのに、CSSが反映されないって事があって…。（祖先）親要素（のセレクタ）を指定し、装飾すれば面白いほど自由に反映します！
HTMLタグを見て親要素を知り、スタイル指定方法の基本（子孫セレクタ・隣接セレクタなど）を覚えてください。簡単なブログ構造（親・子要素などの関係）がわかれば、第一段階突破です。
今使ってるWordPressテーマの構造を例にあげるので、基本である親子関係を理解してください。コレを見て意味を知れば、ほかのブログで言ってる事が理解できますよ＾＾
ブログ構造で親要素を見て、セレクタの付け方を理解
親・子要素・子孫に祖先・兄弟要素があります。HTMLから始まるブログの構造は、HTMLタグを入れ子にして階層化したものです。
- 装飾したい場所は、装飾したいタグの『要素』である
- その上の階層は、親要素に
- その下の階層は子孫要素
- 親要素・子要素の関係とは
- 『家系図』と思えば解りやすい。
同じ親要素内にある子要素同士は、兄弟要素。親の子は『子要素』。
親の子の子（孫要素）は、親要素の子孫要素。また、直結した上の階層になる要素は、祖先要素になります。
はじめに要素とタグを軽く説明しないと、大混乱ですよね♪『要素』の使い道の幅広さで大困惑して、教えてくれた人に冷たく怒られ、かなり悲しい思いをしました＾＾；
『タグ』と言ったり『要素』言った表現が様々あるので、超シンプルに説明します♪
要素とは何？タグと要素の説明
HTMLタグに囲まれたテキストだけでも、タグを含めても『要素』と言う。タグだけでも『要素』。HTMLの要素はブログ全体のHTMLでもあります。
HTMLタグとCSSのセレクタの関係で記してるとおり、『HTML』は『HTMLタグ』を入れ子状にしたブログの骨組みです。HTMLタグは初めと終わりのタグがありますよね。少し補足すれば下記。
<p class=”pink”>装飾されるテキスト内容</p>
HTMLタグは『開始タグ』と『終了タグ』に囲まれた要素（テキストや画像など…）をCSSで装飾できるのは、HTMLタグでマークアップした範囲を指定するからですね。
HTMLタグの開始タグ、囲まれたテキスト、終了タグ。これらは要素として表現されると覚えておきましょう！
開始タグ『<p class=”pink“>』段落pの（属性）クラス名が『pink』ですよって意味。“pink”は、ほかの名前とカブらないよう、自分で付けます。
クラスピンク.pinkをCSSで指定し、装飾すれば上の画像のように自由に装飾できます。自分でカスタマイズするときは下記。
- 投稿画面のテキストで装飾したい部分にHTMLタグ<p class=”pink”>などとつける
- マークアップしたタグ<p class=”pink”>ほげ</p>をセレクタ『.pink』で指定
- .pinkをスタイルシートで装飾すればOK
※下記は装飾例。実際にすれば『全ての段落が、ドッpink♡』になっちゃうので注意♪
.pink {
color: pink;/*fontの色*/
border: 1px solid pink;/*段落の枠線の太さ 線の種類 色*/
padding: 1em;/*枠線の内側は、フォント1文字文*/
border-radius: 3px;/*線の角、四隅の丸さ 3px*/
}
LINK目次：HTMLタグにclass名を付けカスタマイズしやすくする
HTMLの親要素と、子要素の関係を覚える
ブログは、HTMLの子要素に『head』と『body』があり、そのbodyの下層に、ブログタイトル部分のheader、#contents、#footerの、子要素のタグの階層があります。
これらはbodyの子要素、『#contents』の中には入れ子で#main『主要なコンテンツ』、#sub『サイドバー』の子要素があります。※この『子要素#main、#sub』から見た親要素は『#contents』
大枠bodyの中にもう1つ#footer『ブログの足元最下部』という子要素がありの子要素にはfooterがあります。※画像はHTMLタグを装飾するときに使う（Gush4の）セレクタで表示。
- HTMLは『ルート要素』って呼ぶ。らしい※記事下のほうで本を紹介
- ※『#contents』の中に兄弟要素の#main、#subがある。後述
- ※bodyからみれば、親要素がHTML<html lang=”ja”>
上の図をリストにしたものが下記です。その後、子孫、兄弟、先祖要素を見てくださいね。
- body
- .head-wrap（ヘッダー）
- #contentsの中身
- #main（メイン）
- #sub（サイドバー）
- #footer（フッター）
- footer
bodyの子孫要素は『.head-wrap』『#contents』『#footer』。『#contents』下層『番号付きリスト』の『#main』『#sub』。『#footer』の下層には『footer』
1『#main』と、2『#sub』は、兄弟要素
『#contents』『#main』『#sub』『footer』の祖先要素は、『body』
問題！HTMLタグの問いに答えてね＾＾
HTMLタグ問題。
- 段落<p>の子要素の開始タグはなぁんだ
- 段落<p>の親要素の『終了タグ』は何だ？
<section> <p>字を大きくしよう <span class="mojil">文字L</span> </p> </section>
答えはザックリ下記。
- 段落<p>の子要素の開始タグは
- <span class=”mojil”>
- （ちなみに装飾したい時使うシンプルなセレクタは.mojil）
- 段落<p>の親要素の終了タグは
- </section>
1問目は60点、2問目は40点！合計100点、おめでとうございまっす！
子孫要素の関係を覚える
リスト化することで階層を持たせて、どのタグがどの親、子孫になるかを見ると、迷いにくいかも知れません。
- HTMLのbodyの#contentsの子要素#main（主なコンテンツ部分）の子要素
#mainの子孫セレクタは、.article-wrap、article、ヘッダー（記事タイトル）、本文、本文下のカテゴリとタグ、アドセンスの下にパンくずリスト。そして、記事下の.article-underのSNS、著者情報などに続くのがGush4の構造って感じですね。
青の.article-wrapの子要素はarticle。青から見れば、子孫要素→緑、赤。
- .article-wrap
- article
- header：記事タイトル部分
- p段落
- h1タグ記事タイトル
- p段落
- .article-inner
- section
- 本文（本文中のh2やh3など）
- .cat_tag
- カテゴリとタグ
- section
- aside（アドセンス）
- footer（SNSのボックスの親要素）
- 記事下のパンくずリスト
- アイキャッチ背景のSNS
- .writer-box：著者情報
- header：記事タイトル部分
- article
右の画像はPCビューのbodyの表示です。body内の子孫要素#mainの部分に、左の画像の子孫要素が入れ子状に構成されてるんですね♪
左の画像。#mainの子要素には、.article-wrapの兄弟要素.article-underがあり兄.article-wrapの子孫要素ヘッダー、.article-inner、aside、footer。その後に（弟）の.article-underの記事下となります。兄弟要素は次。
兄弟要素を覚える
ある要素から見て、子要素が沢山ある状況が兄弟要素になります。上述でピンと来てましたか！？別のパターンで兄弟要素を見てみましょう♪
.article-underの子要素.relations。その子要素が兄弟要素
.article-wrapの下へと続く.article-underは関連ページの紹介、コメント、前の記事・次の記事が兄弟要素
- .article-under（本文の下）
- .relations（ 関連記事）
- .rel-title（h2タグ『こちらも読まれてます』）
- . rel-in（番号なしリスト『ul』のリスト）
- 『li』のなかに
- .rel-in-box（過去記事の画像とタイトルやリンクなど）
- 『li』のなかに
- .comment-wrap（コメント投稿）など
- ※子孫には（h3タグ）など
- 以降（略
- .relations（ 関連記事）
更にサイドバーで例えます。
HTMLのbodyの#contentsの子要素#sub（サイド）の子要素asideの子要素は、.side-leftと.side-rightになって、兄弟要素になります。
- #sub
- aside
- .side-left
- .side-sns
- h2
- .side-sns
- .side-right
- .side-contents
- 新着記事（h2タグ）（番号なしのリスト『ul』の『li』になってる）
- .side-contents
- .side-left
- aside
先祖要素の関係を覚える
祖先は、直結した親の親要素を祖先要素といいます。まずHTMLのbodyの#footerの中の子孫要素を見てください。画面最下部の『.footer-bottom』の祖先要素はどれになりますか？
footerの中に、.footer-wrapと.footer-bottomがある。
どっちが見やすいだろぉ？リストにしてみますね！
- #footer
- footer
- .footer-wrap
- .footer-in
- フッターの『h2やh3』タグSNSのボックスなど※ほか子孫要素は略
- .footer-in
- .footer-bottom
- コピーライト『©2015-2016 ビバ★りずむ』などがある
- .footer-wrap
- footer
.footer-bottomの親要素は、リストを見る限りfooterですよね。その親が#footer。
祖先要素は、#footerでした。これだけかなぁ！？っと思いきや。
親要素のfooter、それ以上の直結した要素、#footer、bodyも『祖先要素と呼ばれる』と後述の本で知りました。
さいごに
祖先、子孫、親、子、兄弟要素の関係とセレクタの指定を親テーマの記載と合わせて見たら、CSSが反映しないなんて事がグッと減りますよ。あとは、色々なセレクタの指定方法を知れば、CSSで装飾したい箇所を1人で出来るようになる第一歩です♪
ブラウザのキャッシュやサーバーのキャッシュが関係してる場合もあるけど、該当セレクタに祖先要素を指定する『子孫セレクタ』や『子セレクタ』（親要素hoge内の子要素gehoのみ全装飾）hoge > gehoなど指定すれば、カスタマイズの幅が広がります。
要素の検証で自分のテーマの親要素を確認したら、すんなりわかりますよ！要素の検証で、簡単なカスタマイズを実践したものも参考までにどうぞ♪
LINK超時短！！ブログのテーマカラー、背景色やボーダーを一気に変更する方法 #gush4
ほか、初心者が解りやすい優先順位について書きたかったけど、またいつか♪
それでは、かうたっくでした！
できるポケット HTML5&CSS3/2.1全事典 できるポケットシリーズ
Comments
かうたっく様
こんにちは。
いつもcocoonフォーラム拝見させていただいており、大変たすかっております。
私ごとで申し訳ないのですが、現在自作のハンバーガーメニューをヘッダーに表示させたいと思っております。（cocoonのデフォルトの機能だと固定ヘッダーでしかハンバーガーメニューを表示できないため）
それにあたってhtmlを〈head〉タグ内に記述するまでは分かったのですが、cocoonだとそれはどこから追加したらよろしいのでしょうか？？
header insert phpにhtmlを直接記述すれば良いのでしょうか？？
勝手な質問で申し訳ありません。
時間があり余っている時にでも返信いただけるととても嬉しいです…。。。
そこでもOKですよ
もしくはもっと簡単に、Cocoon設定・アクセス解析設定 タブにある ヘッド用コードに入れても良い感じですよん
頑張って(*´ω｀*)
かうたっく様
お忙しい中返信誠にありがとうございます！！！
そこでも大丈夫なのですね！
本当にありがとうございます！！