2枚の画像を比較するのに便利な『比較用スライドショー』を超簡単に設置する方法を紹介！
以前の記事で、ホームページに普通のスライドショーを設置する方法について紹介しました。 [blogcard url="https://fukafuka295.jp/homepage-slideshow-kantan/"] しかし今回紹介するスライドショーは、2枚の画像を比較したい時に非常に便利な『比較用スライドショー』です！（通称：Cocoen） 例えば以下のような2枚の画像を比べて見せたいとします。 ここで『比較用スライドショー』を導入すると、以下のように、カーソル操作で2枚の画像を見比べる ...
[bxSlider]スライドショーオプションの記述方法と使い方まとめ
以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。 [blogcard url="https://fukafuka295.jp/homepage-slideshow-kantan/"] bxSliderには、スライド方法を変更したりスピードを変更したりと、スライドショーを自由にカスタマイズできるオプションが多数用意されています。 そこで今回は、bxSliderのスライドショーに適用できるオプションの種類と記述方法について、紹介していこうと思います！ オプ ...
[bxSlider]スライドショー読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法
以前の記事で、サイト上に「bxSlider」のスライドショーを設置する簡単な方法について解説しました。 しかし実際にスライドショーを設置した方々から、スライドショーを読み込む際に、一瞬画像がバラバラに表示されてしまうという報告をいただきました。 ▼画像が重いと、ページ読み込み時にこのようにスライドショーが一瞬崩れて表示されてしまう。 一瞬でもレイアウトが崩れてしまうと気になるしカッコ悪いですよね。そこで今回は、スライドショーの読み込み時に画像が一瞬バラけてしまう場合の超簡単な対処法についてご紹介します！ ...
[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ
以前このサイトの記事にて、jQueryで動作するスライドショー「bxSlider」の簡単な設置方法について解説しました。 すると、一部の方々から、スライドショーが正常に動作しないとの報告を少なからず頂きます。 そこで今回は「bxSliser」のスライドショーに関して、 「設置はできたがスライドショーが動かない」 「スライドショーに不自然な余白ができてしまう」 といった場合の対処法についてまとめてみました！ スライドショーが正常に動作しない場合の対処法 対処法① jQuery実行コードの書き換え 正常に動作 ...
ホームページにサムネイル付きスライドショーを簡単に設置する方法(jQuery)
ホームページやブログに設置した「bxslider」のスライドショーに簡単なカスタマイズを施して、 下に各スライドの画像が表示される"サムネイル付き"のスライドショーにする方法について解説します！ ▼実装例（このようなデザインのスライドショーが設置できます） 既にjQueryによるスライドショーが設置できている事が前提となりますので、初めてスライドショーを設置する方は、以下の記事を参考にスライドショーを設置しておいてください。 htmlへの記述 すでに「bxslider」のスライドショーが設置出来てる方はh ...
ホームページにアコーディオンのようなフォトスライドを簡単に実装する方法
すこし洒落た感じのフォトスライドをホームページのトップに実装したい！ そんな時に役に立つ、レスポンシブ対応のアコーディオン形のスライダー（raccordion slider） を簡単に実装する方法について今回は紹介します！ ちなみに以下のDEMOページのようなフォトスライドが実装されます。 DEMOページ ソースプログラムのダウンロード https://egrappler.com/jquery-responsive-horizontal-accordion 今回実装する「raccordion slider ...
クリックでその場に画像を拡大表示！ホームページに「LightBox」機能を実装する方法
画像をクリックすると、 別ページに飛ぶことなくその場で拡大表示してくれるjQueryの有名プラグイン「LightBox」を ホームページに実装する方法について、簡単に解説します！ ▼ 実装例（画像をクリックすると拡大します） ①「LiteBox Plus+」プラグインのダウンロード 「LightBox Plus+」のダウンロードサイトへ行き、下の方にスクロールすると見える Downloadボタンを押して「lightbox_sample.zip」という.zipファイルをダウンロードしてください。 ダウンロー ...
超簡単！ホームページにスライドショー機能を実装する方法(JQuery)
自分のホームページに画像がどんどん移り変わるスライドショー機能を追加して賑やかにしたい！ という方々のために今回、超簡単にスライドショーを設置する方法をご紹介します！ ちなみに導入に成功すると↓このようなスライドショーが実装されます(GoogleChrome, IE11, IOS動作確認) ▼こちらのスライドショーもおすすめ！ スライドショーの簡単な設置方法 まずは「bxSlilder」さんのサイトで配布されている JQueryのプラグインファイルをダウンロードしてください（画像の赤枠部分からダウンロード ...