2013年06月20日

ブログサイズタグ

200×70サイズの走行タグを紹介します。
自分なりにタグをあわせて行ってる為、参考程度にお願いします。
マーキータグはブラウザにより見れない・ずれる・動かない場合があります。
HTML内専用。



まずは画像を用意。

back20070.gif
背景・・・back20070.gif


front20070.gif

前景・・・front20070.gif
(架線柱や柵などの列車の前の画像です。)


列車・・・65535.gif
・・・・・・・nashi.gif(列車の登場・間隔を空けるため、1×52の透過画像を用意)


</head>
<body>

<p align="center">

<!-- 背景 -->
<table  border="1" cellpadding="0" cellspacing="0" bgcolor="#E6E6FF" bordercolor="#0080FF"  background="a/back20070.gif" width=200 height=70 align="center"><tr><td>

<!-- 列車← -->
<DIV style="margin-top:17px;">
<MARQUEE scrollamount="4"   scrolldelay="30" truespeed><img src="a/nashi.gif" width=300 height=52><img src="a/65535.gif" width=171 height=52></MARQUEE></DIV>

<!-- 前景 -->
<DIV style="margin-top:-70px;">
<img src="a/front20070.gif" width=200 height=70></DIV>

</td></tr></table>

</p>

</body>
</html>


記事内に貼るとややこしくなるので
mt.png
完成はこんな感じ。



◆各説明◆

<!-- 背景 -->
<table  border="1" cellpadding="0" cellspacing="0" bgcolor="#E6E6FF" bordercolor="#0080FF"  background="a/back20070.gif" width=200 height=70 align="center"><tr><td>


・table  border="1"
本体の枠の太さ。

bgcolor="#E6E6FF"
本体の背景。画像挿入するので指定無しでもOK。

bordercolor="#0080FF
枠の色。
16進数の色コードは調べてください。

background="a/back20070.gif" width=200 height=70
背景画像。
aファイルの背景画像を指定してます。横・高さは必ず入れておいてください。
自分のファイルに置く場合は自分が用意したファイル名・画像名を指定してください。

<!-- 列車← -->
<DIV style="margin-top:17px;">
<MARQUEE scrollamount="4"   scrolldelay="30" truespeed><img src="a/nashi.gif" width=300 height=52><img src="a/65535.gif" width=171 height=52></MARQUEE></DIV>




<DIV style="margin-top:17px;">
画像をずらすタグ。
これを指定しないと
back20070.gif
EF641049.gif
ただ積み重なっただけになります。
うまく調整してください。


<MARQUEE scrollamount="4"   scrolldelay="30" truespeed>
文字・画像を動かすのに良く使われるマーキータグ。
<MARQUEE>だけだとただ動いてるだけなので、いろいろとタグを入れます。
scrollamount="4"・・・スピード。実際見てあわせてください。
scrolldelay="30" truespeed・・・再描画の時間の間隔。
低い程滑らかになりますが、スピードが速くなりすぎるのでこれくらいが妥当かも。
デフォルトは85のようです。

◎この中にさらに入れると
direction="right" ・・・→に流れます。
loop="1" ・・・スクロール回数(この場合1回しか現われません。)


<img src="a/nashi.gif" width=300 height=52>
間隔。
1×52の透過ファイルですが、指定で300pxに広げて登場に時間をかけます。

<img src="a/65535.gif" width=171 height=52>
列車の画像。
横・高さの指定は無くても大丈夫ですが、入れておいた方がいいようです。
HP読み込み時に突然現われる場合があるので・・・。
背景と同じくファイル名に注意してください。
列車をつなげる場合は
<img src="a/65535.gif" width=171 height=52><img src="a/taki1000-5b.gif" width=705 height=52>
などつなげて行くと1枚の画像の重さが軽減できます。
貨物などは1両ずつつなげるとタグが長くなり厄介なので5〜10両ずつ連結した画像を用意するといいかもしれません。

<!-- 前景 -->
<DIV style="margin-top:-70px;">
<img src="a/front20070.gif" width=200 height=70></DIV>

<DIV style="margin-top:-70px;">
上の同じく画像をずらします。

<img src="a/front20070.gif" width=200 height=70>
前景画像です。



今回は横幅200の高さ70サイズですが、
横に広げる場合は300や500などの画像を用意すればOK。
高さを変えると上のずらすタグ<DIV style="margin-top:●●px;">の数字が変わるので注意。
高さも変えたい場合は調整してください。




タグを制作する前にメモ帳などで
20130620.png


20130620-2.png

HTMLに変換しテストしてからHPやHTML対応のブログに完成したタグを貼り付けるとやりやすいです。

posted by 美輝川 at 11:59| タグ