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

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

たまに毒吐くちゃん

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

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

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

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

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

sponsored link

画像がコンベアのように横に流れるスライドショーの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」へのリンク)が出てしまうのはちょっと気になりますが……それほど目立たないし、許容範囲ではないかと。

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

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






  

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

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

スポンサーリンク

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の無料テーマ おすすめ6個【日本語、レスポンシブ、SEOに強い】

WordPressの無料テーマ おすすめ6個【日本語、レスポンシブ、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プラグイン【無料、定番多め24個】

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

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