WordPressのカスタマイズ第一歩としておすすめなのが「見出し」です。
文字のスタイル変更はとても単純で、CSS初心者でも簡単に出来るんですよね。
そんな見出しのカスタマイズですが、今回はこの2つを通して紹介していきたいと思います。
【Simplicity】記事の見出しをカスタマイズ
まずは、記事中の見出しから見ていきましょう。
記事内の見出しでよく使われるのが「h2タグ」と「h3タグ」。1記事書けば大抵使うことになります。
1つずつCSSを紹介しますね。
1、見出し（h2）のCSS
このサイトで実際に使っているデザインはこんな感じ。（記事公開時点）
見出しはユーザーが流し読みしたときに、パッと目に飛び込んでくるのが良いですね。
かと言って派手になりすぎてもダメなんで、結局これくらいのデザインがちょうどいいんじゃないでしょうか？
実際に使ったCSSはこちらです。
/*見出し（h2）
===================================*/
.article h2 {
background-color: #499eda;
color: #fff;
padding: 15px 30px;
font-size: 23px;
letter-spacing: 0.05rem;
border-left: none;
}
記事内の見出し（h2）はクラス名「.article」の中にあります。
WordPressのテーマによっては、サイトの別の個所にも「h2タグ」が使われている可能性があるので、単純にh2と指定するのはNG。
今回のように「.article h2」とセレクタを指定することで、記事中のh2のみに変更が適用されるようになります。
CSSプロパティの解説
- 「background-color」「color」プロパティで背景色と文字の色を指定。
- 「padding」プロパティで文字の周りの余白を指定。
- 「font-size」「letter-spacing」プロパティで文字のサイズ、間隔を指定。
- 「border-left」プロパティで、Simplicityデフォルトのスタイルを削除
文字と背景色は好きなカラーコードを指定してください。
白抜きが目立ちやすいので「background-color」のみを変えるのがおすすめです。
また、Simplicityの場合はもともとのCSSで左側にラインが入るようになってます。
「border-left」はそれを削除するためのものなので、他のテーマの場合は不要です。
2、見出し（h3）のCSSを変更
続いて記事内の見出し（h3）を見てみましょう。
これはh2タグよりも控えめでありながらも、そこそこ目立つイメージ。
/*見出し（h3）
===================================*/
.article h3 {
border-bottom: 5px solid #499eda;
padding: 10px 0;
}
こちらも記事中のみ変更したいので、先ほど同様「.article h3」という指定をしてます。
CSSプロパティの解説
- 「border-bottom」プロパティでアンダーラインのスタイルを指定。
- 「padding」プロパティで文字の周りの余白を指定。
Simplicityのh3タグは、デフォルトでアンダーラインが付くようになっています。
しかし、もともとの色はグレーなので、h2をカスタマイズした場合その色と合わせる必要があります。
文字の色も変えたい場合は、先ほどのように「color」プロパティを使いましょう。
また「padding」プロパティを使って上下に余白を作ってますが、これをしっかり設定しておくことで、記事作成時に見出しの前後に改行を入れる必要もなくなります。
文章的に意味のないところで無駄な改行を入れないように、ここで指定しておくことをすすめます。
【Simplicity】サイドバーの見出しをカスタマイズ
それでは最後に、サイドバーの見出しのカスタマイズを見て終わるとしましょう。
実は、記事の中以外にも見出しタグが使われている場所があるのです。
そう。それがサイドバーの見出し。
ウィジェットを使ってサイドバーにコンテンツを追加したときにタイトルを入力しますよね。
Simplicityではここにh3タグが使われています。（テーマによっては、h2の場合もあるのでご注意を）
Simplicityのサイドバーの見出しは通常、ただの黒字で文字が表示されると思います。
それを先ほどのデザインに合わせるとこんな感じになります。
CSSはこちら。
/*サイドバーの見出し
===================================*/
#sidebar-widget aside h3{
background-color: #499eda;
color: #fff;
padding: 10px;
text-align: center;
font-size: 16px;
border-radius: 3px;
}
ここでもサイドバー内のh3タグを指定するため、「#sidebar-widget aside h3」というようにセレクタを詳細に記述しています。
CSSプロパティの解説
- 「background-color」「color」プロパティで背景色と文字の色を指定。
- 「padding」プロパティで文字の周りの余白を指定。
- 「text-align」プロパティで文字を中央寄せ。
- 「font-size」プロパティで文字のサイズを指定。
- 「border-radius」プロパティで角丸に。
サイドバーの見出しは、「text-align」プロパティを使って文字を中央寄せにしておきました。
あとは「border-radius」プロパティで若干丸みを出してます。
記事内より文字を小さ目に設定することで、全体的なバランスも良くなると思いますよ。
最後に
見出しは文章のまとまりを区切る重要な役割を持ちます。そういった意味でも、早めににカスタマイズするのはありかと思います。
また補足ですが、フォントのサイズや周りの余白は、PCとスマホでそれぞれ設定すると良いですね。
文字関連のCSSが扱えるようになってくると、CSSの楽しさも見えてくるんじゃないでしょうか？
サイトのデザインは自由自在です！
