ブログを楽しむ方法。

 

 の作り方。（クロスフェード処理）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(function(){
    var setImg = '#abc';
    var fadeSpeed = 4000;
    var switchDelay = 9000;

$(setImg).children('img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'15'},fadeSpeed);

setInterval(function(){
$(setImg + ' :first-child').animate({opacity:'0'}
,fadeSpeed).next('img').animate({opacity:'1'}
,fadeSpeed).end().appendTo(setImg);}
,switchDelay);});
// ]]></script>
</p>
<div id="abc">

<img class="画像1枚目" width="300" height="200" />

<img class="画像2枚目" width="300" height="200" />

<img class="画像3枚目" width="300" height="200" />

<img class="画像4枚目" width="300" height="200" />

></div>

 

を見たまま編集の右のＨＴＭＬ編集にコピーして張り付けます。

次にデザイン→カスタマイズ→ＣＳＳに

 

 #abc {
margin: 0 auto;
width: 400px;
height: 300px;
text-align: left;
overflow: hidden;
position: relative;
}

#abc img {
top: 0;
left: 0;
position: absolute;
}

 

をコピーして張ればクロスフェードします。

赤文字のところでフェードスピードなどを調整できます。

青文字のところは分かりやすくするためにabcのタグにしましたが適当でも大丈夫です。ただし同じにしないと変なことになります。

緑文字のところはもしかしたら新しいものにヴァージョンアップしてるかもしれま

せんが動くので大丈夫です。

 

上記の画像の大きさは width="300" height="200ですが

ヘッダいなりますと width="900" height="400が良いバランスかと思います。

 

はてなブログ<style type="text/css">～～～</style>をbody中に入れても意味ないので

私としては若干面倒かなと感じました。

 ブラウザによっては表示されないかもしれませんのでご了承ください。

 

ではブログを楽しみましょう！