CSSだけで見出し部分（hタグ）のデザインを装飾出来るデザインサンプルです。ソースコードをCSSにコピペするだけで簡単に実装できます。シンプルで使えそうなものをセレクトしました。
<h1>言葉には羽根がある THE WORDS HAVE WINGS.</h1>
ここでは見出し<h1>としていますが、CSSの記述をh2にすれば、HTMLのh2の部分が装飾されます。以下のCSSのタグをオリジナルタグにすることもできます。
（オリジナルタグの例）
CSSのh1の部分をaaaと書き換えて、HTMLで装飾を反映したいテキストを<aaa>テキスト</aaa>として囲います。
WordPressの場合
固定ページや投稿ページから「テキスト」で<h>タグの内側に記述します。
もくじ
吹き出しA
CSS
h1 {
position: relative;
padding: .5em .75em;
background-color: #f0f0f0;
border-radius: 6px;
}
h1::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #f0f0f0;
}
吹き出しB
CSS
h1 {
position: relative;
padding: .5em .75em;
background-color: #f0f0f0;
border-radius: 6px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, .1) inset;
}
h1::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
width: 0;
height: 0;
border: 10px solid transparent;
border-top: 15px solid #f0f0f0;
}
吹き出しC
CSS
h1 {
position: relative;
padding: .5em .75em;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 6px;
}
h1::before,
h1::after {
position: absolute;
top: 100%;
left: 30px;
content: '';
height: 0;
width: 0;
border: 10px solid transparent;
}
h1::before {
border-top: 15px solid #ccc;
}
h1::after {
margin-top: -2px;
border-top: 15px solid #fff;
}
下ボーダー
CSS
h1 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
下ボーダー（先頭の文字が大きくなる）
CSS
h1 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
h1:first-letter {
margin-right: .1em;
font-size: 1.5em;
}
左ボーダー
CSS
h1 {
padding: .25em 0 .25em .75em;
border-left: 6px solid #ccc;
}
左ボーダー（下ボーダー）
CSS
h1 {
padding: .25em 0 .5em .75em;
border-left: 6px solid #ccc;
border-bottom: 1px solid #ccc;
}
ボーダーで囲む
CSS
h1 {
padding: .5em .75em;
border: 1px solid #ccc;
}
ボーダーで囲む（角丸）
CSS
h1 {
padding: .5em .75em;
border: 1px solid #ccc;
border-radius: 4px;
}
ボーダーで囲む（手書きっぽい感じ）
CSS
h1 {
padding: 1em;
border: 3px solid #ccc;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}
背景色
CSS
h1 {
padding: .5em .75em;
background-color: #f6f6f6;
}
背景色（角丸）
CSS
h1 {
padding: .5em .75em;
background-color: #f6f6f6;
border-radius: 6px;
}
背景色（左ボーダー）
CSS
h1 {
padding: .5em .75em;
background-color: #f6f6f6;
border-left: 6px solid #ccc;
}
サブタイトルを表示出来るもの
HTML
<h1>
<span>ここに補足やサブタイトルなど</span>
ここにはタイトルや見出しとして表示したいテキストをいれる
</h1>CSS
h1 {
padding-bottom: .5em;
border-bottom: 1px solid #ccc;
}
h1 span {
display: block;
margin-bottom: .2em;
color: #aaa;
font-size: .9em;
}※見出しの下に表示させたい場合は、span要素の記述位置を変更して、CSSのmargin-bottomをmargin-topにすることなどで実装できます。
折り目（小）
CSS
h1 {
position: relative;
padding: 1em;
background-color: #f6f6f6;
}
h1::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fff #fff #ddd #ddd;
box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}
折り目（大）
CSS
h1 {
position: relative;
padding: 1em 4em 1em 1em;
-webkit-background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
border-radius: 6px;
}
h1::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 1.65507em;
height: 3.5493em;
background: -webkit-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
border-bottom-left-radius: 6px;
box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
-webkit-transform: translateY(-1.89424em) rotate(-40deg);
transform: translateY(-1.89424em) rotate(-40deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
ボックスに影をつける
CSS
h1 {
padding: .5em .75em;
background-color: #f6f6f6;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
このように、CSSのみでも色々デザインを変更することができます。
良かったら皆さんのオススメのデザインも教えてくださいね＾＾
