ブログ用見出しテンプレート[立体系]

(2016/02/01)

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

English version will be available soon.

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

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


文字のみのエフェクト

 文字だけでも十分にインパクトを与えたい方向けのデザインです。 フォントサイズを変更したい方は、font-size: の後の数字を変更してみてください。

のしめはないろ

<h3 style="text-shadow: 1px 1px 3px #000;color: #426579;font-size: 18pt;">ここにテキストを入力します</h3>

もえぎ色

<h3 style="text-shadow: 1px 1px 3px #000;color: #006e54;font-size: 18pt;">ここにテキストを入力します</h3>

うぐいす茶

<h3 style="text-shadow: 1px 1px 3px #000;color: #715c1f;font-size: 18pt;">ここにテキストを入力します</h3>

なかべに

<h3 style="text-shadow: 1px 1px 3px #000;color: #c85179;font-size: 18pt;">ここにテキストを入力します</h3>

うすねず

<h3 style="text-shadow: 1px 1px 3px #000;color: #9790a4;font-size: 18pt;">ここにテキストを入力します</h3>

文字エフェクト&サイドバーつき

 シンプルな中にも立体的なサイドバーも欲しい方向けのデザインです。 記事のジャンルを問わずにお使いいただけると思います。

きくじん

<h3 style="border-left: 12px solid #6e7955;text-shadow: 1px 1px 3px #000;color: #6e7955;font-size: 18pt;padding: 10px;box-shadow: 0 5px 2px -2px #6e7955;">ここにテキストを入力します</h3>

うつぶしいろ

<h3 style="border-left: 12px solid #9d896c;text-shadow: 1px 1px 3px #000;color: #9d896c;font-size: 18pt;padding: 10px;box-shadow: 0 5px 2px -2px #9d896c;">ここにテキストを入力します</h3>

かちかえし

<h3 style="border-left: 12px solid #203744;text-shadow: 1px 1px 3px #000;color: #203744;font-size: 18pt;padding: 10px;box-shadow: 0 5px 2px -2px #203744;">ここにテキストを入力します</h3>

きつねいろ

<h3 style="border-left: 12px solid #c38743;text-shadow: 1px 1px 3px #000;color: #c38743;font-size: 18pt;padding: 10px;box-shadow: 0 5px 2px -2px #c38743;">ここにテキストを入力します</h3>

からすばいろ

<h3 style="border-left:12px solid #180614;text-shadow: 1px 1px 3px #000;color: #180614;font-size: 18pt;padding: 10px;box-shadow: 0 5px 2px -2px #180614;">ここにテキストを入力します</h3>

文字エフェクト&ラウンドボックスタイプ

 3D エフェクトの入った立体文字をラウンドボックスで囲み、左端にアクセントカラーを配置したタイプです。 背景色が淡いものであれば、かなり引き立つ感じになると思います。

べにみどり

<h3 style="text-shadow: 1px 1px 3px #000;border-left: 25px solid #8491c3;padding: 7px;background: #ccd6ff;border-radius: 20px;box-shadow: 3px 3px 3px;font-size: 18pt;color: #8491c3;">ここにテキストを入力します</h3>

わすれなぐさいろ

<h3 style="text-shadow: 1px 1px 3px #000;border-left: 25px solid #89c3eb;padding: 7px;background: #bbd7ea;border-radius: 20px;box-shadow: 3px 3px 3px;font-size: 18pt;color: #89c3eb;">ここにテキストを入力します</h3>

ももいろ

<h3 style="text-shadow: 1px 1px 3px #000;border-left: 25px solid #f09199;padding: 7px;background: #efd7d9;border-radius: 20px;box-shadow: 3px 3px 3px;font-size: 18pt;color: #f09199;">ここにテキストを入力します</h3>

わかくさいろ

<h3 style="text-shadow: 1px 1px 3px #000;border-left: 25px solid #c3d825;padding: 7px;background: #e3e5d0;border-radius: 20px;box-shadow: 3px 3px 3px;font-size: 18pt;color: #c3d825;">ここにテキストを入力します</h3>

おいたけいろ

<h3 style="text-shadow: 1px 1px 3px #000;border-left: 25px solid #769164;padding: 7px;background: #e0ffcc;border-radius: 20px;box-shadow: 3px 3px 3px;font-size: 18pt;color: #769164;">ここにテキストを入力します</h3>

文字エフェクト&シャドウボックスタイプ

 サイドバーなしタイプの、シンプルな色つきシャドウボックスです。 タグの中に background:お好みのカラーコード を指定すると、背景色の指定もできます。

ねずみいろ

<h3 style="padding: 10px;box-shadow: 2px 1px 3px 3px #808080;padding: 7px;text-shadow: 1px 1px 3px #000;color: #808080;font-size :18pt;">ここにテキストを入力します</h3>

オリーブいろ

<h3 style="padding: 10px;box-shadow: 2px 1px 3px 3px #72640c;padding: 7px;text-shadow: 1px 1px 3px #000;color: #72640c;font-size: 18pt;">ここにテキストを入力します</h3>

マルーンいろ

<h3 style="padding: 10px;box-shadow: 2px 1px 3px 3px #6a1917;padding: 7px;text-shadow: 1px 1px 3px #000;color: #6a1917;font-size: 18pt;">ここにテキストを入力します</h3>

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

<h3 style="padding: 10px;box-shadow: 2px 1px 3px 3px #c1ab05;padding: 7px;text-shadow: 1px 1px 3px #000;color: #c1ab05;font-size: 18pt;">ここにテキストを入力します</h3>

クロムグリーンいろ

<h3 style="padding: 10px;box-shadow: 2px 1px 3px 3px #00533f;padding: 7px;text-shadow: 1px 1px 3px #000;color: #00533f;font-size: 18pt;">ここにテキストを入力します</h3>

ラズベリーレッドいろ

<h3 style="padding: 10px;box-shadow: 2px 1px 3px 3px #9f166a;padding: 7px;text-shadow: 1px 1px 3px #000;color: #9f166a;font-size: 18pt;">ここにテキストを入力します</h3>
色をイロイロ変えてみたい方は、こちらのサイトがおすすめです。
WEB色見本 原色大辞典 [外部リンク]

使用上の注意:

使用上の注意:

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

配布コード使用上の注意

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

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


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



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