フリー素材

寺院向けフリー素材集:飾り枠(その1)

ここにテキストを入れます

上のように、飾り枠の中にテキストを入れるには、いくつか方法がありますが、最も簡単なのは、background-imageを利用することです。飾り枠の画像をそのまま貼り付けると、文字を入れることはできません。ソースのサンプルをごらん下さい。

以下はダウンロード用画像です(縮小表示)

フレーム黒1 フレーム赤1
フレーム青1 フレーム緑1
フレーム黄1 フレームpink1
フレーム黒2 フレーム赤2
フレーム青2 フレーム緑2
フレーム黄2 フレームpink2
フレーム黒3 フレーム赤3
フレーム青3 フレーム緑3
フレーム黄3 フレームpink3

<table style="height: ○○px; width: ○○px;" border="0" cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td style="text-align: center; vertical-align: middle; background-image: url(フォルダ名/ファイル名);">
<span style="font-weight: normal; font-size: ○○px; color: 色コード;">テキスト</span>
</td>
</tr>
</tbody>
</table>
----------------------------------------------
表のサイズは、使用する画像の大きさにあわせます。
background-image:urlは、相対パス指定します。つまり、当のHTMLファイルからみて、画像がどの階層に存在するかを指定します。画像のフォルダが、一つ上の階層にある場合は、"../"を、二つ上の階層にあれば、"../../"のようにします。よく分からない場合は、googleで「相対パス指定」として検索してみてください。
セル<td>の中に入れるテキストは、自由にスタイル指定ができますし、リンクも貼れます。複数のHTMLファイルに同じような指定をする場合は、スタイルシートを外部ファイルとして用意するとよいでしょう。ちなみに、本サイトのメニューボタンは、この方式を応用しています。