1）header.php にスクリプトを入れます。

<script type="text/javascript">
function slideSwitch() {
var $active = jQuery('#slideshow a.active');
if ( $active.length == 0 ) $active = jQuery('#slideshow a:last');
var $next =  $active.next().length ? $active.next()
: jQuery('#slideshow a:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
jQuery(function() {
setInterval( "slideSwitch()", 6000 );
});
</script>

2）HTML は、こんな感じ。

<div id="slideshow">
<a class="active" href="#"><img src="pi-kun.gif" /></a>
<a href="#"><img src="pi-kun2.gif" /></a>
<a href="#"><img src="pi-kun3.gif" /></a>
</div>

3）CSS で調整します。

<style type="text/css">
#slideshow { position:relative; width:685x; height:282px; }
#slideshow a { position:absolute; top:0; left:0; z-index:8; opacity:0.0; }
#slideshow a.active { z-index:10; opacity:1.0; }
#slideshow a.last-active { z-index:9; }
</style>

ちょっとした小さな画像でも使えそうです。

今回は コリスさんのページ を参考に CSS を調整しました。現在表示しているパネルの位置ボタンをオリジナル画像に作り直し、コントローラーボタンも出さない設定にしてみました。

1）ヘッダーに必要なスクリプトをリンクさせる。
jquery.js
jquery.slider.min.js
jquery.slider.css

2）ヘッダーにスクリプトを入れる。

<script type="text/javascript">
jQuery(function() {
jQuery('#slider').slider({
showControls: false, // コントローラーボタン非表示
wait: 6500, // 次のフレームまでの待ち時間
fade: 500, // フェードの時間
showPosition: true, // 現在表示しているパネルの位置ボタン表示
direction: 'left' // 左にスライド
});
});
</script>

3）入れたいページにHTMLを書く。
div要素に背景として入れます。

イラスト制作は現在受付中です。
ご依頼は お問い合わせ からお願いします。

今日は未明から皆既月食だそうです。いまはまだ真上に見える月も早朝には消えてしまうのですね。夜明けも早いので、ちょっと見てみたい気もしますがきっと夢の中です。

10年ぶりの長時間、今夜皆既月食
National Geographic

※キャラクター使用については こちらから お問い合せください。

現在のページのメニュー画像をハイライトさせる方法ですが、ヘッダーには、wp_list_pages(‘title_li=’)　が入れてあります。wp_list_pages() をページ表示時に呼び出すと、そのページを指すリストアイテムには current_page_item というクラスが追加されますので、 それを利用してCSS セレクタでデザインします。

ページ ID は、管理画面のページ項目にオンマスすると確認できますが、ローカルのテスト環境で使う場合は、IDが変わるので注意が必要です。（確認ブラウザ：Firefox3 / IE8）

ことしもよろしくお願いいたします。