ブログ

ブログのリニューアルに伴い、「これいい！パーツデザイン」の更新履歴をページニュースティッカーで表示することにしました。

見た目がふざけているのは、ご勘弁ください。。。

特定カテゴリーをリスト形式で出力

ニュースティッカーを表示させたい箇所に以下を追記。

[php]
<ul id="news_ticker_list">
<?php
$lastposts = get_posts(‘numberposts=10&category=11’);
foreach($lastposts as $post) :
setup_postdata($post);
?>
<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
[/php]

numberposts=●に表示させたい記事数を入力
category=●に表示させたいカテゴリーのIDを入力

ニュースティッカーとして動作させる

「jQuery WebTicker」を使って、動作させます。

[javascript]
<script type="text/javascript">
jQuery.noConflict();
var j$ = jQuery;
j$(document).ready(function() {
j$("#news_ticker_list").webTicker({
travelocity: 0.04, //速さ
direction: 1, //-1で逆に
})
});
</script>
[/javascript]

travelocity:●,に速度値を入力
direction: ●,で動作する方向を設定（「1」は←方向、「-1」は、→方向）

あとは、CSSで整形してください！

ちなみに当ブログでは、

[css]
ul.newsticker {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;}

ul.newsticker li {
float: left;
margin: 0;
padding-left: 25px;
margin-left:40px;
padding-bottom:10px;
background: url(walking.gif) no-repeat 0 0;
}
[/css]