CSSで見出しとかに使う「装飾のための記号」を表示させる方法

CSS3が便利過ぎてもう逃げられない うかです、こんにちわ。

ブログなりウェブサイトなりを作っていてちょこちょこ使うのが「見出し」。この記事内でも使ってますが、それを装飾するために「◆」や「●」といった文字を表示させている方も少なくないかと。

Goal Setting
Photo by lululemon athletica

見出し部分はテキストのみがベター

見出しは本文テキストと区別できてナンボ。訪問者の目線を引くために、見出しテキスト前に「◆」や「●」といった記号を表示させている方、結構いらっしゃると思います。ソースを書くとこんな感じ。

<h3>◆見出しテキスト</h3>

でも、見出しをつけるたびに記号を入力するのはめんどくさいですよねー。また、見出しはSEO的にも重要な要素、余計なものは含めずにテキストのみにするのがベターです。

そこで、このような装飾のためだけに表示する記号を、CSSで表示させる方法をご紹介。

CSSで「◆」や「●」を表示させる方法

CSSでHTML上に表示させるには、contentプロパティと、:before:afterという疑似要素をセットで使用します。

見出しテキストの前に装飾用の記号◆を表示したい場合、次のようなCSSを記述することになります。

h3:before { content='◆'; }

これだけ。

実際には、文字の色や大きさを変えるなど、見出し部分の装飾に加えて記号を表示、ということになると思うので、次のような感じなろうかと。(うかブログで使用している実例です)

.entryBody h3 {
	margin:2em 0 0.75em;
	padding:0.75em 2px;
	color:#01648E;
	font-size:120%;
	font-weight:bold;
	border-top:solid 1px #eee;
	border-bottom:solid 1px #ddd;
}
.entryBody h3:before {
	content:'◆';
}

これで、この記事の見出しと同様、記号を含めた装飾をCSSだけで施すことができます。

また、見出しテキストを記号で囲みたい=テキストの前後に表示させたい場合は、beforeとafterを組み合わせて、次のようにします。

h3:after,
h3:before { content='◆'; }

これも簡単ですねー。

装飾はCSSで、HTMLはよりシンプルに

今は「装飾は全てCSS」というのが主流です。そうすることでHTMLもスッキリしますし、その方が作る側としてはラクチン。

既にHTML上で「◆」と書いている中で上記のCSSを加えると、「◆◆」と記号がだぶって表示されちゃうので、長く運営しているブログなんかだと途中から導入しづらい(全ての記事の見出しを修正しなきゃいけないので)ですが、新たにサイトやブログを作る場合、ちょっと楽してスッキリHTMLにするために、使ってみてはいかがでしょうか?