WordPress【twenty seventeen】記事見出し（H2・H3）のデザインを変更する方法

【twenty seventeen】テーマは「見出し」のデザインが全くされていない。フォントサイズが変更されている程度で、記事を読む際に黒文字ばかりでアクセントがなく、ちょっと記事を見ると部分がわかりずらい。その為、読む側からすると読みずらい文章となってしまう。

そこで筆者は「見出し２」と「見出し３」を良く使用する為に、この部分に関して変更を加えた。ちなみにSEO（検索エンジン最適化）の事を考慮すると「見出し１」については記事の中に埋め込むことはしない。これは「記事タイトル」が「見出し１」になるようになっている為、「見出し２」以降を記事に使用している。

見出しのデザインを少し変えるだけでサイトの雰囲気が大きく変わります。そして閲覧者側になった時、読みやすいと思えるはずです。本当にちょっとしたカスタマイズをするだけで変更可能ですので、やってみる価値はあるハズです。

どうやって「見出し」のデザインを変更するのか？

これは勿論であるが、子テーマのスタイルシート（style.css）に追加を加える。このようにデザイン変更をしたいが為に子テーマを作ったようなものである。

小テーマの作り方がわからない方は「【twenty seventeen】の子テーマを作成する方法」をご参照ください。

それでは実際にどこを変更したかを説明します。

記事中のh2およびh3の枠のボーダーラインにアクセントをつける

編集方法は［外観］－［テーマの編集］よりスタイルシートを選択し編集してください。子テーマのスタイルシート（style.css）に次の内容を追記してください。「#」の部分は配色になりますので、お好みの配色コードに変更してください。

「見出しh2」の例

/* 見出しh2 */
.entry-content h2 {
border-left: 5px solid #1F5E73;
border-bottom: 1px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

「見出しh3」の例

/* 見出しh3 */
.entry-content h3 {
border-left: 5px solid #1F5E73;
padding: 0 0 0 15px ;
line-height: 2;
font-size: 18px;
background-color: #fff;}

たったこれだけです。

これを追記したら［ファイルを更新］を押下して終了です。記事を見て反映されているかをご確認ください。更新されていればOKです。もし、更新されない場合は「【twenty seventeen】子テーマのスタイルシート（CSS）が反映されない」をご参照ください。

まとめ

なんか見出しのデザインを変更しただけで、何となくカッコよくなった感じがしませんか？でも、まだまだ細かい点が目立つのでもっと変更していきたいです。

ポイントはサイトのイメージカラーを決めておくことです！

ある程度、同一色でまとめていくとサイトの雰囲気がプロが作成したかのように変えることが可能となります。

【A8.netに登録しよう！】
◇ 広告主数・アフィリエイトサービス数日本最大級☆
◇ 登録はもちろん無料、審査なしのアフィリエイトサービス☆
◇ 使いやすいサイトNO.1
⇒アフィリエイトならA8.net