2007年08月06日

説明文を自動的にスクロールさせよう 

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


設定


今回用いるタグは「<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>」は文字だけではなく、画像でも使えますから、説明文以外のところでも前回の画像表示の説明を参考にして、画像も動かしてみると楽しいですよkao10


<marquee scrolldelay="300"><img src="画像"></marquee>

まぁこんなかんじです。
あと、


<marquee direction="up" behavior="alternate" height="50"><Marquee direction="right">トビウオ
</Marquee></Marquee>

こんなかんじにタグを連続させると、オモシロい動きをしますから、いろいろ組み合わせて楽しんでみてくださいねkao10


まとめ


今回はどうでしたかiconN06オモシロいでしょkao05
やっぱ動きがあるのって、見てて楽しいですよねiconN04


次回はインラインフレームを使って、何か楽しいことでもしてみたいと思います。
それではお疲れ様でしたicon23



この記事へのトラックバックURL

http://customshichao.shiga-saku.net/t45894
この記事へのコメントを書く