ブログ用見出しテンプレート[インパクト系]

(2016/02/01)

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

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

　本ページでは、h タグを使った見出しの装飾例をご紹介します。
　今までにご紹介したものより派手な装飾のため、コード量が増えます。
　特に、楽天ブログをお使いの方は文字数制限にご注意ください。

　必要に応じてコピー＆ペーストしてお使いいただければ幸いです。

参考記事はこちらをご覧ください。
　小手先のテクニックなんだけど、やっておくと差が出るブログの設定

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

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

ネイルファイル形

　見た目がとても可愛らしいネイルファイル（ネイルアート用の爪やすり）形のデザインです。
　記事を華やかに彩りたい方におすすめです。

ちょうしゅんいろ

<h3 style="background: #fdeff2;color: #c97586;font-size: 18pt;width: 80%;border-radius: 0 30px 30px 0 / 0 30px 30px 0;box-shadow: 0 1px 10px 0 #c97586;text-shadow: 0 0 5px;padding: 10px;margin-left: 20px;">ここにテキストを入力します</h3>

なまかべいろ

<h3 style="background: #dcd3b2;color: #94846a;font-size: 18pt;width: 80%;border-radius: 0 30px 30px 0 / 0 30px 30px 0;box-shadow: 0 1px 10px 0 #94846a;text-shadow: 0 0 5px;padding: 10px;margin-left: 20px;">ここにテキストを入力します</h3>

うすぐんじょういろ

<h3 style="background: #bce2e8;color: #5383c3;font-size: 18pt;width: 80%;border-radius: 0 30px 30px 0 / 0 30px 30px 0;box-shadow: 0 1px 10px 0 #5383c3;text-shadow: 0 0 5px;padding: 10px;margin-left: 20px;">ここにテキストを入力します</h3>

こけいろ

<h3 style="background: #c7dc68;color: #69821b;font-size: 18pt;width: 80%;border-radius: 0 30px 30px 0 / 0 30px 30px 0;box-shadow: 0 1px 10px 0 #69821b;text-shadow: 0 0 5px;padding: 10px;margin-left: 20px;">ここにテキストを入力します</h3>

すみれいろ

<h3 style="background: #bbc8e6;color: #7058a3;font-size: 18pt;width: 80%;border-radius: 0 30px 30px 0 / 0 30px 30px 0;box-shadow: 0 1px 10px 0 #7058a3;text-shadow: 0 0 5px;padding: 10px;margin-left: 20px;">ここにテキストを入力します</h3>

フェルトぬいとり形

　スティッチが施されたとても可愛らしいデザインです。
　どちらかというと女性向きかもしれませんが、男性でももちろんご利用になれます。

あさすおういろ

<h3 style="background: #f4b3c2;color: #a25768;font-size: 18pt;width: 80%;border: 2px dashed #e8ecef;border-radius: 5px;box-shadow: 0 0 3px 3px #f4b3c2;text-shadow: 0 0 5px;padding: 10px;">ここにテキストを入力します</h3>

ちとせみどりいろ

<h3 style="background: #a8c97f;color: #316745;font-size: 18pt;width: 80%;border: 2px dashed #d6e9ca;border-radius: 5px;box-shadow: 0 0 3px 3px #a8c97f;text-shadow: 0 0 5px;padding: 10px;">ここにテキストを入力します</h3>

さんごしゅいろ

<h3 style="background: #f7b977;color: #ee836f;font-size: 18pt;width: 80%;border: 2px dashed #ebe1a9;border-radius: 5px;box-shadow: 0 0 3px 3px #f7b977;text-shadow: 0 0 5px;padding: 10px;">ここにテキストを入力します</h3>

こげちゃいろ

<h3 style="background: #cbb994;color: #6f4b3e;font-size: 18pt;width: 80%;border: 2px dashed #856859;border-radius: 5px;box-shadow: 0 0 3px 3px #cbb994;text-shadow: 0 0 5px;padding: 10px;">ここにテキストを入力します</h3>

こんぺきいろ

<h3 style="background: #c1e4e9;color: #007bbb;font-size: 18pt;width: 80%;border: 2px dashed #698aab;border-radius: 5px;box-shadow: 0 0 3px 3px #c1e4e9;text-shadow: 0 0 5px;padding: 10px;">ここにテキストを入力します</h3>

せいらんいろ（背景色）

<h3 style="background: #274a78;color: #f8fbf8;font-size: 18pt;width: 80%;border: 2px dashed #f8fbf8;border-radius: 5px;box-shadow: 0 0 3px 3px #274a78;text-shadow: 0 0 5px;padding: 10px;">ここにテキストを入力します</h3>

右肩上がりでななめってるやつのコーナー

　遊び心のある右肩上がり（を目指したいですね）のヘッダデザインです。
　ただし、このデザインは上下方向のページ幅を取りますので、margin-bottom: の後ろの数値を変更しながら、表示位置を調製してください。

うめむらさきいろ

<h3 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform: rotate(-3deg);border-bottom: solid 2px #aa4c8f;width: 600px;color: #aa4c8f;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

えどちゃいろ

<h3 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform:rotate(-3deg);border-bottom:solid 2px #cd8c5c;width:600px;color:#cd8c5c;font-size:18pt;padding-bottom:5px;margin-bottom:30px;">ここにテキストを入力します</h3>

こくぼうしょく

<h3 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform: rotate(-3deg);border-bottom: solid 2px #7b6c3e;width: 600px;color: #7b6c3e;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

あさすおういろ

<h3 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform: rotate(-3deg);border-bottom: solid 2px #a25768;width: 600px;color: #a25768;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

てついろ

<h3 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform: rotate(-3deg);-ms-transform: rotate(-3deg);border-bottom: solid 2px #005243;width: 600px;color: #005243;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

右肩下がりでななめってるやつのコーナー

　右肩上がりの反対バージョンです。右肩上がりに比べると用途はかなり限られているような気がします（管理人所感）。
　このデザインは上下方向のページ幅を取りますので、margin-bottom: の後ろの数値を変更しながら、表示位置を調製してください。

ケンブリッジブルーいろ

<h3 style="-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);border-bottom: double 4px #25b7c0;width: 600px;color: #25b7c0;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

ローシェンナいろ

<h3 style="-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);border-bottom: double 4px #e17b34;width: 600px;color: #e17b34;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

フレンチグレイいろ

<h3 style="-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);border-bottom: double 4px #8da0b6;width: 600px;color: #8da0b6;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

レーズンいろ

<h3 style="-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);border-bottom: double 4px #6b395f;width: 600px;color: #6b395f;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

カメリアいろ

<h3 style="-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);-o-transform: rotate(3deg);-ms-transform: rotate(3deg);border-bottom: double 4px #da536e;width: 600px;color: #da536e;font-size: 18pt;padding-bottom: 5px;margin-bottom: 30px;">ここにテキストを入力します</h3>

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