- ホーム >
- フリー素材
寺院向けフリー素材集:飾り枠(その1)
ここにテキストを入れます |
上のように、飾り枠の中にテキストを入れるには、いくつか方法がありますが、最も簡単なのは、background-imageを利用することです。飾り枠の画像をそのまま貼り付けると、文字を入れることはできません。ソースのサンプルをごらん下さい。
以下はダウンロード用画像です(縮小表示)
<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ファイルに同じような指定をする場合は、スタイルシートを外部ファイルとして用意するとよいでしょう。ちなみに、本サイトのメニューボタンは、この方式を応用しています。