Simplicityの見出しのデザインをカスタマイズ(WordPress)

WordPress(ワードプレス)のテーマのひとつであるSimplicity。

見出しの編集はテーマの編集の中でも比較的とっつきやすく、最初の方に行うカスタマイズのひとつです。

今日はSimplicityの見出しのデザインを変更します。

子テーマを準備

Simplicityに限らずテーマの編集全般に言えることですが、
子テーマを作成して子テーマで編集を行いましょう。

Simplicityの場合は子テーマも公式サイトで準備されているので今回はそれを使います。

「style.css」を編集します。
「style.css」は子テーマにもともと入っているのでそのまま開きます。

WordPress左側のメニューより、
「外観」→「テーマの編集」にて「style.css」を。

/* 見出しのデザインの変更↓↓ */
.article h2 {
	padding: .5em .75em;
	background-color: #00ffff;
	border-left: 6px solid #0000ff;}
/* 見出しのデザインの変更↑↑ */

上記のようなコードを追加します。

「background-color」「border-left」はいずれもお好きな色を。

「background-color」は全体の背景です。
「border-left」は左端に縦線が入ります。

最初と最後の「見出しのデザインの変更」の行はわかりやすくコメントをつけているだけなので、なくてもOK。

Simplicityはカスタマイズに対しても親切で、メニューのカスタマイズからでもいろいろ設定ができます。

しかし今回は見出しの編集という比較的シンプルなカスタマイズでしたので直接cssを編集しました。

Simplicityに限らずWordPressはテーマを編集してもすぐに設定が反映されないことがあります。
その際はキャッシュを削除する、再読み込みするなどで対応しましょう。