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

うらなか書房と申します。AmazonYahooClubTTTrinitySUZURIなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめのホラー映画や漫画、本、その他風変わりなもの・場所などの紹介をしています(たまにお役立ち情報や暗い話も書きます)。

たまに毒吐くちゃん

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

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

time 更新日:  time 公開日:2017/01/23

jQueryスライダー
これは画像です。下の方に実際に機能しているスライドショーを設置しています。

ブログやWebサイトに、上のようなスライドショー(スライダー、カルーセルとも呼ばれます)を設置したいと思ったことはありませんでしょうか。
以下でそのコードをご紹介致します。

スポンサーリンク

画像がコンベアのように横に流れるスライドショーのCSS

上記のコードをスタイルシートに記述します。

高さ

8行目の

height:93px;

の数字を変えると、スライドの高さを変更できます。下のものは高さ177pxの少し大きめのスライドです。

回り込み

リストを横並びにするのに、

float:left;

(17行目)というコードを使っています。

float」より「table-cell」や「inline-block」を使用したほうが現代的(?)だと思うのですが、そうするとサイズがおかしくなったり速度がやたら速くなったりしたので「float」を使用しています。

回り込みの解除

回り込みに「float」を使用することにより回り込みの解除が必要になります。

22~31行目と、12行目の

zoom: 1;

が回り込み解除に関するコードになります(12行目はIE6、7用)。

ちなみに、IE8を切り捨てるともっとコードを短くできるのだとか。

参考 【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て(2016年版)

数年後にはIE8切り捨ての短いコードの方が主流になっているかも……。

画像がコンベアのように横に流れるスライドショーのjQueryのコード

参考にさせて頂いたサイト

【jQuery】超カンタン!!ループするスライドショーの作り方

上記のページを参考にさせて頂きました(このページのスライドショーは縦方向にスライドします)。


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

WordPressWordPress以外でコードが異なりますのでご注意ください。

WordPress以外のjQueryのコード

WordPress用のjQueryのコード

WordPressの場合、jQueryのカプセル化というものが必要になります。

参考 WordPressでのダメなjQuery関数の囲み方4パターンと対策講座

共通事項

スライドショーの速度

10行目の

duration : 3000,

の数字を変えると画像がスライドする速度を変更できます。

<li></li>の間にアイテムを追加する

下の方にある「<li></li>」の間に、

<img src="画像のURL">

や、

<a href="リンク先のURL"><img src="画像のURL"></a>

と書くことにより、画像を表示させたりその画像にリンクを貼ることができます。

アイテム数に応じて、不要な「<li></li>」は削除してください。足りない場合は付け足してください。

スポンサーリンク

画像がコンベアのように横に流れるスライドショーの完成

上記のコードにより、このようなスライドショーが表示されるようになります。

別のタイプのスライドショーの紹介

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

以前記事上に「忍者画像RSS」というものを設置していました。

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

RSSを登録しておけば、

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

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

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

注意
以前はここに見本を載せていたのですが、「忍者画像RSS」はSSLに対応していないようで、このブログをSSL化した際に非表示になってしまったので外しました。

WP Responsive Recent Post Slider

WP Responsive Recent Post Slider

ワードプレスの場合、記事を更新順にスライダー表示してくれるプラグインがあります。
このブログでも一時期使用していました。
表示のパターンが4つの中から選べたり、ショートコードのパラメーターで表示記事数やカテゴリーの指定ができたりなど、なかなか使い勝手がいいプラグインでした。

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






クリエイターズハイブ

  

上のようなスライドショーを、JavaScriptやjQueryを使わずにCSSで表示することができます。下記の記事でその方法を紹介しています。

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

スポンサーリンク

マスコットキャラ

たまに毒吐くちゃん

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

AmazonなどでTシャツやグッズを販売しています

Amazon詳細ページへ
Amazon Yahoo!ショッピング TSHIRTS TRINITY  SUZURI Zazzle itaxes 価格・送料比較表