【CSSの編集】
以下の内容をコピペしてCSSの最後尾に追加。
/* ■ スライドショー用 ヘッダーエリア ■ */
.skin-bgHeader {
background-color: #ffffff;
width: 1120px;
margin: 0 auto;}
.skin-headerTitle{
display:none;}
.skin-bgHeader{
height:500px;/* 画像の高さに合わせる */
}
/* ■ スライドショーの設定 ■*/
#slideshow{
width:1120px;
height:500px;/* 画像の高さに合わせる */
position:relative;}
/* img要素は絶対配置で一か所に重ねる */
#slideshow img{
position:absolute;
top:0;
left:0;
}
/* 2番目以降のimg要素にclass="alt"を付け、消す */
#slideshow img.alt{
display:none;
}
フリープラグインに以下の内容を追加
<!-- スライドショーの実行 -->
<script src="http://www.google.com/jsapi"></script>
<script>google.load('jquery','1')</script>
<script type="text/javascript">
$(function(){
var interval = 7000;
$('#slideshow').each(function(){
var container = $(this);
function switchImg(){
var imgs = container.find('img');
var first = imgs.eq(0);
var second = imgs.eq(1);
first.fadeOut(3000).appendTo(container);
second.fadeIn(3000);
}
setInterval(switchImg, interval);
});
});
</script>
<!-- スライドショーをヘッダー位置に-->
<script type="text/javascript">
$(document).ready(function(){$("#slideshow").appendTo(".skin-bgHeader");})
</script>
フリースペースに以下の内容を追加
<div id="slideshow"><img src="画像URL"><img src="画像URL" class="alt"><img src="画像URL" class="alt"></div>