見出しh2やh3のフォントやカラー、デザインなどを子テーマCSSで変更する方法
テーマはLuxeritas(ルクセリタス)を使用して、『ネットでお仕事』は執筆しております。
今回は、見出し2や見出し3のフォントの大きさやカラー、デザインを変更したので、変更方法を忘れないようにブログに残しておきます。
ワードプレスでブログを書いていて、もし見出し変更方法が分からないという方のお役に立てれば幸いです。
ワードプレスのダッシュボードを開いて、『子テーマの編集』をクリックする。
『Luxeritas』にカーソル(矢印)をあてると、子テーマの編集が出現。
『子テーマの編集画面』でstyle.css、スタイルシートが選択されているか確認。
スタイルシートの編集する箇所を確認。
左に小さく行数が記載されております。1行目から36行目までは初期から記載されていた内容のため、絶対変更せずに残しておきましょう。
追記していく箇所は37行目以降となっております。
44-50行目までが、見出しh2の変更箇所となっております。
見出し2 h2デザイン変更方法。
コードは、
/* — 見出し — */
.post h2{
color: 好きなカラーコード（文字色）;
background-color: 好きなカラーコード（背景色）;
border-left: transparent;
font-weight:bold;
}
グレーの箇所をコピーして貼り付けて下さい。
『/* — 見出し — */』箇所は、スタイルシートを後で確認したときに、ここから『見出しのコード』と確認できるように記述しています。
好きなカラーコード(文字色)：ネットでお仕事では、『 white 』を入力。
好きなカラーコード(背景色)：ネットでお仕事では、『 #167ac6 』を入力。
見出し2(h2)の表示はこのように変更されました。
見出し3 h3デザイン変更方法
続いて見出し3の変更についてです。
/* — 見出しh3 — */
.post h3{
color:好きな文字色 ;
background-color:好きな背景色;
font-weight: bold;
border-left:好きな値px solid #167ac6;
}
好きなカラーコード(文字色)：ネットでお仕事では、『 black 』を入力。
好きなカラーコード(背景色)：ネットでお仕事では、『 #F0F0F0 』を入力。
好きな値の箇所は、左の横棒の太さです：ネットでお仕事では、『 5 』を入力。
見出し3(h3)の表示はこのように変更されました。
見出し変更についてまとめ
ネットでお仕事では、親テーマ+子テーマからなる『Luxeritas(ルクセリタス)』を使用しているため、他のテーマを使用している方はスタイルシートの箇所を変更してみて下さい。
見出しのフォントや大きさ、色、デザインを変更するだけで、文章の見栄えや伝えたい箇所の明確化、メリハリがついて読みやすくなりました。
日々ブログを執筆しながら、CSSやHTMLについて学んだことを記事に追加していきます。