いまさら聞けないWordPressの見出しデザインカスタマイズ方法

2016年9月3日 2分29秒

たかまん

無料のテーマを使ってると見栄えが人のブログと一緒になってしまったりしてカスタマイズをしたくなります。今回はWordPressテーマでよく使うh2、h3、h4タグの見出しカスタマイズ方法です。

見出しカスタマイズ方法

CSS（スタイルシート）の編集

見出しのカスタマイズを行う為にWordPressのダッシュボードからスタイルシート（style.css）編集ページを開きます。

WordPressのダッシュボードから外観 → テーマの編集を選択してスタイルシート（style.css）の編集画面へ。

右カラムのテンプレートのリストからスタイルシート（style.css）をクリックする。

ちなみにこちらは人気無料WordPressテーマのSTINGER8のスタイルシート（style.css）です。

スタイルシート編集ページ

Ctrl + Fでh2など変更をしたい見出しタグを検索して変更したい見出しタグを探します。レスポンシブデザインだと表示サイズによってh2タグがあるのでそれぞれの表示サイズのh2タグを編集します。

SITINGER8のh2タグだとこんな感じです。

/* 中見出し */
h2 {
background: #f3f3f3;
color: #1a1a1a;
font-size: 19px;
line-height: 27px;
margin: 20px 0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-top:2px solid #ccc;
border-bottom:1px solid #ccc;
}