ブログ用見出しテンプレート[フラット系]

(2016/02/01)

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

　このページのテンプレートタグをブログ記事やフリーページに貼り付けてテキストを変更することによって、パッと読者の目を引く見出しをつくることができます。

English version will be available soon.

実線タイプ

　カラーパターンを、和色中心でそろえてみました。
　日本人の心にマッチした色づかいで、あなたのブログをシックな雰囲気にしてみませんか？

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

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

のしめはないろ

<h3 style="border-bottom: 1px solid #426579;border-left: 10px solid #426579;padding: 7px;">ここにテキストを入力します</h3>

もえぎ色

<h3 style="border-bottom: 1px solid #006e54;border-left: 10px solid #006e54;padding: 7px;">ここにテキストを入力します</h3>

うぐいす茶

<h3 style="border-bottom: 1px solid #715c1f;border-left: 10px solid #715c1f;padding: 7px;">ここにテキストを入力します</h3>

なかべに

<h3 style="border-bottom: 1px solid #c85179;border-left: 10px solid #c85179;padding: 7px;">ここにテキストを入力します</h3>

うすねず

<h3 style="border-bottom: 1px solid #9790a4;border-left: 10px solid #9790a4;padding: 7px;">ここにテキストを入力します</h3>

破線タイプ

きくじん

<h3 style="border-bottom: 2px dotted #6e7955;border-left: 10px solid #6e7955;padding: 7px;">ここにテキストを入力します</h3>

うつぶしいろ

<h3 style="border-bottom: 2px dotted #9d896c;border-left: 10px solid #9d896c;padding: 7px;">ここにテキストを入力します</h3>

かちかえし

<h3 style="border-bottom: 2px dotted #203744;border-left: 10px solid #203744;padding: 7px;">ここにテキストを入力します</h3>

きつねいろ

<h3 style="border-bottom: 2px dotted #c38743;border-left: 10px solid #c38743;padding: 7px;">ここにテキストを入力します</h3>

からすばいろ

<h3 style="border-bottom: 2px dotted #180614;border-left: 10px solid #180614;padding: 7px;">ここにテキストを入力します</h3>

ボックスタイプ

べにみどり

<h3 style="border-left: 15px solid #8491c3;padding: 7px;background: #ccd6ff;">ここにテキストを入力します</h3>

わすれなぐさいろ

<h3 style="border-left: 15px solid #89c3eb;padding: 7px;background: #bbd7ea;">ここにテキストを入力します</h3>

ももいろ

<h3 style="border-left: 15px solid #f09199;padding: 7px;background: #efd7d9;">ここにテキストを入力します</h3>

わかくさいろ

<h3 style="border-left: 15px solid #c3d825;padding: 7px;background: #e3e5d0;">ここにテキストを入力します</h3>

おいたけいろ

<h3 style="border-left: 15px solid #769164;padding: 7px;background: #e0ffcc;">ここにテキストを入力します</h3>

地下鉄シリーズ

　東京メトロシリーズ。カラーパターンは以下のサイトでご覧になれます。
　WEB色見本メトロカラー [外部リンク]

銀座線オレンジ

<h3 style="border-left: 15px solid #f39700;padding: 7px;background: #f2dec1;">ここにテキストを入力します</h3>

丸の内レッド

<h3 style="border-left: 15px solid #e60012;padding: 7px;background: #ffccd0;">ここにテキストを入力します</h3>

三田線ブルー

<h3 style="border-left: 15px solid #0079c2;padding: 7px;background: #cceaff;">ここにテキストを入力します</h3>

日比谷線シルバー

<h3 style="border-left: 15px solid #9caeb7;padding: 7px;background: #d0dee5;">ここにテキストを入力します</h3>

千代田線グリーン

<h3 style="border-left: 15px solid #009944;padding: 7px;background: #b2ffd4;">ここにテキストを入力します</h3>

有楽町線ゴールド

<h3 style="border-left: 15px solid #d7c447;padding: 7px;background: #d6cd95;">ここにテキストを入力します</h3>

半蔵門線パープル

<h3 style="border-left: 15px solid #9b7cb6;padding: 7px;background: #dbcee5;">ここにテキストを入力します</h3>

トップラインタイプ

　シャドウ入りで見栄えはよくなりますが、コード量が増えます。
　楽天ブログをご利用の方は上限文字数にご注意ください。

ねずみいろ

<h3 style="border-top: 3px solid #808080;box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.16);padding: 7px;">ここにテキストを入力します</h3>

オリーブいろ

<h3 style="border-top: 3px solid #72640c;box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.1);padding: 7px;">ここにテキストを入力します</h3>

マルーンいろ

<h3 style="border-top: 3px solid #6a1917;box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.16);padding: 7px;">ここにテキストを入力します</h3>

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

<h3 style="border-top: 3px solid #c1ab05;box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.16);padding: 7px;">ここにテキストを入力します</h3>

クロムグリーンいろ

<h3 style="border-top: 3px solid #00533f;box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.16);padding: 7px;">ここにテキストを入力します</h3>

ラズベリーレッドいろ

<h3 style="border-top: 3px solid #9f166a;box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.16);padding: 7px;">ここにテキストを入力します</h3>

上下ラインタイプ

　上下にラインが入ったタイプです。シンプルでありながら、どんな記事にも対応できるデザインです。

くろいろ

<h3 style="border-top: 1px solid #000;border-bottom: 1px solid #000;padding: 7px;">ここにテキストを入力します</h3>

あずきいろ

<h3 style="border-top: 1px solid #96514d;border-bottom: 1px solid #96514d;padding: 7px;">ここにテキストを入力します</h3>

やまぶきいろ

<h3 style="border-top: 1px solid #f8b500;border-bottom: 1px solid #f8b500;padding: 7px;">ここにテキストを入力します</h3>

ひすいいろ

<h3 style="border-top: 1px solid #38b48b;border-bottom: 1px solid #38b48b;padding: 7px;">ここにテキストを入力します</h3>

ひいろ

<h3 style="border-top: 1px solid #d3381c;border-bottom: 1px solid #d3381c;padding: 7px;">ここにテキストを入力します</h3>

りきゅういろ

<h3 style="border-top: 1px solid #8f8667;border-bottom: 1px solid #8f8667;padding:7px;">ここにテキストを入力します</h3>

るりいろ

<h3 style="border-top: 1px solid #1e50a2;border-bottom: 1px solid #1e50a2;padding: 7px;">ここにテキストを入力します</h3>

上下ダブルラインタイプ

　上下に二重線が入ったタイプです。記事が引き締まった感じになります。

くろいろ

<h3 style="border-top: 3px double #000;border-bottom: 3px double #000;padding: 7px;">ここにテキストを入力します</h3>

セルリアンブルーいろ

<h3 style="border-top: 3px double #00a0de;border-bottom: 3px double #00a0de;padding: 7px;">ここにテキストを入力します</h3>

バーリーウッドいろ

<h3 style="border-top: 3px double #deb887;border-bottom: 3px double #deb887;padding: 7px;">ここにテキストを入力します</h3>

さびおなんどいろ

<h3 style="border-top: 3px double #53727d;border-bottom: 3px double #53727d;padding: 7px;">ここにテキストを入力します</h3>

くるみぞめいろ

<h3 style="border-top: 3px double #a58f86;border-bottom: 3px double #a58f86;padding: 7px;">ここにテキストを入力します</h3>

えびいろ

<h3 style="border-top: 3px double #640125;border-bottom: 3px double #640125;padding: 7px;">ここにテキストを入力します</h3>

ピンクアーモンドいろ

<h3 style="border-top: 3px double #e3acae;border-bottom: 3px double #e3acae;padding: 7px;">ここにテキストを入力します</h3>

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

使用上の注意：

　配布コードは改変自由となっております。
　詳細な使用条件につきましてはこちらのページをご覧ください。

　配布コード使用上の注意

　テンプレートコードの改変についてはサポートを提供しておりませんが、リンクの張り方がわからない、見出しの付け方がわからないなどといった、基本的な操作方法についてご質問のある方は、以下の拍手タグからお願いします。

　質問をされる場合は、質問者を識別するために、ニックネームの入力にご協力ください。