ひなたのヴァリアブル・ライフ

ひなたのヴァリアブル・ライフ

日々変化する毎日の中で、マイペースなひなたのうちなーライフをつづっています。

Amebaでブログを始めよう!

テーマ:

以下に記述されたコードはアメブロ用にカスタムされているので、知らずにサイトに埋め込んだ暁にはエラーを引き起こす原因に綱がるため十分お気をつけください。尚、本記事に掲載されたコードを使うに当たっては完全自由ですが、自己責任でお願いします。当ブログでは一切感知いたしかねます。

フリープラグインに書くJavascriptコード

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">(_JQ162_=jQuery)(function(){$=jQuery=_JQ162_;});</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()", 5000 );
});
</script>
<script type="text/javascript">$(function(){$('#verconf').click(function(){alert(jQuery.fn.jquery);});});</script>

サイドバーへのマークアップHTMLコード

<div id="slideshow"><!--
--><img src="http://stat.ameba.jp/user_images/20121022/20/shvirz/fe/97/p/o0800045012249838493.png" width="665" alt="某ブラウザのロゴは・・・" class="active" /><!--
--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/aa/72/j/o0450075013009096930.jpg" height="374" alt="ガンタンク"><!--
--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/4e/bd/j/o0500056813009096932.jpg" height="374" alt="バイカー「ナポレオン」"><!--
--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/dd/4f/j/o0800060013009096931.jpg" height="374" alt="鼻パピコJK"><!--
--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/6a/a8/j/o0800060013009096933.jpg" height="374" alt="取り締まった事例は無い"><!--
--></div>
HTMLコメントコードが入っている理由は、アメブロのサイドバーで改行すると<br />タグが付くから。<br />タグを打ち消すためこのような仕様になってます。もちろん改行せずコメントコードも入れなくても動くことは動くけど、見易さに欠けます。

追加CSSコード

/* ヘッダーにslideSwitch適用 */
/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */
.skinContentsArea{
  position:relative; /* 絶対配置を置くボックスの基準点、他ブログでは「おまじない」とか書かれてる */
  padding-top:374px; /* 画像の高さ分余白をつける */
}
#slideshow{
  position:absolute;
  margin:0;
  padding:0;
  width:100%;
  height:450px;
top:0;
left:0;
}
#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}



テーマ:
jQueryが使えるってうれしい限りです。

サイドバーのjQueryバージョン確認ボタンに引き続き、調子に乗って簡易スライドショーをつけてみたんですが、表示がいまいちですね。改良の余地ありです。

画像はドロップボックスにあったもの。一枚おバカあり。
「あれを取り締まった事例は聞いたことがないね」
久しぶりに見ると笑えましたw

ってことで本命のコードですが、グローバルナビを作るようにして作成しました。
まずは、HTML。
<div id="slideshow"><!--
--><img src="http://stat.ameba.jp/user_images/20121022/20/shvirz/fe/97/p/o0800045012249838493.png" width="665" alt="某ブラウザのロゴは・・・" class="active" /><!--
--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/aa/72/j/o0450075013009096930.jpg" height="374" alt="ガンタンク"><!--
--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/4e/bd/j/o0500056813009096932.jpg" height="374" alt="バイカー「ナポレオン」"><!--
--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/dd/4f/j/o0800060013009096931.jpg" height="374" alt="鼻パピコJK"><!--
--><img src="http://stat.ameba.jp/user_images/20140720/22/shvirz/6a/a8/j/o0800060013009096933.jpg" height="374" alt="取り締まった事例は無い"><!--
--></div>


次に、CSSですね。
.skinContentsArea{
  position:relative;
  padding-top:374px; /* 画像の高さ分 */
}
#slideshow{
  position:absolute;
  margin:0;
  padding:0;
  width:100%;
  height:450px;
  top:0;
  left:0;
}
#slideshow img {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
#slideshow IMG.active {
    z-index:10;
}
#slideshow IMG.last-active {
    z-index:9;
}


最後にjQueryですね。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.6.2');</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
  $(function(){
    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');});
  });
}
$(document).ready(function() {setInterval( "slideSwitch()", 4000 );});
</script>


これでヘッダーに表示させることができました。

この順で出ます。

Windowsロゴ→GoogleChromeロゴ
某ロゴは●●のパクリか??

ガンタンク
ガンタンク

バイカー「ナポレオン」
バイカー「ナポレオン」

鼻パピコJK
鼻パピコJK

取り締まった事例は無い
警官:「あれを取り締まった事例は無いね~」




できれば同じサイズの画像を並べた方がいいけど、そのような環境にいないので、これは又、次回ログインする機会があれば修正しとこう。

ちなみに某ロゴの●●...はこちら
http://ubuntuforums.org/showthread.php?t=963908

Ameba人気のブログ