ブログ用見出しテンプレート[アクセント2]

(2016/02/01)

HOME > CSS でかっこいい h タグをつくろう > [フラット系1] > [フラット系2] > [アクセント1] > [アクセント2] > [立体系] > [インパクト系] > [ペーパー系] > [フィルム系] > [ふきだし系] > [真鍮ボタン] > [真鍮ボタン2] > [セロファンリボン 1] > [セロファンリボン 2] > [ピン留めリボン]

　フラットタイプの応用編です。見出しの前にアクセントカラーをつけ、4 種類のラインバリエーションをそろえてみました。

　カラーパターンは以下のサイトでご覧になれます。
　WEB色見本和色大辞典 [外部リンク]

カスタマイズ方法はこちらをどうぞ
色 | 線 | フォント | 余白 | 幅

丸抜きタイプ（上下ライン）

　上下にラインが入ることでシャープなイメージになります。また、アクセントカラーが読者の目をひきつけます。

のしめはないろ

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #426579;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #426579;border-bottom: 1px solid #426579;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

もえぎ色

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #006e54;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #006e54;border-bottom: 1px solid #006e54;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

うぐいす茶

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #715c1f;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #715c1f;border-bottom: 1px solid #715c1f;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

なかべに

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #c85179;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #c85179;border-bottom: 1px solid #c85179;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

うすねず

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #9790a4;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #9790a4;border-bottom: 1px solid #9790a4;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

きくじん

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #6e7955;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #6e7955;border-bottom: 1px solid #6e7955;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

うつぶしいろ

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #9d896c;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #9d896c;border-bottom: 1px solid #9d896c;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

かえちかえし

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #203744;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #203744;border-bottom: 1px solid #203744;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

きつねいろ

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #c38743;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #c38743;border-bottom: 1px solid #c38743;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

からすばいろ

<div style="width: 15px;height: 15px;border-radius: 50%;border: 3px solid #180614;background: #fff;"></div><h3 style="margin-top: -27px;border-top: 1px solid #180614;border-bottom: 1px solid #180614;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

ぬりつぶし丸タイプ（上下ダブルライン）

　二重線のラインはシックな雰囲気になります。

のしめはないろ

<div style="width: 18px;height: 18px;border-radius: 50%;background: #426579;"></div><h3 style="margin-top: -27px;border-top: 3px double #426579;border-bottom: 3px double #426579;height: 30px;padding-left: 1.85em;padding-top: 4px;">ここにテキストを入力します</h3>

もえぎいろ

<div style="width: 18px;height: 18px;border-radius: 50%;background: #006e54;"></div><h3 style="margin-top: -27px;border-top: 3px double #006e54;border-bottom: 3px double #006e54;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

うぐいす茶

<div style="width: 18px;height: 18px;border-radius: 50%;background: #715c1f;"></div><h3 style="margin-top: -27px;border-top: 3px double #715c1f;border-bottom: 3px double #715c1f;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

なかべに

<div style="width: 18px;height: 18px;border-radius: 50%;background: #c85179;"></div><h3 style="margin-top: -27px;border-top: 3px double #c85179;border-bottom: 3px double #c85179;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

うすねず

<div style="width: 18px;height: 18px;border-radius: 50%;background: #9790a4;"></div><h3 style="margin-top: -27px;border-top: 3px double #9790a4;border-bottom: 3px double #9790a4;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

きくじん

<div style="width: 18px;height: 18px;border-radius: 50%;background: #6e7955;"></div><h3 style="margin-top: -27px;border-top: 3px double #6e7955;border-bottom: 3px double #6e7955;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

うつぶしいろ

<div style="width: 18px;height: 18px;border-radius: 50%;background: #9d896c;"></div><h3 style="margin-top: -27px;border-top: 3px double #9d896c;border-bottom: 3px double #9d896c;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

かちかえし

<div style="width: 18px;height: 18px;border-radius: 50%;background: #203744;"></div><h3 style="margin-top: -27px;border-top: 3px double #203744;border-bottom: 3px double #203744;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

きつねいろ

<div style="width: 18px;height: 18px;border-radius: 50%;background: #c38743;"></div><h3 style="margin-top: -27px;border-top: 3px double #c38743;border-bottom: 3px double #c38743;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

からすばいろ

<div style="width: 18px;height: 18px;border-radius: 50%;background: #180614;"></div><h3 style="margin-top: -27px;border-top: 3px double #180614;border-bottom: 3px double #180614;height: 30px;padding-left: 1.75em;padding-top: 4px;">ここにテキストを入力します</h3>

四角抜きタイプ（点線）

　下線を点線にすると、主張が抑えられますので、文章系サイトにもおすすめですね。

ねずみいろ

<div style="width: 15px;height: 15px;border: 3px solid #808080;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #808080;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

オリーブいろ

<div style="width: 15px;height: 15px;border: 3px solid #72640c;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #72640c;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

マルーンいろ

<div style="width: 15px;height: 15px;border: 3px solid #6a1917;background: #fff;;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #6a1917;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

アンティックゴールドいろ

<div style="width: 15px;height: 15px;border: 3px solid #c1ab05;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #c1ab05;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

クロムグリーンいろ

<div style="width: 15px;height: 15px;border: 3px solid #00533f;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #00533f;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

ラズベリーレッドいろ

<div style="width: 15px;height: 15px;border: 3px solid #9f166a;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #9f166a;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

くろいろ

<div style="width: 15px;height: 15px;border: 3px solid #000;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #000;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

やまぶきいろ

<div style="width: 15px;height: 15px;border: 3px solid #f8b500;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #f8b500;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

ひいろ

<div style="width: 15px;height: 15px;border: 3px solid #d3381c;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #d3381c;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

セルリアンブルーいろ

<div style="width: 15px;height: 15px;border: 3px solid #00a0de;background: #fff;"></div><h3 style="margin-top: -25px;border-bottom: 1px dotted #00a0de;height: 30px;padding-left: 1.75em;">ここにテキストを入力します</h3>

ぬりつぶし四角タイプ（枠線）

　枠を入れることによって、ページの文章構成が引き締まります。

ねずみいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #808080;"></div><h3 style="margin-top: -27px;border: 1px solid #808080;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

オリーブいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #72640c;"></div><h3 style="margin-top: -27px;border: 1px solid #72640c;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

マルーンいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #6a1917;"></div><h3 style="margin-top: -27px;border: 1px solid #6a1917;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

アンティックゴールドいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #c1ab05;"></div><h3 style="margin-top: -27px;border: 1px solid #c1ab05;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

クロームグリーンいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #00533f;"></div><h3 style="margin-top: -27px;border: 1px solid #00533f;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

ラズベリーレッドいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #9f166a;"></div><h3 style="margin-top: -27px;border: 1px solid #9f166a;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

くろいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #000;"></div><h3 style="margin-top: -27px;border: 1px solid #000;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

やまぶきいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #f8b500;"></div><h3 style="margin-top: -27px;border: 1px solid #f8b500;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

ひいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #d3381c;"></div><h3 style="margin-top: -27px;border: 1px solid #d3381c;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

セルリアンブルーいろ

<div style="width: 18px;height: 18px;margin-left: 5px;background: #00a0de;"></div><h3 style="margin-top: -27px;border: 1px solid #00a0de;height: 30px;padding-top: 4px;padding-left: 1.75em;">ここにテキストを入力します</h3>

色をイロイロ変えてみたい方は、こちらのサイトがおすすめです。
WEB色見本原色大辞典 [外部リンク]