ブログ
WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。
WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。
ブログのリニューアルに伴い、「これいい!パーツデザイン」の更新履歴をページニュースティッカーで表示することにしました。
見た目がふざけているのは、ご勘弁ください。。。
ニュースティッカーを表示させたい箇所に以下を追記。
<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>
numberposts=●に表示させたい記事数を入力
category=●に表示させたいカテゴリーのIDを入力
「jQuery WebTicker」を使って、動作させます。
<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>
travelocity:●,に速度値を入力
direction: ●,で動作する方向を設定(「1」は←方向、「-1」は、→方向)
あとは、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; }
事業別ご連絡先
コメントを残す