Cocoon見出しのカスタマイズ：hタグ装飾が反映しないとき試す（セレクタ）指定方法

WordPressテーマCocoonを使い参考にしたページの通り見出しの変更をしたけど、うまく反映しないのはなぜ？？と装飾し始めた頃は思うかもしれません。

大半の原因は以下の通り。

1. hタグの指定（場所）方法が間違っている
   • 優先順位が（親テーマ・自身のカスタマイズより）低いなど
2. プラグインで出力した見出し
3. ゴリゴリにテンプレートファイルをカスタマイズしてもらった
4. 反映しない場所に書いている

2・3は別のとしCSSが反映されない原因は、以下リンク先の冒頭とこのページにもアチコチ書いてます。

LINKCSSが効かない原因！反映させるため、ブログ初心者さんが確認する7つのこと

Cocoonデフォルトの見出しを使って、hタグが反映されない原因：指定方法の間違いの対処法をチェックしてください。※原因は膨大にあるのでよくありそうなのだけピックアップしました。

順番に見るとCSSの事が徐々に理解できるようになるかもです❦頑張れ～

ウィジェットを使用した個別見出し指定方法は割愛します。

CSSの優先順位を簡単に説明

コピペしたCSSをそのまま貼り付けたらスタイルが反映しない。。どうして？？と思いますが、CSSの指定方法が弱いのが原因の1つです。

強い順に指定方法を書くと以下の通り。

• HTMLに<h2 style="color: #fff;">などスタイル属性が書いてある
• CSSの指定方法が#main .article h2 {}
• CSSの指定方法が#main h2 {}
• CSSの指定方法が.article h2 {}
• CSSの指定方法がh2 {}

こんな順番でCSSの強さがドンドン弱くなります。詳細は以下をどうぞ。

LINK初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは

CSSコピペでウマく見出しを反映させる良い方法

ザックリと後述してますが、親テーマで指定しているスタイルをそのまま指定すれば反映されます。

LINKリンク置く場所

例えば上記のリンクバッジのスタイルをそのまま見出しh2タグに反映させたい時。

.b-b-quot {
	/*display: table-cell;
	float: left;*/
	line-height: 1.6; /* 行間 */
	padding: 0.5em 0.5em 0.3em; /* 内側余白：上 左右 下 */
	border-radius: 0.2em; /* 角丸 */
	margin-right: 0.3em; /* 右側余白 */
	font-size: 0.8em; /* フォントの大きさ通常の0.8倍 */
}
/*LINKの装飾*/
.b-b-link {
	color: #53a4ab; /* 文字の色 */
	background-color: #d5fbfe; /* 背景 */
	border: 1px solid #78dbe3; /* ボーダー 線1px 線の種類 色 */
}

• このまま指定しても反映しません。

そもそも見出しのHTMLタグにb-b-quot・b-b-linkなどの指定が存在しないので。

反映させるためには、h2タグを指定します。後述してますがCocoonでは.article h2を指定してください。

.article h2 {
	/*display: table-cell;
	float: left;*/
	line-height: 1.6;
	padding: 0.5em 0.5em 0.3em;
	border-radius: 0.2em;
	margin-right: 0.3em;
	font-size: 0.8em;
	color: #53a4ab;
	background-color: #d5fbfe;
	border: 1px solid #78dbe3;
}

上記CSSで指定するとイメージは▲画像のようになります。

上のCSSで内側余白paddingとフォントサイズfont-sizeを削除したらこんな見出しが出来上がり！

 投稿ページの見出し：CSS指定方法

Cocoonの投稿ページの見出しは全てに.articleが付いてます。.article h2などと指定すればOKです。

例えば背景が思った通りの色にならない場合、『CSS 背景 初期値』などで検索して初期値を指定すればOK！

background-color: transparent;

個人的には白の透明#fff0を使いますが…余談＾＾；

background-color: #fff0;

以降h2～h6タグの指定をチェックしてください。

Cocoon見出しh2タグの装飾

.article h2 {
	font-size: 24px;
	margin-top: 40px;
	margin-bottom: 20px;
	padding: 25px;
	background-color: #f3f4f5;
	color: #333;
	line-height: 1.25;
	font-weight: bold;
}

文字の太さを初期値：普通に戻したい時は、.article h2の{}内にfont-weight: normal;と入れればOK！

h3タグの装飾

h3タグの装飾は.article h3を指定。

.article h3 {
    border: none; /* 全てのボーダーが不要 */
    border-left: none; /* 左線のみ */
    border-right: none; /* 右の線のみ */
    border-top: none; /* 上線のみ */
    border-bottom: none; /* 下線 のみ*/
    border: 1px solid #d33; /* シンプルなボーダー指定: 線の太さ 線の種類 線の色 */
    background-color: #fec0c0; /* 背景色の変更 */
    color: #7b6f6f; /* 文字の色 */
}

例：全てのボーダーを消したい時は以下を追記。

.article h3 {
    border: none; /* 全てのボーダーが不要 */
}

h4タグの装飾

h4タグは.article h4と指定。以下のように背景・文字の色ボーダーの指定があるので、好きな色に変更するか、不要なら初期値に戻してください。

.article h4 {
	background-color: #fec0c0;
	color: #7b6f6f;
	border-top: none; /* 上線 */
	border-bottom: none; /* 下線 */
}

例として上の線だけ表示されて困るとき、以下のように指定。

.article h4 {
	border-top: none; /* 上線 */
}

h5タグの装飾

h5のスタイルは.article h5と指定。ボーダーが不要なら上述と通りに初期値に❦

.article h5 {
	background-color: #fec0c0;
	color: #7b6f6f;
	border-bottom: none; /* 下線初期値 */
}

h6タグの装飾

h6は.article h6個人的に滅多に使わないけど、使ってるときは気合が入った記事ですね＾＾

.article h6 {
	border-bottom: none; /* 下線初期値 */
}

フォントサイズなど自由に変更してください。font-size: 1.2em;で通常指定の1.2文字分の意味。

記事下：関連記事・コメントの見出し指定法

記事下の関連記事の指定は.related-entry-headingコメントだと.comment-titleどちらも同じスタイルにしたい時は以下の通りです。

/* 関連記事・コメントの見出し */
.related-entry-heading,
.comment-title {
	margin: 22px 0;
	font-size: 24px; /* 文字サイズの変更30pxだと大きくなる */
	font-weight: normal; /* 文字の太さを普通にしたい時 */
}

関連記事見出しのみの場合

/* 関連記事の見出し */
.related-entry-heading {
	/* ここにstyle */
}

コメント見出しの場合

/* コメントの見出し */
.comment-title {
	/* ここにstyle */
}

サイドバー見出しCSSで装飾を一括変更指定

サイドバーにはウィジェット入れると（基本）見出しが出てきます。（場合によってタイトル入力が必要）サイド見出しの一括変更は.sidebar h3でOK！

.sidebar h3 {
	background-color: #fec0c0; /* 背景色 */
	color: #7b6f6f; /* 文字色 */
}

私のページではすべてサイドの見出し前と下に画像を入れて装飾してます。ゴリゴリに触ってないけど、見た目に少し個性が出るかも？

カテゴリ・タグ一覧のタイトルをCSSで指定

タグやカテゴリ一覧ページの見出しは以下の通りで.archive-titleと指定して装飾変更することも可能です。

.archive-title {
	font-size: 26px;
	margin: 16px 0;
	line-height: 1.3;
}

カテゴリ一覧でアイコンフォントを変更したい

カテゴリ一覧などで見出しのアイコンフォントを変更したいとき。例えば以下リンク先のものにするには、以下の通りに書けばOK！（CocoonはFont Awesomeを導入済みなので）

LINKfolder｜Font Awesome

/* アイコンの変更 */
.category .archive-title span:before {
	content: "\f07b";
}

カテゴリ一覧のアイコンフォント非表示にするCSS

/* アイコンフォント不要なとき */
.category .archive-title span:before {
	content: "";
}
/* アイコンフォント不要で、タイトル左余白不要なとき */
.category .archive-title span {
	margin-right: 0;
}

以下だけでもOK！どっちでも大丈夫です。

/* 2つ同時指定したい時：以下でもOK */
.category .archive-title span {
	margin-right: 0;
	display: none;
}

タグ一覧でアイコンフォントを変更したい

タグ一覧などで見出しのアイコンフォントを変更したいとき。

/* アイコンの変更 */
.tag .archive-title span:before {
	content: "\f07b";
}

タグ一覧のアイコンフォント非表示にするCSS

/* アイコンフォント不要なとき */
.tag .archive-title span:before {
	content: "";
}
/* アイコンフォント不要で、タイトル左余白不要なとき */
.tag .archive-title span {
	margin-right: 0;
}

以下だけでもOK！どっちでも大丈夫です。

/* 2つ同時指定したい時：以下でもOK */
.tag .archive-title span {
	margin-right: 0;
	display: none;
}

投稿ページだけ見出しを変更。CSS指定方法

一応固定ページと投稿ページの見出しを変えたい場合。.singleを指定すればOK！

.single .article h2 {
	/* ここにスタイル */
}

これで投稿ページのh2タグのスタイルを入れれば、固定ページと違うスタイルが可能です。

該当の投稿ページだけ指定したい時

.postid-数字を指定し、数字部分は編集画面のURLにある数字を入れてください。

domain.com/wp-admin/post.php?post=***&action=edit

記事IDが123だったとき、見出しh2タグの装飾を変更したい場合は以下の通り。

.postid-123 .article h2 {
	/* ここにスタイル */
}

固定ページだけ見出しを変更したい時CSS指定法

固定ページのみスタイルを変更したいとき.pageと指定すればOK！

.page .article h2 {
	/* ここにスタイル */
}

これで固定ページの記事h2タグの装飾指定が可能ってなワケです。

該当の固定ページだけ指定したい時

該当固定ページだけ指定したいときは、.page-id-数字と入れるだけ。確認方法は同じく該当固定ページ編集画面のURLでIDを確認します。

domain.com/wp-admin/post.php?post=***&action=edit

post.php?post=32&action=editのときは.page-id-32です。CSSは以下。

.page-id-32 .article h2 {
	/* ここにスタイル */
}

複数おなじスタイルにしたい時は以下。

.page-id-32 .article h2,
.page-id-86 .article h2 {
	/* ここにスタイル */
}
.page-id-32 .article h3,
.page-id-86 .article h3 {
	/* ここにスタイル */
}

これで固定ページID32と86の記事h2とh3のスタイルを指定すればこの記事だけ別のスタイルを適応できます。

さいごに

カスタマイズ紹介でも一風かわった紹介方法ですが、CSS初心者さんも1人で好きなように気兼ねなくスタイル変更を楽しめたら。と思いカスタマイズ方法を書きました。

それでは装飾頑張ってくださいね！

かうたっくでした❦