CocoonスキンのFuwariで見出しのデザインを変更する方法【WordPressテーマCocoonカスタマイズ】

Wordpress

2021.03.28

こんにちは。かやみーです。

このブログはWordpressの無料テーマ「Cocoon」を使わせていただいてます（めっちゃ使いやすいです）。

Cocoonでは「スキン」と呼ばれる着せ替え機能のようなものがあって、かやみーブログでは「Fuwari-御召茶(おめしちゃ)-」を選択しています。

見出し２～５（H2～H5）のデザインを少し変更しましたので、そのやり方を紹介したいと思います。

御召茶以外の３種類（海老茶、海松茶、褐色）の場合のやり方も載せているので、Fuwariシリーズを使っている方ぜひ参考にしてみてください。

Fuwariの見出し：変更前と変更後のイメージ
見出しデザイン変更のステップ
今回使用のCSSをざっくり解説（御召茶の場合）
1. 【.article h3】：見出し３のCSS
2. 【.article h4】：見出し4のCSS
最後に

Fuwariの見出し：変更前と変更後のイメージ

「Fuwari-御召茶(おめしちゃ)-」の見出し２～５（H2～H5）の変更前と変更後のデザインは下のような感じになっています。

見出し２はそのまま変更なし
見出し３は、元の見出し４のデザインに近づける
見出し４は、元の見出し５のデザインに近づける
見出し５はそのまま変更なし

見出し２と３の差をもう少しはっきりさせたいと思い、このような変更をしました。

見出し４と５がほとんど一緒になっちゃってますが、見出し５は使うことあまりないかなと思いとりあえずこのままで。

見出しデザイン変更のステップ

ステップ１．ダッシュボートの[外観]→[テーマエディター]

ダッシュボートの[外観]から、[テーマエディター]を開きます。

ステップ２．編集するテーマを選択：Cocoon Child

画面右上のほうにある「編集するテーマを選択」で [Cocoon Child] を選択します。

[Cocoon Child] を選択後、「選択」ボタンをクリックします。

ステップ３．スタイルシートを選択

テーマファイルの中から、「スタイルシート(style.css)」を選択します。

ステップ４．CSSをコピペ

↓のような画面になります。赤矢印のところにCSSをコピペします。

コピペするCSSはこちら↓↓（お使いのスキンのCSSを選んでコピペしてください）

Fuwari -御召茶(おめしちゃ)- 用CSS↓↓

.article h3 {
	font-size: 19px;
	border-top: 1px solid #cddee0;
	border-bottom: 1px solid #cddee0;
	background-color: #fff;
}

.article h4 {
	font-size: 17px;
	border-top:none;
	border-bottom: 1px solid #cddee0;
}

Fuwari -海松茶(みるちゃ)- 用CSS↓↓

.article h3 {
    font-size: 18px;
	border-top: 1px solid #d6d3ce;
	border-bottom: 1px solid #d6d3ce;
	background-color: #fff;
}

.article h4 {
	font-size: 16px;
	border-bottom: 1px solid #d6d3ce;
}

Fuwari -海老茶(えびちゃ)- 用CSS↓↓

.article h3 {
    font-size: 18px;
	border-top: 1px solid #e6c7c0;
	border-bottom: 1px solid #e6c7c0;
	background-color: #fff;
}

.article h4 {
	font-size: 16px;
	border-bottom: 1px solid #e6c7c0;
}

Fuwari -褐色(かちいろ)- 用CSS↓↓

.article h3 {
    font-size: 18px;
	border-top: 1px solid #d1d1db;
	border-bottom: 1px solid #d1d1db;
	background-color: #fff;
}

.article h4 {
	font-size: 16px;
	border-bottom: 1px solid #d1d1db;
}