2007年08月06日
説明文を自動的にスクロールさせよう
今回は説明文を自動的にスクロールさせる設定を紹介したいと思います。
これは僕の中で1番好きなタグで、このブログに限らず、メインブログやホームページにも多用してるほどお気に入りです
ブログやホームページを動的に見せるにはjavascriptを用いないとなかなか難しい中で、この設定はタグだけで動的に見せることができるのです
動きのあるブログにしたい方には必見だと思いますよ
それでは早速
設定
今回用いるタグは「<marquee> ~ </marquee>」というものです。
これを説明文のところに設定してやります。

上の画像で、赤の下線が引いてあるところが元々書かれてあるところです。
そして青の下線が追加したところです。
個別に説明すると、「<div class="description">」が説明文に対してのスタイルシート適応設定ということで、「<%BlogDescription%>」が説明文となります。
| <div class="description"><%BlogDescription%></div> |
この間に「<marquee>」を加えます。
| <div class="description"><marquee direction="left" width="100%" scrolldelay="300"><%BlogDescription%></marquee></div> |
上の設定では、いくつか詳細設定をしています。
右から左へ、幅は100%、速さは300ってところです。
他にも詳細設定がありますから、下の一覧表を御覧になって設定してください。
上の一覧表でお好みに設定すれば完了です。
応用
この「<marquee>」は文字だけではなく、画像でも使えますから、説明文以外のところでも前回の画像表示の説明を参考にして、画像も動かしてみると楽しいですよ
| <marquee scrolldelay="300"><img src="画像"></marquee> |
まぁこんなかんじです。
あと、
| <marquee direction="up" behavior="alternate" height="50"><Marquee direction="right">トビウオ </Marquee></Marquee> |
こんなかんじにタグを連続させると、オモシロい動きをしますから、いろいろ組み合わせて楽しんでみてくださいね
まとめ
今回はどうでしたか
オモシロいでしょ
やっぱ動きがあるのって、見てて楽しいですよね
次回はインラインフレームを使って、何か楽しいことでもしてみたいと思います。
それではお疲れ様でした




