スポンサードリンク


◆簡単テーブルデザイン◆


テーブルの活用方法は、他のページでも個別に書いていたりしますので
ここではフリータグを使ったテーブルの作り方を紹介しようと思います。

各素材に、文字入れOKとしているフリータグがあります。
本来は、自力で文字入れをして画像素材として使うのですが、
ページごとに違うタイトルにしたい時は、そのタイトル分用意しなくてはいけません。
これはちょっと面倒^^;
そんな時はテーブルを使って、テキストを表示させましょう。
こうすれば、1つの画像で違うタイトルのタグを作ることが出来ます。

◆テーブルを利用してバナー&タグ風に
   分かりやすい様にボーダーを表示しています。


使う画像の幅・高さを固定にしたテーブルを作ります。
テーブル内のセル(<td>)のbackgroundに画像ファイル名を入れて、
画像の幅・高さを指定します。

-------------↓サンプルソース↓-----------------

<table width="画像の幅" height="画像の高さ" cellspacing="0" cellpadding="0" border="0">
<tr>
<td background="画像のファイル名" width="画像の幅" height="画像の高さ">
ここにテキストを表示させます
</td>
</tr>
</table>

-------------↑サンプルソース↑-----------------


下記のようになります。

ここに文字を入れていくのですが、このまま書いてしまうと
こんな事にっ!
なってしまうため、文字の位置を指定します。

下記ソースと<td>の後ろに追記します。
位置の数値はピクセルです。
画像サイズを上回る数値を入れますと、崩れますのでご注意を。

<DIV style=" margin-left:左からの位置px; margin-top:上からの位置px;">こんにちは</DIV>

これで文字指定をしてあげると、下記の様になります。
こんにちは

ボーダーを0にして出来上がり。
バランスを取るために文字を太めにしました。
こんにちは

-----------------↓上記のサンプルソース↓---------------------

<table width="192" height="96" cellspacing="0" cellpadding="0" border="0">
<tr>

<td background="kuma20.gif" width="192" height="96"><DIV style=" margin-left:30px; margin-top:30px;"><b>こんにちは</b></DIV>
</td>

</tr>
</table>

-----------------↑サンプルソース↑---------------------



◆応用編
   並べてメニュー風に

バナータイプの素材であれば、なんでも応用が利きますが、
他の素材屋さんの画像を使うときは、そちらの規約に従って製作してください。
他の素材屋さんの画像を使用してテーブルを作った結果なにか問題が起きても、こちらでは一切関知いたしません。

▼横並び▼
日記
イラスト
BBS

▼縦並び▼

日記
イラスト
BBS
お知らせ
背景に白を入れました。
色々なカラーで楽しめます。
自分なりに色々チャレンジしてみてください。

もどる
inserted by FC2 system