WordPressの既存テーマの見出しは、文字の大きさが変わるだけで、何の装飾もありません。そこで見出しを変えてみます。
見出しに帯を付けたり、文字の色や大きさを変えたりする時にはテーマのスタイルシート(style.css)を編集します。
下記リンクにあるようにテーマの スタイルシート(style.css)を編集する時は子テーマを作り、子テーマのスタイルシート(style.css)を編集します。
見出しのタグセレクタはh1~h6がありますが、h2の見出しを変えてみます。
スタイルシート(style.css)はHTMLで記述します。HTMLはウェブページを作るために開発された言語です。
クラス名は、ある部分だけを指定し、その部分だけ要素を適応させたい時に使います。
h2の見出しを変えるために、h2のクラス名を確認します。
クラス名を付けずにスタイルの指定もできます。 h2はコンテンツとサイドバーに使われています、コンテンツのh2を変更すると、サイドバーのh2も変わってしまいます。
クラス名を付けていると、コンテンツのh2だけが適応になります。
テーマによってクラス名が違いますので、F12(デベロッパツール)で確認します。
子テーマのstyle.cssを編集します。「ピリオド+クラス名」で記載します。h2{ }に.entry-content を付けます。
h1のスタイルを記述したい場合はh2をh1と記述します。{ }の中に色や大きさなどの情報を書いていきます。
entry-content h2{ padding:10px; /*上下左右の間隔*/background:#88ccef; /*背景色*/}
CSSにソースコードを書く時のコメントで、/*で囲まれた部分は処理されず、ブラウザで表示されません。コメントアウトを利用すると、スタイルシート(style.css)もわかりやすいです。
変更した見出し
このようにスタイルシート(style.css)で見出しに影を付けたり、リボン風にしたり装飾できます。
応用編はこちらです。リボン風見出しを作り、その説明を記載しています。