うらなか書房のあやしいグッズあり〼うらなか書房と申します。Yahoo、Tシャツトリニティなどで、ちょっとあやしいTシャツやグッズの販売をしています。このブログでは、おすすめの映画や漫画、本、その他風変わりなもの・場所などの紹介をしています(たまにお役立ち情報や陰気な話も書きます)。@uranakashobou//padding-left本ページはプロモーションが含まれています。公開日:2017/01/23twitter2facebook0hatenabookmark25lineこれは画像です。下の方に実際に機能しているスライドショーを設置しています。ブログやWebサイトに、上のようなスライドショー(スライダー、カルーセルとも呼ばれます)を設置したいと思ったことはありませんでしょうか。以下でそのコードをご紹介致します。画像の遅延読み込みをしている場合、スライドショーが表示されなくなる可能性があります。画像がコンベアのように横に流れるスライドショーのCSS上記のコードをスタイルシートに記述します。高さ8行目のheight:93px;の数字を変えると、スライドの高さを変更できます。下のものは高さ177pxの少し大きめのスライドです。回り込みリストを横並びにするのに、float:left;(17行目)というコードを使っています。「float」より、「flex」「inline-block」「table-cell」などを使用したほうが現代的(?)だと思うのですが、そうするとサイズがおかしくなったり速度がやたら速くなったりしたので「float」を使用しています。回り込みに「float」を使用することにより回り込みの解除が必要になります。1;が回り込み解除に関するコードになります(12行目はIE6、7用)。ちなみに、IE8を切り捨てるともっとコードを短くできるのだとか。【CSS】最新のclearfixがどんどん短く。2/3/4のCSSを見て数年後にはIE8切り捨ての短いコードの方が主流になっているかも......。画像がコンベアのように横に流れるスライドショーのjQueryのコードスライドショーを表示させたい場所に以下のjQueryのコードを記述します。WordPressとWordPress以外でコードが異なりますのでご注意ください。WordPress以外のjQueryのコードWordPress用のjQueryのコードWordPressの場合、jQueryのカプセル化というものが必要になります。3000,の数字を変えると画像がスライドする速度を変更できます。src="画像のURL"></a>と書くことにより、画像を表示させたりその画像にリンクを貼ることができます。アイテム数に応じて、不要な「<li></li>」は削除してください。足りない場合は付け足してください。上記のコードにより、このようなスライドショーが表示されるようになります。別のタイプのスライドショーの紹介CSSのみで動く横スライダーアイテム数がそれほど多くない場合はこちらでもいいかもしれません。【CSSのみ】カルーセル、横スライドショー【自動で動く】CSSで作るスライドショー(自動で繰り返し、フェイドイン・アウトで画像を切り替え、それぞれの画像にリンク)上のようなスライドショーを、JavaScriptやjQueryを使わずにCSSで表示することができます。下記の記事でその方法を紹介しています。書いている人うらなか書房あやしい絵を描いて、それをTシャツやグッズにしています。ホラー映画、カルト映画、その他ちょっと奇妙なものや風変わりなものを見たり読んだりすることが好きです。34マスコットキャラ当ブログのマスコットキャラ「たまに毒吐くちゃん」。Reserved.プライバシーポリシーarrowuphome。