Simplicity2で見出し(h2、h3、h4)のカスタマイズ

Simplicity2のカスタマイズ備忘録だ。WordPressのテーマSimplicity2で、本文中につかう見出しタグ(h2、h3、h4)のデザインを変更してみた。Simplicityデフォルトと、このサイトで使用したデザイン、両方のCSSコードを貼ってある。

Simplicity2のバージョンは2.6.3。

CSS変更する際の注意

WordPress上で「外観」→「テーマの編集」にある「スタイルシート(style.css)」に変更したいコードを追加していく。その前に2つほど気をつけておくことを。

CSSのカスタマイズは子テーマで

親テーマを直接触るなんて怖くてできない。以下のサイトで「Simplicity2カスタマイズ用の子テーマファイル」をダウンロード。これ、常識。

テーマをカスタマイズするなら親テーマの直接編集はお勧めできません。というのも、ダウンロードページで配布しているテーマファイルを直接編集すると、アップデート時に編集下部分がが上書きされ、せっかくのカスタマイズが全て消えてしまいます。それを防ぐ

変更していなければブラウザのキャッシュをクリアを

変更されていなくても、ブラウザのリロード(再読込)をすれば、たいていはCSSの変更を反映してくれるはず。もし、変更されていない場合はブラウザのキャッシュをクリア(スーパーリロード)を試してみる。
(例)Windows
Firefox:Ctrl + F5 または Ctrl + Shift + R
Google Chrome:Ctrl + F5 または Shift + F5

見出しタグ(h2、h3、h4)のカスタマイズ

Simplicityデフォルトの見出しとそれほど見た目は変えていない。見出しのデザインが目立ちすぎるのは苦手だからだ。まずは、参考にSimplicityデフォルトのCSSを貼っておく。

Simplicityデフォルトの見出しタグ(h2、h3、h4)

SimplicityでHTML要素を用いて記事を書くと、以下のようなレイアウトになります。 Wordpressテストデータを用いたデモサイトはこちら。 見出し弐 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄

上のページが例。「border-left」は左側、「border-bottom」は下側だ。「px」の前に数字で線の太さを指定している。「solid」は一本線、「dashed」は破線。

.article h2 {
border-left:1px solid #000;
margin: 40px -29px 20px;
padding:25px 30px;
font-size:26px;
}

.article h3{
font-size:23px;
border-bottom:5px solid #e7e7e7;
padding:10px 0;
}

.article h4, .article h5, .article h6{
font-size:20px;
padding:8px 0;
}

.article h4{
border-bottom:5px dashed #eee;
}

見出しタグ(h2、h3、h4)のCSSコード

変更後はこんな感じだ。線は一本線に統一している。「h5」と「h6」はスルーした。おそらくつかわないだろうってことで。デフォルトと大きく異なる点は色指定だ。#47585c は錆鼠色。

/* 見出しの変更 */
.article h2 {
border-left:3px solid #47585c;
font-size:26px;
}

.article h3{
font-size:23px;
border-bottom:2px solid #47585c;
}

.article h4{
border-bottom:1px dashed #47585c;
}

テキストの邪魔をしない見出し

最初は、線なしの見出しにしようかと思っていた。フォントの大きさだけで「h2、h3、h4」タグを指定してもいいかなと。色やデザインなどでテキストの邪魔をしたくないというのが理由だ。もしかしたら、そのうち、さらにシンプルにするかもしれない。