ふかふか交易所 - ネットコンテンツから日々のお役立ち情報まで

ふかふか交易所 | ネットコンテンツや日々のお役立ち情報まで
RSSを購読する
follow us in feedly
トップ ゲーム 動画 HP・ブログ お金・クレカ お問い合わせ サイトマップ ページ下部へ

HP・ブログカテゴリ 新着記事

HP・ブログカテゴリ 新着記事

サイト内検索

総合ランキング

ホーム > HP・ブログカテゴリー No.1 ~ No.10 > 記事No.3

超簡単!ホームページにスライドショー機能を実装する方法(JQuery)

← 前の記事

次の記事 →

スライドショー簡単設置方法

自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい! という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します!

ちなみに導入に成功するとこのようなスライドショーが実装されます(GoogleChrome, IE11, IOS動作確認)


導入方法

まずは「bxSlilder」さんのサイトで配布されている JQueryのプラグインファイルをダウンロードしてください(画像の赤枠部分からダウンロード)

「jquery.bxslider.zip」というzipフォルダをダウンロードしたら解凍してください。するといくつかファイルとフォルダが出てくると思いますが、今回はその中の「jquery.bxslider.css」「jquery.bxslider.min.js」「images」 の3つのみを使用するので、この3つを任意の場所(パス)に置いてください。


そうしたら次に、スライドショーを適用したいページのHTMLの<head></head>内に以下のコードを貼り付けてください。


重要!!

上のコード2,3行目の「js/jquery.bxslider.min.js」「css/jquery.bxslider.css」のパスは、ご自身がファイルを置いた場所のパスにそれぞれ変更してください。ここが正しくない場合、スライドショーは動作しません。


※『パス』とはファイルを置いた場所を指定する文字列のことです。

詳しくはコチラ⇒ ホームページの『パス』の指定方法について分かりやすく解説


これでスライドショー機能を付与するJQueryの呼び出しは完了しました!


次はスライドショーで流す画像の設定です。

スライドショーを設置したいHTMLの設置したい箇所に以下のようにコードを書き込んでください。


これで終わりです


・・・は?( ゚д゚)


これで終わりです(迫真)


そう、これだけの手順で上のサンプルで示したようなスライドショーを設置することができるのです。とても簡単ですね!



スライドショーオプションの適用

このbxSliderのスゴイところは、スライドの方法や速度など、細かい設定(オプション)を自分でカスタマイズできるところなのです!

スライドショーオプションの適用方法と、その種類に関しては以下の記事で解説しているので、是非参考にしてみてください。

関連:[bxSlider]スライドショーオプションの記述方法と使い方まとめ


不具合への対処法

対処法についてまとめた記事へ

  • 設置はできたがスライドショーが動かない
  • 配置した画像がバラけてしまう
  • スライドショーに不自然な余白ができてしまう

などの問題の対処法についてまとめた記事を書きました。是非参考にしてみてください。

参考:

[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ

[bxSlider]スライドショー読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法


左右のページ送りボタンが表示されない場合

「jquery.bxslider.css」ファイルを開き、「DIRECTION CONTROLS (NEXT / PREV)」の部分(107行目~) を見てみてください。

左右の送りボタンはダウンロードしたzipの中の「images」フォルダの中にある 画像ファイルから読み込んでいます。

その画像ファイルは「jquery.bxslider.css」の以下の赤枠で囲った部分で読みだしているのですが、 ボタンが表示されない場合は、この部分がボタン画像を置いた部分のパスと異なっている可能性があります。 一度確認してみて、正しいパスに直してください



画像選択ボタン(したにある●)の位置や色を変更したい場合

「jquery.bxslider.css」ファイルを開き、「PAGER」の部分(68行目~) を見てみてください。

画像の赤枠で示した通り、この行では選択ボタン(PAGER)の設定を行っています。

PAGERの色を変更したい場合は色コードを変えれば良いですし、位置を変えたい場合は 一番上の赤枠内に「position: relative」等を適用すれば自由に変更できます


みなさんも是非ご自身のホームページにスライドショー機能を実装してみてはいかかでしょうか。見栄えの良いホームページになること間違いなしです!!


※(2016/06/07) スライドショーがうまく動作しない場合の対処法についてまとめた記事を書きました。

[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ

※(2016/10/29) ページ読み込み時に、スライドショーの画像が一瞬バラけてしまう場合の対処法について、記事を書きました。

[bxSlider]スライドショー読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法

スライドショーはサイトへの訪問者の目を引くことができるから離脱率を下げることができてオススメだよ!

HP・ブログ関連の人気記事

関連記事はこちら

この記事を読んだ人はコチラも見ています

この記事に対するコメント

Comment Box is loading comments...

総合ランキング

HP・ブログ関連カテゴリの人気記事

ご意見や質問などは気軽にメッセージフォームへ!


hp_blog_top
HP・ブログ制作ノウハウまとめ
movie_top
動画制作ノウハウまとめ
money_top
お金・クレカ記事まとめ
minecraft_top
マインクラフト記事まとめ

当サイトについて  月極広告の募集

©Copyright fukafuka295.jp 2016 All rights reserved.

トップ ゲーム 動画 HP・ブログ お金・クレカ お問い合わせ サイトマップ ページ上部へ