さて今回は初期実装されているWordPressの見出しのデザインを変更する方法です。
まずはCocoonのデフォルト見出しがこちら。
・・・味気ないですね。
この既存の見出しのデザインを変更していきます。
見出しのデザインを変更してみよう！
まずはcssを使い既存のデザインを無効化します。
まずはWordPressメニューの外観から「カスタマイズ」を選択します。
カスタマイズページへ移動したら一覧から「追加CSS」を選択します。
追加CSSを選択後、下にスクロールし「SCC記入欄」まで移動します。
まずここに今のデザインを無効化するコードをコピー＆ペーストします。
↓無効化するコード↓
/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
padding: 0;
margin: 0;
background:none;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
position:relative;
}
/*見出しデザインを変える場合はこれより下に記載してください*/
コピー＆ペーストして「公開」ボタンをクリックしたものがこちら。
デザインが無効化されました。
次に見出しデザインを選んでいきます。
今度はCSSに追記したコードの下にデザインコードを追加するのですが
今回はサルワカ様のサイトにある見出しのデザインをつかいます。
今回はコチラを使用してみます。
※サルワカ様のサイトの画像を引用しています。
「コードを表示」ボタンをクリックして出てきたコードをコピーします。
今回使うコードはコチラ。
↓デザインを変更するコード↓
h1 {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
}
このコードをコピーして先ほどの「CSS記入欄」の「無効化コードの次」に貼り付けます。
次に今のままだとh1が指定されているため
「h1」の部分を「.article h〇（〇は半角数字）」に置き換えます。
↓変更したい見出しの数字の文字列をコピー＆h1に上書きペースト
.article h2
.article h3
.article h4
.article h5
.article h6
今回は「.article h2」を選択します。
変更したら上にある「公開」をクリックします。
反映されてる！やったね(*´ω｀*)
上記の流れで見出し３～６も変更してみましょう。
基本的に反映させたいコードは順次下に置いていきます。
コードをコピー＆ペーストするときは
改行して空白を挿入してから行うと後々変更するとき便利です。
出来てる！やったね(*´ω｀*)
ちなみに見出しの色なのですが
「color: #505050;」といったように
#xxxxxxといった「#の後ろの６行の半角英数を変えることで変更できます。」
実際にカラーピッカーのサイトで色を探して見出し２の色を変えてみましょう。
background: #fff200;
見出しの背景色です。ここを「薄い黄色（#fffbba）」に変更します。
box-shadow: 0px 0px 0px 5px #fff200;
見出しの破線の外側の背景色です。ここを「薄い黄色（#fffbba）」に変更します。
border: dashed 1px #ff0000;
見出しのボーダー（線枠）を破線にするというプログラムです。
ここを「赤色（#ff0000）」変更します。
color: #454545;
文字の色です。今回は変更しません。
それでは変更してみましょう。
出来てる！やったね(*´ω｀*)
色の変更に関しては変更後すぐ反映されるので
どこが反映されたか確認しつつ色の調整を行ってください。
以上でデフォルトの見出しのデザインを変更する方法の説明は終わりです。
おつかれさまでした。
デザインは他にも色々とあるので
お気に入りの見出しを見つけて使ってみてくださいね。
下のブログから来たよ！という方はこちらから戻れます。
https://mataneteta.com/wordpressppoiblog/
