WordPress 見出し 装飾 h1 h2 h3

今回は WordPress で 見出し の 装飾 を簡単に行う方法です。
先回は「 WordPress 見出しh1 h2 h3 タグ 」で読者が読み易く、設定も簡単な使用法を考えました。今回は具体的な装飾方法について見ていきます。

WordPress 見出し 装飾 h1 h2 h3

見出しは｛ h1 , h2 , h3 , h4 , h5 , h6 }までの タグ が使われます。
また私の使っているテーマ TwentyFifteen では、 h1タグ と h2タグ が Webサイト （ ブログサイト ）の タイトル や記事のタイトル に使われています。
なので記事の見出しは h3タグ から h6まで の 4つのタグ を使うようにしています。

ここまでは先回お話しした通りです。

CSS で hタグ を装飾する

まずはどのようにhタグを装飾するか考えます。
・文字の大きさ
・文字の色
・文字の種類
・背景
・下線
いろいろなことが出来るのでWebサイト（ブログサイト）に有った感じで文章が読み易くなるような装飾を考えます。

装飾種類ついて

※「-moz-」が Ｆｉｒｅｆｏｘ 等の Mozilla系 ブラウザ用 です。
「-webkit-」が Ｓａｆａｒｉ ， Ｃｈｒｏｍｅ 等の ブラウザ用 です。
ちなみに、「-o-」が Ｏｐｅｒａ用 、「-ms-」が ＩＥ用 です

上は簡単な例です。他にもいろいろhタグの装飾はできます。CSS を調べて好みの装飾をしてください。

カスタマイズ するには

次は実際に カスタマイズ する方法です。
カスタマイズ にもいろいろ方法が有りますが、私の知っている簡単な方法を説明します。

スタイル―シートを書き換えるまえに

テーマ にはそれぞれ スタイルシート が付いてきます。（と思います。 テーマ によって違うので） スタイルシート の編集は、直接 ファイル を編集しても良いですし、 WordPress の機能で ダッシュボード ＞ 外観 ＞ テーマ編集 の スタイルシート ( style.css )で書き換えても OK です。
ただし、 WordPress の機能を使う場合 WordPress に予め変更を保存するために ファイル を書き込み可能にする必要があります。
どちらの場合も同じ編集をするので、簡単な方を選んでください。

あっ、編集をする前は バックアップ を取っておくと安心です。編集でわけがわからなくなっても元に戻せるので。

テーマ によっては既に hタグ の 装飾 がされているものも有るかもしれません。変更する前に h1 、 h2 、 h3 を検索して既に装飾されていないか確かめてください。
装飾されているようなら、その箇所に装飾すると良いです。

尚、 CSS で 装飾 した場合、後で装飾したものが優先になります。上書きされるようなイメージです。自分でCSSを追加したのに反映されない場合は、そもそも間違えて記述したか、上書きされたかのどちらかです。

スタイル―シートを書き換える

では、テーマの style.css を編集しましょう。
私のテーマは TwentyFifiteen です。 h1タグ は2か所に出てきました。1か所目は全体の クリア している箇所なのでそのままでOKです。

2か所目は

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: 700;
}

と出ていました。これも、回り込みの解除、フォントの太さ指定なのでこのままで。

では、私の h1タグ 、 h2タグ の 装飾 を、続いて h3タグ の編集します。編集すると言っても上のhタグの宣言のすぐ下に書き込むだけなんですが。

h1,h2 {
    background:#eee;
    border-bottom:7px solid #ff9b00;
    padding:.8em .9em .3em;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

私の場合、h1タグ、h2タグの装飾は同じです。記事のタイトルがh2タグの場合とh1タグの場合が有るので、揃えようと考えたからです。
内容は、背景を灰色（#eee)、下線に7px幅の柿色（#ff9b00）線、タグの周りに少しスペースを設ける、そして線の角を丸めるというものです。

h3 {
    background:#f0f0f0;
    border-left:7px solid #ccc;
    border-bottom:1px dashed #ccc;
    padding:.6em .8em;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

h3タグは、背景を灰色（#f0f0f0)、左側に7pxの灰色（#ccc）線、下線にダッシュの1px幅の線、タグの周りに少しスペースを設ける、そして線の角を丸めるというものです。

書き込みが終わったら保存をして終了です。一度ブラウザを閉じて表示して見てください。上手くhタグは装飾できましたか？h4タグやh5タグももちろん装飾してOKですので、自分のWebサイト（ブログサイト）に合ったものにしてください。

今回説明した方法以外にもいろいろ出来ると思います。スキルが上がれば、例えば記事の種類ごとに変更するなども出来るようになるかもしてません。
最初の一歩は簡単なことから、少しずつ成長させていきましょう。