ブログ用見出しテンプレート[ふきだし系]

(2016/02/01)

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

 本ページでは、h タグを使った見出しの装飾例をご紹介します。
 複数の部品を重ねて作っているため、コード量が無駄に多くなっています。
 特に、楽天ブログをお使いの方は文字数制限にご注意ください。

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

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

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


白抜きふきだし形(左)

 記事を書くなら一度は使ってみたくなるふきだし形のデザインです。 耳より情報や、おすすめ情報系の記事に活躍しそうですね。

しっこくいろ
<h3 style="width:80%;padding:10px;border: 2px solid #0d0015;border-radius:12px;background:#fff;color:#0d0015;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #0d0015 transparent transparent transparent;margin-left:21px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 5px 0 25px;border-color: #fff transparent transparent transparent;margin-left:21px;margin-top:-22px;margin-bottom:20px;"></div>
みなとねずみいろ
<h3 style="width:80%;padding:10px;border: 2px solid #80989b;border-radius:12px;background:#fff;color:#80989b;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #80989b transparent transparent transparent;margin-left:21px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 5px 0 25px;border-color: #fff transparent transparent transparent;margin-left:21px;margin-top:-22px;margin-bottom:20px;"></div>
みるいろ
<h3 style="width:80%;padding:10px;border: 2px solid #726d40;border-radius:12px;background:#fff;color:#726d40;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #726d40 transparent transparent transparent;margin-left:21px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 5px 0 25px;border-color: #fff transparent transparent transparent;margin-left:21px;margin-top:-22px;margin-bottom:20px;"></div>
はなだいろ
<h3 style="width:80%;padding:10px;border: 2px solid #2792c3;border-radius:12px;background:#fff;color:#2792c3;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #2792c3 transparent transparent transparent;margin-left:21px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 5px 0 25px;border-color: #fff transparent transparent transparent;margin-left:21px;margin-top:-22px;margin-bottom:20px;"></div>
ろくしょういろ
<h3 style="width:80%;padding:10px;border: 2px solid #47885e;border-radius:12px;background:#fff;color:#47885e;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #47885e transparent transparent transparent;margin-left:21px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 5px 0 25px;border-color: #fff transparent transparent transparent;margin-left:21px;margin-top:-22px;margin-bottom:20px;"></div>
にんじんいろ
<h3 style="width:80%;padding:10px;border: 2px solid #ec6800;border-radius:12px;background:#fff;color:#ec6800;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #ec6800 transparent transparent transparent;margin-left:21px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 5px 0 25px;border-color: #fff transparent transparent transparent;margin-left:21px;margin-top:-22px;margin-bottom:20px;"></div>
しおんいろ
<h3 style="width:80%;padding:10px;border: 2px solid #867ba9;border-radius:12px;background:#fff;color:#867ba9;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #867ba9 transparent transparent transparent;margin-left:21px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 5px 0 25px;border-color: #fff transparent transparent transparent;margin-left:21px;margin-top:-22px;margin-bottom:20px;"></div>

白抜きふきだし形(右)

 白抜きふきだしの右バージョンです。 使いやすさを考えて、色は左バージョンと同じにしてあります。

しっこくいろ
<h3 style="width:80%;padding:10px;border: 2px solid #0d0015;border-radius:12px;background:#fff;color:#0d0015;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width: 20px 26px 0 5px;border-color: #0d0015 transparent transparent transparent;float:right;margin-right:21px;margin-bottom:0px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 25px 0 5px;border-color: #fff transparent transparent transparent;float:right;margin-right:-31px;margin-top:-2px;"></div></div>
みなとねずみいろ
<h3 style="width:80%;padding:10px;border: 2px solid #80989b;border-radius:12px;background:#fff;color:#80989b;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width: 20px 26px 0 5px;border-color: #80989b transparent transparent transparent;float:right;margin-right:21px;margin-bottom:0px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 25px 0 5px;border-color: #fff transparent transparent transparent;float:right;margin-right:-31px;margin-top:-2px;"></div></div>
みるいろ
<h3 style="width:80%;padding:10px;border: 2px solid #726d40;border-radius:12px;background:#fff;color:#726d40;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width: 20px 26px 0 5px;border-color: #726d40 transparent transparent transparent;float:right;margin-right:21px;margin-bottom:0px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 25px 0 5px;border-color: #fff transparent transparent transparent;float:right;margin-right:-31px;margin-top:-2px;"></div></div>
はなだいろ
<h3 style="width:80%;padding:10px;border: 2px solid #2792c3;border-radius:12px;background:#fff;color:#2792c3;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width: 20px 26px 0 5px;border-color: #2792c3 transparent transparent transparent;float:right;margin-right:21px;margin-bottom:0px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 25px 0 5px;border-color: #fff transparent transparent transparent;float:right;margin-right:-31px;margin-top:-2px;"></div></div>
ろくしょういろ
<h3 style="width:80%;padding:10px;border: 2px solid #47885e;border-radius:12px;background:#fff;color:#47885e;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width: 20px 26px 0 5px;border-color: #47885e transparent transparent transparent;float:right;margin-right:21px;margin-bottom:0px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 25px 0 5px;border-color: #fff transparent transparent transparent;float:right;margin-right:-31px;margin-top:-2px;"></div></div>
にんじんいろ
<h3 style="width:80%;padding:10px;border: 2px solid #ec6800;border-radius:12px;background:#fff;color:#ec6800;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width: 20px 26px 0 5px;border-color: #ec6800 transparent transparent transparent;float:right;margin-right:21px;margin-bottom:0px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 25px 0 5px;border-color: #fff transparent transparent transparent;float:right;margin-right:-31px;margin-top:-2px;"></div></div>
しおんいろ
<h3 style="width:80%;padding:10px;border: 2px solid #867ba9;border-radius:12px;background:#fff;color:#867ba9;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width: 20px 26px 0 5px;border-color: #867ba9 transparent transparent transparent;float:right;margin-right:21px;margin-bottom:0px;"></div><div style="width:0px;height:0px;border-style: solid;border-width: 18px 25px 0 5px;border-color: #fff transparent transparent transparent;float:right;margin-right:-31px;margin-top:-2px;"></div></div>

ぬりつぶしふきだし形(左)

 ぬりつぶしふきだしの左バージョンです。 ポップなイメージの記事にしたい方におすすめです。

くろべにいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#302833;color:#fff;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #302833 transparent transparent transparent;margin-left:21px;margin-bottom:20px;"></div>
あらぞめいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#d69090;color:#c9171e;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #d69090 transparent transparent transparent;margin-left:21px;margin-bottom:20px;"></div>
きんちゃいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#f39800;color:#fff1cf;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #f39800 transparent transparent transparent;margin-left:21px;margin-bottom:20px;"></div>
きるつばみいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#b68d4c;color:#8a3b00;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #b68d4c transparent transparent transparent;margin-left:21px;margin-bottom:20px;"></div>
かめのぞきいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#a2d7dd;color:#1e50a2;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #a2d7dd transparent transparent transparent;margin-left:21px;margin-bottom:20px;"></div>
もえぎいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#aacf53;color:#007b43;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #aacf53 transparent transparent transparent;margin-left:21px;margin-bottom:20px;"></div>
りんどういろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#9079ad;color:#460e44;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="width:0px;height:0px;border-style: solid;border-width: 20px 5px 0 26px;border-color: #9079ad transparent transparent transparent;margin-left:21px;margin-bottom:20px;"></div>

ぬりつぶしふきだし形(右)

 ぬりつぶしふきだしの右バージョンです。 使いやすさを考えて、色は左バージョンと同じにしてあります。

くろべにいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#302833;color:#fff;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="margin-top:0px;width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width:20px 26px 0 5px;border-color: #302833 transparent transparent transparent;float:right;margin-right:21px;margin-top:-1px;margin-bottom:20px;"></div></div>
あらぞめいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#d69090;color:#c9171e;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="margin-top:0px;width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width:20px 26px 0 5px;border-color: #d69090 transparent transparent transparent;float:right;margin-right:21px;margin-top:-1px;margin-bottom:20px;"></div></div>
きんちゃいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#f39800;color:#fff1cf;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="margin-top:0px;width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width:20px 26px 0 5px;border-color: #f39800 transparent transparent transparent;float:right;margin-right:21px;margin-top:-1px;margin-bottom:20px;"></div></div>
きるつばみいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#b68d4c;color:#8a3b00;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="margin-top:0px;width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width:20px 26px 0 5px;border-color: #b68d4c transparent transparent transparent;float:right;margin-right:21px;margin-top:-1px;margin-bottom:20px;"></div></div>
かめのぞきいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#a2d7dd;color:#1e50a2;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="margin-top:0px;width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width:20px 26px 0 5px;border-color: #a2d7dd transparent transparent transparent;float:right;margin-right:21px;margin-top:-1px;margin-bottom:20px;"></div></div>
もえぎいろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#aacf53;color:#007b43;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="margin-top:0px;width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width:20px 26px 0 5px;border-color: #aacf53 transparent transparent transparent;float:right;margin-right:21px;margin-top:-1px;margin-bottom:20px;"></div></div>
りんどういろ
<h3 style="width:80%;padding:10px;border-radius:12px;background:#9079ad;color:#460e44;font-size:16pt;margin-bottom:0px;">ここにテキストを入力します</h3><div style="margin-top:0px;width:80%;margin-bottom:20px;"><div style="width:0px;height:0px;border-style: solid;border-width:20px 26px 0 5px;border-color: #9079ad transparent transparent transparent;float:right;margin-right:21px;margin-top:-1px;margin-bottom:20px;"></div></div>
色をイロイロ変えてみたい方は、こちらのサイトがおすすめです。
WEB色見本 原色大辞典 [外部リンク]

使用上の注意:

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

配布コード使用上の注意

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

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


web拍手 by FC2 tweet this rakuten profile いいね! Google+ share


© Rakuten Group, Inc.
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: