Cocoonの見出しをカスタマイズ　ちゃんと反映されない場合

このブログのテーマは「Cocoon（無料）」でデザインが「イノセンス」というのを使っているのですが、色々シンプル。

それでまずは見出しからカスタマイズしようと思いました。
素晴らしいサイトがいっぱいあるので、そこからcssコピペさせてもらえばすぐ！
と思ったらエラーが出てしまい、少し苦労したので成功したやり方を書きます。

アキ

cssはわからなくても大丈夫！
コピペするだけです。

Cocoon「イノセンス」のデフォルトの見出しをカスタマイズ
cssを探してメモ帳にコピーする
1. cssの貼り方
③見出しの種類を選ぶ
①デフォルトの見出しをリセット
②見出しについてるアイコンを消す
まとめ

Cocoon「イノセンス」のデフォルトの見出しをカスタマイズ

「イノセンス」デフォルトの見出しh2、h3をこう変えたかったのです。

今回は見出しのh2とh3しか使わないので、２種類のcssを対象にしました。
ブログの記事にメリハリがついて見やすいですよね。

cssを探してメモ帳にコピーする

私は
「Cocoon 見出し　カスタマイズ」で検索しました。
エラーも含め、上位４つほどのサイトで必要なcssをゲットできました。

合計３つのサイトからcssいただいたのですが、下の↓見出しの最初に①、②、③とあるのはcssを貼る順序になります。

cssの貼り方

WordPressダッシュボード左側の「外観」→「テーマファイルエディター」をクリック。

css編集ページが出てきます。
Cocoon Childのスタイルシートであることを確認したら
/*必要ならばここにコードを書く*/
の下にcssを貼っていきます。

ではcssをどこのサイトからいただいて、どの順序で貼たらいいか書きます。

③見出しの種類を選ぶ

Nomad Code｜コピペで使えるブログカスタマイズツール
Cocoonオシャレ見出しデザイン

シンプル／オシャレ、色は５色と盛りだくさん。
コピー機能もあって至れり尽くせりのサイトです。
私はこちらのcssを使わせていただきました。

h2 {
font-size: 20px !important;/*文字のサイズ*/
position: relative;
color: #FFF;
background: #E07487;
padding-left: 2.5em;
border-radius: 50em 50em 50em 50em;
line-height: 2.4em;
margin-bottom: 15px;
border-top: none;
border-bottom: none;
}

h2:before {
font-family: “Font Awesome 5 Free”;
content: “\f111”;
position: absolute;
left: 1em;
font-weight: 600;
}

①デフォルトの見出しをリセット

一条工務店グランスマート住居中Mikkublog
WordPress Cocoon 見出し　変更反映されない

カスタマイズしても反映されない時は、まずデフォルトの見出しをリセットする必要があります。
こちらのcssを使わせていただきました。
行間などそのままコピペしました。

/* 見出しカスタマイズ */

/* H2 */

.article h2{

border-top:none;

border-bottom:none;

border-left:none;

border-right:none;

padding: 0;

}

/* H3 */

.article h3{

border-top:none;

border-bottom:none;

border-left:none;

border-right:none;

padding: 0;

}