スポンサードリンク
◆簡単テーブルデザイン◆
テーブルの活用方法は、他のページでも個別に書いていたりしますので
ここではフリータグを使ったテーブルの作り方を紹介しようと思います。
各素材に、文字入れ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
お知らせ
背景に白を入れました。
色々なカラーで楽しめます。
自分なりに色々チャレンジしてみてください。