WPテーマ【Cocoon】のカスタマイズタイトルに背景色を入れる

私のこのブログは【ワードプレス】で作っています。
テーマは【Cocoon】です。
今まではカスタマイズしていませんでしたが、タイトルの背景色を変えてみました。

かんたんなcssでタイトルの背景色と、フォントなどのカスタマイズができるので紹介します。

「テーマをイジルことになるのが心配」と思われるでしょうが、書き加えるcssを削除すればすぐに元に戻るので安心してください。

この記事では背景色を変えていますが、いちばん簡単なcssの書き換えがこの記述です。
これを応用できるようになれば、さらにカスタマイズできます。
cssコードをググりながら違うカスタマイズも楽しんでみてください。

Cocoon のタイトルはシンプル
- 書き加えるのはテーマエディッタのCSS
- 【h2】などの元のコードを無効にしよう
タイトルに背景色を入れてカスタマイズする　追加css
- 外枠で囲んだタイトルも作った
- まとめ

Cocoon のタイトルはシンプル

Cocoonのタイトル「ｈ」はかなりシンプルです。

「h2 」以外には背景色がないので、太文字だけの「h3」「h4」などはちょっと目立たないですよね。

シンプルなブログを作りたい方はそのままでもいいと思いますが、文字だけのブログではページが単調になってると思いませんか？

なんだか単調なテキストが並んでるだけだよね。

じゃぁ、タイトルに背景色を入れてみよう！

書き加えるのはテーマエディッタのCSS

Cocoonは子テーマと親テーマがあって、子テーマを書き換えることでカスタマイズできます。
テーマを書き換えるなんてハードルが高いですよね。

「もし失敗したら元に戻せない」と思ってしまいますよね？

でもカスタマイズする項目があるので安心してください。
もし間違えたり「やっぱりやめた。元に戻そう」と思ったとしても追加したコードを削除すればいいだけなので心配ないです。
元の子テーマのコードも変更しません。

やっていきましょう。
ダッシュボードから【外観】→ 【テーマエディッタ―】に進んでいきます。

Cocoon Child のスタイルシートの変更ページに新しいcssを書き加えてもいいのですが、【付随のcssエディッタ―】の方に書きます。

左のメニューからcssを追加をクリックするとcssコードを書き加えることができます。

追加cssを書き加える時には、適当なブログ記事を開いておきましょう。
追加css書き込みスペースの右側にサンプルサイトを表示することができます。
コードを書き換えるとリアルタイムで右側のサンプルで変更が確認できます。

【h2】などの元のコードを無効にしよう

h2に背景色が残っているとこれから書くcssでは背景色を変えることができません。

まず背景色やラインなどをを無効にしましょう

背景色を無効にするには下記のコードを書きます。

.article h2 {
background: none;
border-radius: none;
border-left: none;
}
.article h3 {
border-left: none;
}
.article h4 {
border-bottom: none;
border-left: none;
}

【.article h2】テーマ内に書いてある「h2」を指定します。
【background: none;】テーマの「h2」の背景色を「無効」にします。
【border-radius: none;】タイトルの角を丸く縁取りしているのでここでいったん無効にします。
【border-left: none;】左端にある縦のラインを消すために無効にします。

「h3」と「h4」も同じように無効にします。
「h3」と「h4」には背景色がないので「h2」のような背景色の記述は不要です。
「h3」は左の縦のラインを「h4」は下に入ってるラインをそれぞれ無効にします。
「h5」「h6」は私は使っていないのでここまでの書き換えをしています。