この記事は最終更新日から2年以上が経過しており、情報が古くなっている可能性があります。

縦方向にスクロールするティッカーです。


まずはjavaScriptを作成します。

function ticker_news(){
$('.ticker li:first').slideUp( function(){
$(this).appendTo($('.ticker')).slideDown();
});
}
setInterval(function(){ticker_news()}, 5000);

次はCSSを作ります。

.ticker {
overflow: hidden;
padding: 0;
}
.ticker li {
list-style: none;
}

最後にhtmlを書きます。

<ul class="ticker">
<li><a href="news1.html">news1</a></li>
<li><a href="news2.html">news2</a></li>
<li><a href="news3.html">news3</a></li>
</ul>

オマケでWordPressにて新着記事5件をティッカーで表示する際に使用するコードを書いときます。

<ul class="ticker">
<?php query_posts('showposts=5'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li><?php the_time('Y.m.d'); ?><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>