ブログ用見出しテンプレート[フィルム系]

(2016/02/01)

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

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

　本ページでは、h タグを使った映画のフィルム効果をご紹介します。
　今までにご紹介したものより派手な装飾のため、コード量が増えていますが、映画やドラマのレビュー記事に使うと良いかもしれません。
　特に、楽天ブログをお使いの方は文字数制限にご注意ください。

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

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

映画フィルム形（ノーマル）

　ごく普通の映画フィルムデザインを 3 色用意しました。
　font-size の数字を変更すると、フォントの大きさを変更できます。

黒いフィルム

<h3 style="background:#000;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #000;text-shadow: 0 0 5px;padding:20px;margin-left:10px;">ここにテキストを入力します</h3>

セピア色のフィルム

<h3 style="background:#554738;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #554738;text-shadow: 0 0 5px;padding:20px;margin-left:10px;">ここにテキストを入力します</h3>

カビたフィルム

<h3 style="background:#2f5d50;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #2f5d50;text-shadow: 0 0 5px;padding:20px;margin-left:10px;">ここにテキストを入力します</h3>

映画フィルム形（ノーマル影付き）

　ノーマルタイプの映画フィルムデザインに、影を付けて立体効果を出したものです。
　ノーマルタイプに比べると、若干コード量が増えていますが、見た目を大切にしたい方にはおすすめです。
　font-size の数字を変更すると、フォントの大きさを変更できます。

黒いフィルム（影付き）

<h3 style="background:#000;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #000,25px 20px 4px 2px rgba(0,0,0,0.2);text-shadow: 0 0 5px;padding:20px;margin-left:10px;">ここにテキストを入力します</h3>

セピア色のフィルム（影付き）

<h3 style="background:#554738;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #554738,25px 20px 4px 2px rgba(0,0,0,0.2);text-shadow: 0 0 5px;padding:20px;margin-left:10px;">ここにテキストを入力します</h3>

カビたフィルム（影付き）

<h3 style="background:#2f5d50;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #2f5d50,25px 20px 4px 2px rgba(0,0,0,0.2);text-shadow: 0 0 5px;padding:20px;margin-left: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); background:#000;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #000;text-shadow: 0 0 5px;padding:20px;margin-left:10px;margin-bottom:40px;">ここにテキストを入力します</h3>

セピア色のフィルム

<h3 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform:rotate(-3deg);-ms-transform:rotate(-3deg); background:#554738;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #554738;text-shadow: 0 0 5px;padding:20px;margin-left:10px;margin-bottom:40px;">ここにテキストを入力します</h3>

かびたフィルム

<h3 style="-webkit-transform: rotate(-3deg);-moz-transform: rotate(-3deg);transform: rotate(-3deg);-o-transform:rotate(-3deg);-ms-transform:rotate(-3deg); background:#2f5d50;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #2f5d50;text-shadow: 0 0 5px;padding:20px;margin-left:10px;margin-bottom:40px;">ここにテキストを入力します</h3>

右肩下がりでななめってる映画フィルム形

　右肩上がりの反対バージョンです。
　このデザインも上下方向のページ幅を取りますので、margin-bottom: の後ろの数値を変更しながら、表示位置を調製してください。

黒いフィルム

<h3 style="-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);-o-transform:rotate(3deg);-ms-transform:rotate(3deg); background:#000;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #000;text-shadow: 0 0 5px;padding:20px;margin-left:10px;margin-bottom:40px;">ここにテキストを入力します</h3>

セピア色のフィルム

<h3 style="-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);-o-transform:rotate(3deg);-ms-transform:rotate(3deg); background:#554738;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #554738;text-shadow: 0 0 5px;padding:20px;margin-left:10px;margin-bottom:40px;">ここにテキストを入力します</h3>

かびたフィルム

<h3 style="-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);-o-transform:rotate(3deg);-ms-transform:rotate(3deg); background:#2f5d50;color:#fff;font-size:18pt;width:80%;border-top:13px dashed #fff;border-bottom:13px dashed #fff;box-shadow: 0 0 3px 8px #2f5d50;text-shadow: 0 0 5px;padding:20px;margin-left:10px;margin-bottom:40px;">ここにテキストを入力します</h3>

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