ブログ用見出しテンプレート[フィルム系]
(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>
使用上の注意：
配布コードは改変自由となっておりますが、詳細な使用条件につきましてはこちらのページをご覧ください。
配布コード使用上の注意
テンプレートコードの改変についてはサポートを提供しておりませんが、リンクの張り方がわからない、見出しの付け方がわからないなどといった、基本的な操作方法についてご質問のある方は、以下の拍手タグからお願いします。
質問をされる場合は、質問者を識別するために、ニックネームの入力にご協力ください。
© Rakuten Group, Inc.
