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

うらなか書房と申します。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のスライダー

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

こちらはCSSのスライダーと違いアイテム数を好きに増やしたり減らしたりできます。
WordPressだとjQueryのカプセル化というものをしないと動かないので、これもまた手こずりました。
こちらのコードも一緒に載せようかと思っていたのですが、かなり長くなってしまうので別の記事にしました。

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

こちらの記事ともども、スライドショーを作成したい方のご参考になりましたら幸いです。

スポンサーリンク

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

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

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

TSHIRTS TRINITY

マスコットキャラ

たまに毒吐くちゃん

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

同じカテゴリーの記事

WordPressテーマ「マテリアル」のカスタマイズ方法【更新日を表示、スマホのメニューを最初から開いておく等】

WordPressテーマ「マテリアル」のカスタマイズ方法【更新日を表示、スマホのメニューを最初から開いておく等】

無料ワードプレステーマ「マテリアル」のカスタマイズ方法を載せています(更新日を表示、スマホのグローバルメニューを最初から開いておく、カテゴリーとタグを記事下に表示、サイト説明文にリンクを貼る、カテゴリーごとの記事の表示をフッターに移動する)。
Read More
ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

ブログを書く時に使える便利なWebサービス【リンクカード、画像軽量化など】

リンクカード「Embedly」、サムネイルにリンク「HeartRails Capture」、GIFアニメ作成「Animated GIF Maker」、画像を軽量化「TinyPNG」、SVG画像に変換「ZorroSVG」、漫画のコマを使用できる「マンガルー」を紹介しています。
Read More
【WordPress】「悪意あるログイン試行」への対策【.htaccess】

【WordPress】「悪意あるログイン試行」への対策【.htaccess】

WordPressの「悪意あるログイン試行」への数が急増したので、.htaccessを使い、ログインページなど特定のファイルへの海外からのアクセスを制限することにしました。その方法や問題点を書いています。
Read More
【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

【jQuery】画像がコンベアのように横に流れるスライドショー【自動で繰り返し、それぞれの画像にリンクを貼ることが可】

画像が横にスクロールするjQuery製のスライドショーを紹介しています。自動で繰り返し、それぞれの画像にリンクを貼ることが可能です。WordPress用とそれ以外用のコードを載せています。
Read More
WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをAMPに対応させ広告、関連記事、SNSシェアボタンを表示する方法(アナリティクスにも対応)

WordPressブログをプラグインでAMPに対応させ(有効化するだけなので簡単)、そのページに広告(アドセンスの表示・非表示の切り替えが可)、SNSシェアボタン、関連記事などを表示する方法と、AMP用のアナリティクスのコードの貼り方、AMPでエラーが出た時の対処法について書いています。
Read More
GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

GitHub Gistを使うとブログにコードを簡単、綺麗に表示できる【プラグインやライブラリ不要】

GitHub GistのEmbedにより、プラグインやライブラリを使わずにブログに手軽にコードを貼り付ける方法や、注意点、表示のカスタマイズをするCSSなどを載せています。
Read More
CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)

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

CSSで作るスライドショー(幅と高さを固定、自動で繰り返す、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンクを貼ることができる)のコードを載せています。JavaScriptやjQueryは使いません。
Read More
【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

【WordPress】Jetpack「関連投稿」の表示場所、記事数を変更する方法

ワードプレスのプラグイン「Jetpack」の機能「関連投稿」を任意の場所に表示+表示する記事数を変更するカスタマイズを載せています。
Read More
WordPressの無料テーマ おすすめ8個【日本語、レスポンシブ、SEOに強い】

WordPressの無料テーマ おすすめ8個【日本語、レスポンシブ、SEOに強い】

ワードプレスの無料テーマ(テンプレート)で、おすすめの「個性的なテーマ」「初心者向けのテーマ」「高速・多機能なテーマ」「カスタマイズに向いているテーマ」を2つずつ紹介しています。いずれも日本語、レスポンシブデザイン対応、SEOに強いといわれているテーマです。テーマを選ぶ決め手や注意点も書いています。
Read More
2017年使用中のJetpackの機能【WordPressプラグイン】

2017年使用中のJetpackの機能【WordPressプラグイン】

WordPressの公式プラグイン詰め合わせ「Jetpack」の内で使用中の機能(Markdown、関連投稿、サイト統計情報、コンタクトフォーム、購読、プロテクト、パブリサイズ、サイトマップ、拡張配信、シングルサインオン)を紹介しています。
Read More
【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

【WordPress】SNS Count Cacheが有効化できない+Twitterのシェア数がカウントされない時にしたこと

WordPressのプラグイン「SNS Count Cache」が有効化できなかったのですが、PHPのバージョンを変更した所、無事有効化することができました。Twtterのシェア数の表示もできるようになりました。
Read More
【WordPress】Jetpack Markdownを使う時の注意点2つ

【WordPress】Jetpack Markdownを使う時の注意点2つ

Jetpack Markdown(ジェットパック マークダウン)を使おうとした所、困ったことが2つ起きました(見出しが出ない+段落が効かない)。その解決方法を書いています。
Read More
レトロな雰囲気のフリーフォント おすすめ4個【商用無料で漢字も使える】

レトロな雰囲気のフリーフォント おすすめ4個【商用無料で漢字も使える】

「国鉄方向幕書体」「機械彫刻用標準書体フォント」「うつくし明朝体」「しねきゃぷしょん」「コーポレート・ロゴ」というレトロな雰囲気のフリーフォントを紹介しています。見本のバナーもあります。
Read More
【2017年】おすすめのWordPressプラグイン【無料、定番多め25個】

【2017年】おすすめのWordPressプラグイン【無料、定番多め25個】

実際に使ってみて、記事が書きやすくなったり、管理がしやすくなったWordPress(ワードプレス)のプラグインを紹介しています。定番のものが多めです(スパム対策やバックアップ、リンク切れチェック、公式プラグイン「Jetpack」など)。
Read More