<<ご質問>>
ヘッダー画像にスライドショーを設置したいけど、
うまくできません。どこがおかしいのでしょうか。
そこで、今日は、
「スライドショーをうまく設置するためのポイント」
をまとめてみたいと思います。
最後に、注意点を書きますので、
最後まで読んでから実践してみてくださいね。
同じ大きさの画像の用意例えば、横980px 縦400pxの画像を３枚作成します。
時々、画像の大きさが違っている人がおられますので、注意しましょう。
フリースペースの入力フリースペースの入力画面を開いて、下記の画像のＵＲＬを差し換えてコピペしてください。
<div id="slideshow"><img src="上記画像①のURL" width="980"class="active"><img src="上記画像②のURL" width="980"><img src="上記画像③のURL" width="980"></div>
フリープラグインの入力フリープラグインの入力画面を開いて、下記の部分をコピペしてください。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2000, function() {
$active.removeClass('active last-active');
});}
$(function() {setInterval( "slideSwitch()", 3000 );});
</script><script type="text/javascript">
$(document).ready(function(){$("#slideshow").appendTo(".skinHeaderArea");})
</script>
CSSの入力それでは、最後に、ＣＳＳの入力画面を開いてください。そして、現在のＣＳＳの最後の箇所を表示し、次のＣＳＳをそのままコピペして、追加してください。
.skinBlogHeadingGroupArea {
padding:0px;
height:0px;
text-indent: -9999px;
}
.skinHeaderArea {
height:400px;
}
.skinContentsArea {
position:relative;
padding-top:15px;
}
/* ■ スライドショー用 ＣＳＳ*/
#slideshow{
position:relative;
width:980px;
height:400px;
}
#slideshow img{
position:absolute;
top:0px;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
【注意点】
①上記の[２]フリースペースと[３]フリープラグインにコピーする場合に、1度メモ帳にコピペします。
次に、コピぺしたものをそれぞれフリースペースとフリープラグインの入力箇所にコピペします。
②上記①をしてもうまくいかない場合は、フリースペースの不要な箇所にスペースや改行マークが入っていないか確認してください。もし、入っていたら、削除します。
次に、コピぺしたものをそれぞれフリースペースとフリープラグインの入力箇所にコピペします。
②上記①をしてもうまくいかない場合は、フリースペースの不要な箇所にスペースや改行マークが入っていないか確認してください。もし、入っていたら、削除します。
これで、スライドショーがうまく設置できると思いますので、
ぜひトライしてみてくださいね。