WordPress で「見出し」をデザインして使う方法

header_stylesはい、ごめんください。
ウェブ解析も好きですが WordPress も大好物の小杉です。

WordPress 関連コラムの発端は、いつもお世話になっている方から CSS の設定方法を聞かれたこと。その後自力解決されたとのことで確認してみましたが、もっと良い方法あるんだけど…知らない人多いのかな?と思ったので、ぜひ使っていただけると嬉しいです。

※ちなみに、3.6 以降はビジュアルエディタの見出しにスタイルが無効になっているようですね(修正すれば使えるかも)。

スタイルを統一して “素人っぽさ” をなくそう

様々なスタイルを設定することは「素人っぽさ」が出るのであまりオススメしません。

例えば、色。カラフルだから綺麗♪と思って使っているのかもしれませんが、ホームページのコンセプトカラーは何色ですか?

外部のブログサービスで好きなテンプレートから選んで使っているというのなら、百歩譲ってまだしも、外注したデザインでそれをやっていたら目も当てられません。何のためのデザインでしょうか。

もし、様々な色を使いたい、カラフルにしたい、という場合は「コンセプトカラーをレインボーカラーにする」ことから考えて「それぞれの色は何を表すか」「コンテンツが増えたらどうするか」をよく考えてください。考え始めると、かなり難しいのがレインボーカラーです。

ホームページで使う色を決めたら、極力そこからブレないようにすることが大切です。他のスタイルにしても同様です。

色や見た目を司るスタイルは、CSS(WordPress なら style.css など)に class で設定します。今回は例として、「見出し」用のスタイルを設定してみます。

1.見出し用のスタイルをつくります

ご質問いただいたものを実現してみます。

サンプル:左と下に青いボーダーのある見出し用スタイル

スタイルの設定は下記をコピーして、style.css などの最下部にでもペーストしてください。

.header3 {
	border-style: solid;
	border-color: #3366EE;
	border-width: 0 0 1px 8px;
	padding: 5px 0 5px 8px;
	font-weight: bold;
	font-size: 120%;
}

サンプルのようなスタイルを文章の間に入る「見出し」に使いたい時は、.header3 という class を指定してあげれば良いわけです。

△:<p style=”border-style:solid; border-…”>オススメしない見出し
○:<p class=”header3″>ややスマートな見出し

スッキリ度が一目瞭然ですね。インライン(HTML タグの中に直接書く CSS は「インラインCSS」と言います)で設定する場合は、イレギュラー対応で他に使用しない場合に限ったほうがいいでしょう。何度も使うなら、class として設定することをオススメします。

2.見出しは「見出しタグ」を使いましょう

上記は p タグ(段落タグ)を設定していますが、機能的に求められているのは「見出し」なのですから、見出しタグを利用しましょう。h2 や h3 等のヘッダタグのことです。

検索エンジンの頭が良くなってきた近年は、巡回ロボットが「これは見出しだから重要、段落は本文だな、これは引用されている部分だな」など、単純な文章以上の意味を含めてクローリングしているので、構造化された HTML は即ち SEO(検索エンジン最適化)につながります。

上記の場合、下記のようになります。どのヘッダタグを選ぶかは、テーマの構造によりますが大抵は h2 〜 h4 でしょう。

△:<p class=”header3″>ややスマートな見出し
○:<h3 class=”header3″>もうちょっとスマートな見出し

3.そもそも class の設定すらいりません

見出しのスタイルは決まっているわけですから、下記のように CSS を記述することで、class の指定すら不要になる場合が多いです。先ほどの CSS とは赤下線部が異なり、記事中の h3 部分にスタイルを適用できます。

.post h3 { /* 記事内の H3 が対象になる */
	border-style: solid;
	border-color: #3366EE;
	border-width: 0 0 1px 8px;
	padding: 5px 0 5px 8px;
	font-weight: bold;
	font-size: 120%;
}

つまり、こうなります。

○:<h3 class=”header3″>もうちょっとスマートな見出し
◎:<h3>スッキリスマートな見出し

4.WordPress で見出しの設定は一発でできる

ビジュアルエディタを利用していれば、下記のような「段落」というものが表示されているかと思います。
もし表示されていなければ、一番右側のアイコンをクリックしてください。

ビジュアルエディタ

この「段落」を選ぶと、「見出し○」というものがありますので、あとはそれを選ぶだけです。

h2 を使いたい → 見出し2  h3 を使いたい → 見出し3

簡単ですね。
ここで「見出し3」を選ぶだけで、後は勝手にスタイルが適用されます。

つまり、スタイルさえ設定してしまえば CSS を覚えなくて良い

手順としては、下記の3ステップです。

1.どんなスタイルにするか決める(デザインする)

2.style.css などに CSS を記述する

3.見出しを「見出し2」や「見出し3」として設定する

 

すでにある程度スタイルシートを知っている初〜中級向けの内容でしたが、画面の右にある「スタイル」の便利な使い方についても、コラムに書いてみますね。

スタイルシートについてはネット上で「いいな!」と思ったものを自分なりにアレンジしてみるのが近道ですが、書籍で学ぶならリファレンスや基礎的な部分を押さえておいたほうが良いのではないかと思います。

1978年、新潟県南魚沼市生まれ、長岡市在住。夫と子ども2人をこよなく愛す。

教員養成課程を修了して教員免許を取得するも、民間企業に就職して12年近くウェブ制作に関わる。デザインから開発まで、制作業務をトータルでこなすオールラウンダー。

2013年4月には新潟県で初のウェブ解析士マスターになり、同年6月に起業、コスギスとして活動。心理学に基づいたコンテンツ分析と、SNSなども含めた幅広いウェブマーケティング、そしてWordPressでのサイト構築を得意とする。

ウェブ活用の人材を育てる「ウェブ解析士認定講座」や関連セミナーを新潟県内で唯一定期開催。WACAアワードにて 2016年 Best of Best を受賞。2017年 ペライチ公式 新潟県代表サポーター。

初心者向けのWordPressの勉強会(WordBench新潟・長岡藩)や、ホームページ勉強会を主催。セミナー講師としても活動中。

この投稿へのトラックバック

  1. 【WordPress】見出しタグ”h4″をきれいにデザインしてみた | MUWEのブログ said on 2013年10月7日 at 4:59 PM

    […] WordPress で「見出し」をデザインして使う方法|コスギス […]

  2. […] WordPress で「見出し」をデザインして使う方法 – コスギス|新潟県長岡市のウェブ解析士×WordPressでサイト構築 […]

  3. […] ました。 WordPress で「見出し」をデザインして使う方法 h3タグを書くとCSSで青い線が入るようになってます。 […]

トラックバック URL