アメブロカスタマイズ　背景スライドショー　ヘッダー画像　設定方法！！

おはようございます。
修業の身　札幌のWebデザイナー　日々精進の加藤です。

昨日は、朝からバケツをひっくり返したような雨が降って、辺りが真っ白になってました。
これから、雨が多くなるのかなぁ～、やっぱり秋は近しですね！！

さて、今日は、背景スライドショーとヘッダー画像の設置方法を少し詳しく書きますね。

まず、完成はこちらです。

バッチリ、スライドショーとヘッダー画像が配置されてますね。

ではではいきますよ！！

まず、CSSを編集します。

CSS編集画面で、CSSの一番したを、ページをスクロールさせて表示させます。

そこに、赤枠の記述文、下記のものをそのままコピーして、貼付けます。

.bgslideshow { position: fixed; left:0; top:0; z-index: -1; height: 100%; width: 100%; }

.bgslideshow img { position: absolute; min-height: 100%; min-width: 800px; width: 100%; height: auto;left:0; top:0; }

次に青枠の記述文、下記のものをそのままコピーして、貼付けます。
但し、青太字の部分は、皆さんがヘッダー画像として表示したい、画像をCSS編集画面の上にある、画像アップロードのところへ、画像をアップロードしてください。
アップロードしたのち、小さく表示された画像のしたに、この青太文字が表示されてますので、そこを、皆さんのものと書き変えてください。

.skinHeaderArea{ width:980px; height:300px; background-image:url(http://stat.blogskin.ameba.jp/blogskin_images/20120814/14/e2/e1/p/o09800300smilefactoryten1344921298495.png);}

張り付け後は、必ず保存してくださいね。

次に、プラグインを追加します。

ブログ管理のサイドバーのプラグインの追加の所から、画像のフリープラグインのタブをクリックしてください。

はじめは、無地で何も書かれていないの思います。

そこに、画像の記述文字下記文をコピーして貼付けます。
書かれている、内容は一先ず考えないようにしてくださいね！！

$(function(){ $('.skinBody'). /*skinBody要素を取得*/

before('<div class="bgslideshow"><img src="http://stat.blogskin.ameba.jp/blogskin_images/20120809/15/b7/4e/j/o10800720smilefactoryten1344494803999.jpg" width="1080px" height="721px" alt="" /><img src="http://stat.blogskin.ameba.jp/blogskin_images/20120809/15/94/3c/j/o10800720smilefactoryten1344494783547.jpg" width="1080px" height="720px" alt="" /><img src="http://stat.blogskin.ameba.jp/blogskin_images/20120809/15/2b/69/j/o10800721smilefactoryten1344494753341.jpg" width="1080px" height="720px" alt="" /></div>');

$('.bgslideshow img:gt(0)').hide(); setInterval(function() { $('.bgslideshow :first-child').fadeOut(5000)/*5秒でフェイドアウト*/

.next('img').fadeIn(5000)/*5秒でフェイドイン*/

.end().appendTo('.bgslideshow');

}, 15000)/*15秒間画像が表示されます*/

;});

</script>

赤で書かれた部分は、皆さんが背景でスライドショーとして、使いたい画像の文です。先程、ヘッダー画像をアップロードする方法を書きましたが、同じ方法で、画像をアップして、赤文字の部分を皆さんの記述文に書き換えてください。
（今回は、３枚使用したスライドショーです。もし、枚数を増やしたい場合は、別途質問してくださいね）

これで、全て設定は終わりです。あっ、フリープラグインも必ず、保存してくださいね！！

最後に、前に投稿した記事にもアップしてありますので、そちらも合わせて見て挑戦してみてくださいね！！

記事１　記事２

では、また次の時まで…

アメブロカスタマイズ 背景スライドショー ヘッダー画像 設定方法！！

アメブロカスタマイズ　背景スライドショー　ヘッダー画像　設定方法！！