3631968

ショップハンター

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

(2016/02/01)

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

　フラットタイプの応用編です。見出しの前にアクセントカラーがついています。

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

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

丸抜きタイプ

　シンプルな丸を使ったアクセントです。これだけでもかなり注目度がアップしますね。

のしめはないろ

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

もえぎ色

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

うぐいす茶

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

なかべに

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

うすねず

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

きくじん

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

うつぶしいろ

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

かえちかえし

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

きつねいろ

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

からすばいろ

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

ぬりつぶし丸タイプ

　文字コードの●でも代用できますが、こちらのタグは拡大してもギザギザにならないのが特徴ですね。　デザイン重視の方におすすめです。

のしめはないろ

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

もえぎいろ

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

うぐいす茶

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

なかべに

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

うすねず

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

きくじん

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

うつぶしいろ

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

かちかえし

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

きつねいろ

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

からすばいろ

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

四角抜きタイプ

ねずみいろ

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

ぬりつぶし四角タイプ

　四角を塗りつぶしたタイプです。記号フォントの■でも代用できますが、あえて自作デザインにこだわりたい方へ。

ねずみいろ

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

オリーブいろ

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

マルーンいろ

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

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

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

クロームグリーンいろ

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

ラズベリーレッドいろ

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

くろいろ

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

やまぶきいろ

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

ひいろ

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

セルリアンブルーいろ

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

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