ブログランキングの応援
をして頂けると励みになります。
ここをクリックしてくださいね。
人気ブログランキング
FC2ブログランキング今回は、スライドショーについてお問い合わせを戴きましたので、
採りあげてみたいと思います。
<<質問>>
アメブロのヘッダーに、スライドショーを加えたいのですが、
やり方が複雑で悩んでおります。
<<回答>>
アメブロのヘッダーに、スライドショーを設置する方法は、
いろいろあると思いますが、思いつくものを挙げてみますね。
javascriptで作成する方法
gifアニメでスライドショー風に作成する方法
フラッシュでスライドショー風に作成する方法
jqueryを利用し、外部ファイルを作成し、設置する方法上記以外の方法もたくさんあると思いますが、
今回は、「
javascriptで作成する方法」についてまとめてみますね。[１]画像のアップロード
まず、スライドショーにしたい画像を画像編集ソフトを使用して作成し、
ファイルに保存しておきます。
次に、[マイページ]→[デザインの変更]→CSS編集用デザイン[CSSの編集]
の順にクリックして「ブログデザインのCSSの編集」画面を表示します。
[参照ボタン]をクリックして、スライドショーにしたい画像をアップロードします。
下図のようにアップロードしてみました。
[２]HTMLの追加
[マイページ]→[デザインの変更]→[フリースペース編集]
の順にクリックして「フリースペース編集」画面を表示します。
下記のHTMLを入力します。
<div id="slideshow"><img src="上記画像①のURL" width="950"
class="active"><img src="上記画像②のURL" width="950"><img
src="上記画像③のURL" width="950"></div>
class="active"><img src="上記画像②のURL" width="950"><img
src="上記画像③のURL" width="950"></div>
[保存]ボタンをクリックしてHTMLを保存します。
[３]javascriptの入力
[マイページ]→[デザインの変更]→[プラグインの追加]→[フリープラグイン]
の順にクリックして「フリープラグイン」の入力画面を表示します。
下記のjavascriptを入力します。
<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>
<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>
[保存]ボタンをクリックしてjavascriptを保存します。
[４]CSSの追加
[マイページ]→[デザインの変更]→CSS編集用デザイン[CSSの編集]
の順にクリックして「現在使用中のブログデザインCSS編集」画面を表示します。
CSSの最後の次に下記のCSSを追加します。
.skinBlogHeadingGroupArea {
padding:0px;
height:0px;
text-indent: -9999px;
}
.skinHeaderArea {
height:300px;
}
.skinContentsArea {
position:relative;
padding-top:15px;
}
/* ■ スライドショー用 ＣＳＳ*/
#slideshow{
position:relative;
width:950px;
height:300px;
}
#slideshow img{
position:absolute;
top:0px;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
padding:0px;
height:0px;
text-indent: -9999px;
}
.skinHeaderArea {
height:300px;
}
.skinContentsArea {
position:relative;
padding-top:15px;
}
/* ■ スライドショー用 ＣＳＳ*/
#slideshow{
position:relative;
width:950px;
height:300px;
}
#slideshow img{
position:absolute;
top:0px;
z-index:8;
}
#slideshow img.active {
z-index:10;
}
#slideshow img.last-active {
z-index:9;
}
完成したスライドショーはこちらです。
↓↓↓
サンプル
皆さんも、ヘッダー画像をスライドショーにしてみませんか？
もちろん、画像と画像の表示間隔も変更できます。
なお、今回の記事は、下記のブログを参考にさせて戴きました。
ありがとうございました。
↓↓↓
ブログテーマ[スライドショー]｜リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）
◆◆今日は、平成26年2月19日です。◆◆
最近、スライドショーがうまく設置できないという相談をよく受けますので、
わかりやすく設置できるように新しい記事を書きましたので、
ぜひ参考にしてくださいね。
↓
「スライドショーを設置するためのポイント」