うらなか書房のあやしいグッズあり〼

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他少し物騒なものや奇妙なものの紹介をしています(たまにお役立ち情報や雑記も書きます)。

たまに毒吐くちゃん

カテゴリー「Web関連」の人気記事TOP3

CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

time 更新日:  time 公開日:2016/08/31

数日前、「バナー画像をスライドショーで表示したい」とふと思いつきまして、作成してみることにしました。
かなり手こずったものの、思い描いていたようなスライドショーをなんとか形にすることができたので、備忘録として以下にコードなどを載せておこうと思います。

スポンサーリンク

CSSで作るスライドショーの見本






  

  • 幅300px、高さ250px
  • フェイドイン・フェイドアウトで画像が切り替わる
  • 自動で繰り返す
  • それぞれの画像にリンクを貼ることができる

というスライドショーを作るべく試行錯誤を重ねました。
上3つは割とすぐにできたのですが、「それぞれの画像にリンクを貼ることができる」がなかなかうまくいかず(各画像に違うURLを指定しても、全て最後の画像に貼ったURLに飛んでいってしまうという)……。

どこをどうやって辿り着いたのか、こちらのページのコメント欄を発見し、こちらのスライドショーのソースを参考にさせて頂いた所、希望通りのスライドショーを実現することができました。ありがとうございます!

CSSで作るスライドショーのコード

CSSで作るスライドショーのhtml

以下のコードを、スライドショーを表示させたい部分に記述します。

aspslide」というdivのなかに、「id=”asnakami1“(以降数字が1ずつ増えていく) class=”asnakami“(こちらは変わらず)」がついたdivを入れていきます。
上記の場合はバナー画像が6個の場合です。7個目を足す場合は、

<div id="asnakami7" class="asnakami"><a href="" target="_blank"><img src=""></a></div>

となります。

CSSで作るスライドショーのCSS

以下のコードをスタイルシートに追加します。

秒数の設定

#asnakami1」などの、

30s 0s

という部分で、スライドショーの秒数を設定しています。
上記の場合は、全部で30秒、「#asnakami1」は0秒から表示、「#asnakami2」は5秒から表示……ということを表しています。

なので7枚目のバナー画像を足す場合は、上の30sを全て35sにし

#asnakami7{
-moz-animation: fadeinout 35s 30s infinite;
-webkit-animation: fadeinout 35s 30s infinite;
-o-animation: fadeinout 35s 30s infinite;
animation: fadeinout 35s 30s infinite;      
}

というコードを足します。

画像を減らす場合は、30sを25s、20s……と減らしていきます。

その他

fadeinout」は任意でつけたスライドショーの名前です。

infinite」は無限に繰り返すことを表しています。

CSSで作るスライドショーのメリット

Flashなどと違い、ほとんどのブラウザやデバイスで表示が可能です。上記はFirefoxGoogle ChromeIE11AndroidのスマホiPadで表示を確認しました(スマホとiPadはPCで見た時とちょっと挙動が異なりますが、リンクはきちんと動作しているのでまァいいかと……)。

しかしちょっと問題があって、IE9以下だともしかしたら表示がされないかも……。

#asnakami1」などに、

-ms-animation:fadeinout 35s 30s infinite;

を足せばいいのですが、そうすると今度はIE10以降で表示されなくなってしまうようなのです。

なのでやむを得ず古いバージョンのIEは切り捨てることにしました
この場合も特にエラーが出たりはせず、ただ単にその部分が空白になるだけです。

CSSで作るスライドショーのデメリット

バナー画像を増やすたびに、CSSに「#asnakami7」などを足していかないといけないことでしょうか。
バナー画像がものすごくたくさんある場合は、JavascriptやjQueryなどでスライドショーを作った方がよさそうです。

jQueryのスライダー

上とちょっとタイプが違うのですが、このブログには以下のようなスライダーも所々に設置しています。

WordPressの場合、jQueryのカプセル化をしないと動かなかったりするので、これもまた手こずりました。
こちらのコードも載せようかと思ったのですが、かなり長くなってしまうので、その内別の記事として書こうと思います。

記事を更新順にカルーセル表示できる「忍者画像RSS」


ちなみに、以前記事上に「忍者画像RSS」を設置していました。

WordPressのプラグインを探し回ったのですが、なかなか希望のものが見つからず……(手動でリンクを貼るとか、カルーセルではなくて画像がページいっぱいの大きいものになってしまうとか、何かしら不満点が……)。

RSSを登録しておけば、

  • 記事を公開すると自動で更新され
  • 管理画面から色や速度をいじることもできる
  • しかもカルーセル
  • お値段はもちろん無料!

ということで、「忍者画像RSS」、なかなかの優れものではないでしょうか(回し者ではありません)。
右下に小さく手裏剣マーク(「忍者画像RSS」へのリンク)が出てしまうのはちょっと気になりますが……それほど目立たないし、許容範囲ではないかと。

しかしたまにですが記事に紛れて広告が流れてくるのと、読み込みにちょっと時間がかかる気がしたので、現在記事上には人気記事を表示しています。

あとがき

こういうものをちょこちょこいじるのに時間がかかって、ブログの記事数がなかなか増えません……。
忘れっぽいので主に自分用の備忘録として書きましたが、もしもスライドショーを作成したい方のご参考になりましたら幸いです。

スポンサーリンク


follow us in feedly  友だち追加数
 

ブログの更新をメールでお知らせします!

たまに毒吐くちゃん

この記事をシェアする

たまに毒吐くちゃん

関連する記事

たまに毒吐くちゃん

この記事への反応

出展記録

AmazonでTシャツや電子書籍(短編小説集)を販売しています

Amazon詳細ページへ Amazon詳細ページへ

Tshirt TrinityでTシャツやバッグを販売しています

TSHIRTS TRINITY

ClubTでTシャツやバッグを販売しています

プロフィール

うらなか書房

うらなか書房

あやしい絵を描いて、それをTシャツグッズにしています。


ホラー映画カルト映画、その他少し物騒なもの奇妙なものを見たり読んだりすることが好きです。

ちょっと変人かもしれませんが、危ない感じではなくただのヘッポコなので、お気軽にSNSでのフォローコメントをお願いします!

詳細なプロフィール

ブログをメールで購読

メールアドレスを記入して「購読」ボタンをクリックすると、このブログの更新情報をメールで受信できます。

マスコットキャラ

たまに毒吐くちゃん

当ブログのマスコットキャラ「たまに毒吐くちゃん」。所々に出没します。
TSHIRTS TRINITYClubTSUZURIでTシャツ・グッズ販売中です!

うらなか書房のおすすめ映画

うらなか書房のおすすめ映画
うらなか書房がおすすめのホラー映画カルト映画B級映画などをAmazonで紹介しています。


スポンサーリンク

Twitter