フリー素材

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

額縁イメージの飾り枠(縦伸縮)

サンプル
ここにテキストまたは画像を入れます。横は270pxに固定されていますが、縦が伸縮します。画像は横227px以下のものにしてください。
ダウンロード用画像
上
左 右
下
設置の仕方(HTMLソース)
赤い文字の部分を任意に書き換えて下さい
ヘッダに次の一行を挿入
<meta http-equiv="Content-Style-Type" content="text/css">
---------------------------
<table style="width:270px;" border="0" cellpadding="0" cellspacing="0">
<tr> <td colspan="3" rowspan="1" style="height:24px; background-image:url(./フォルダ名/a_top.gif);"></td> </tr>
<tr>
<td style="width:23px; background-image:url(./フォルダ名/a_left.gif);"></td>
<td style="width:227px; padding:*px; background-color:white;">ここにテキストまたは画像</td>
<td style="width:20px; background-image:url(./フォルダ名/a_right.gif);"></td>
</tr>
<tr> <td colspan="3" rowspan="1" style="height:20px; background-image:url(./フォルダ名/a_bottom.gif);"></td> </tr>
</table>
 

額縁イメージの飾り枠(横伸縮)

サンプル
ここにテキストまたは画像を入れます。
縦は271pxに固定されていますが、横が伸縮します。
画像は縦227px以下のものにしてください。
ダウンロード用画像
左 上 右
下
設置の仕方(HTMLソース)
赤い文字の部分を任意に書き換えて下さい
ヘッダに次の一行を挿入
<meta http-equiv="Content-Style-Type" content="text/css">
---------------------------
<table style="width:***px; height:271px;" border="0" cellpadding="0" cellspacing="0"> <tr>
<td colspan="1" rowspan="3" style="background-image:url(./フォルダ名/b_left.gif); width:23px;"></td>
<td style="background-image:url(./フォルダ名/b_top.gif); height:24px;"></td>
<td colspan="1" rowspan="3" style="background-image:url(./フォルダ名/b_right.gif); width:20px;"></td>
</tr> <tr>
<td style="height:227px; padding:*px; background-color:white;">ここにテキストまたは画像</td> </tr> <tr>
<td style="background-image:url(./フォルダ名/b_bottom.gif); height:20px;"></td>
</tr> </tbody> </table>
 

額縁イメージの飾り枠(縦横伸縮)

縦横に伸縮するので、画像を入れるのに適しています
下のサンプル画像は、大阪教区のHPからお借りしました
サンプル画像
ダウンロード用画像
左上 上 右上
右 左
左下 下 右上
設置の仕方(HTMLソース) 赤い文字の部分を任意に書き換えて下さい
ヘッダに次の一行を挿入
<meta http-equiv="Content-Style-Type" content="text/css">
---------------------------
<table border="0" cellpadding="0" cellspacing="0"> <tr>
<td style="width:23px; height:24px; background-image:url(./フォルダ名/c_corner_1.gif);"></td>
<td style="height:24px; background-image:url(./フォルダ名/c_top.gif);"></td>
<td style="width:20px; height:24px; background-image:url(./フォルダ名/c_corner_2.gif);"></td>
</tr> <tr>
<td style="width: 23px; background-image:url(./フォルダ名/c_left.gif);"></td>
<td><img src="./フォルダ名/ファイル名" alt="画像名" border="0" width="200" height="203"></td>
<td style="width: 20px; background-image:url(./フォルダ名/c_right.gif);"></td>
</tr> <tr>
<td style="width: 23px; height: 20px; background-image:url(./フォルダ名/c_corner_3.gif);"></td>
<td style="height: 20px; background-image:url(./フォルダ名/c_bottom.gif);"></td>
<td style="width: 20px; height: 20px; background-image:url(./フォルダ名/c_corner_4.gif);"></td>
</tr> </table>
 

額縁イメージの飾り枠(縦横伸縮)

上と同様で、素材のみ変えました。
HTMLソースは上のを参考に、幅と高さを必要に応じて変えて下さい。

サンプル画像
ダウンロード用画像
左上 上 右上
右 左
左下 下 右上