jQuery・js・PHP slick を使用した＜流れるようなスライダー＞
流れるようなスライダーを付けたいということなので自動ループでつくりました、使用するスライダーは「slick」。 「slick」については過去記事を参考にしてください。 公式： 今回は単体でも動くようにCDNリンクを利用して単体で動くようにし...
jQuery・js・PHP
jQuery・js・PHP Bootstrap 5 PROGRESS BAR.JSでプログレスバーが表示されるローディング画面を作成
分析結果などを表示するサイトで分析結果のページが表示する前に「分析中～。。。」などど別ページを表示させる方法です。 仕組み メインのページの上にローディングのページを重ね、ローディングページのプログレスバーの作動が終わったらそのページを消す...
EC 楽天やヤフーショッピングで毎月決まった日だけにバナーを表示する
毎月1日は楽天市場のワンダフルデー、毎月18日は楽天市場ご愛顧感謝デー、毎月5と0のつく日は楽天カード利用でポイント5倍。 ヤフーショッピング5のつく日はポイント5倍、ゾロ目の日はお得なクーポン開催・・・・・ バナーを貼るのも大変です、そん...
jQuery・js・PHP スライダー/カルーセル「Flickity」が突然不具合（表示されない）＜CDNの盲点＞
レスポンシヴ対応のスライダー「flickity」、jQueryに依存しないのでCDNで使えばHTMLファイル1つで動きます。 このファイル一つで動くのは楽天やヤフーショッピングのページ作りにはとても便利なので多用していました。 公式サイト：...
Bootstrap4 カウントダウンタイマー＜jQueryプラグイン「yycoutdown」＞
楽天のスーパーセールやお買い物マラソン、ヤフーショッピングなどのセールに使えるカウントダウンの付いたページ。 そんなページを使う時に便利なのがjQueryプラグイン「yycoutdown」。 jQueryカウントダウンタイマー【デザイン自由...
jQuery・js・PHP jsファイルの読み込みでjQueryのCDNも読み込む
楽天やヤフーでのひと気システム（にぎわい演出システム＆自動更新）。売り上げやランキング、レビューなんかを自動更新するシステムなんですが一度提供元にHTMLファイルを提出するとFTPで送られてくるHTMLは修正できません。（修正には追加料金が...
Bootstrap4 スライダー「Slider Pro」がIE（Internet Explorer）で動かない
万能スライダー「Slider Pro」、動きも安定しているのでよく使います。今回もBootstrap4に組み込んだんですが IE（Internet Explorer）で動かないとの連絡が・・・・。 「Slider Pro」はCDNでの読み込...
Bootstrap4 スクロールで要素をふわっと表示させる「jquery.inview.js」ブートストラップ4CDNバージョン
スクロールで要素をアニメーションさせ、アニメーション設定もCSSで簡単にできる「jquery.inview.js」、レスポンシブの1枚ページの利用頻度が高くなってきているので便利なJSです。 でもちょっと「jquery」のバージョンなどの理...
jQuery・js・PHP シンプルなハンバーガーメニューの定番＜Drawer/ドロワー＞
一昔前は効果が薄いと言われたハンバーガーメニュー、3本線ハンバーガーの形がメニューとして認知されこの頃見直されています、逆にスマホでは必需品？ 左、右、上などからニュロっと出てくるドロワーメニューですがシンプルなものがいい、そんなニーズに合...
Bootstrap4 アイフォン（iPhone）のiframe（インラインフレーム）と相性が良かったスライダー＜Flickity＞
スライダーをインラインフレームで読み込む、そんなページでアイフォンで不具合が・・・・・ アイフォンとインラインフレームはとても相性が良くない、悩みの種ですね。「Netscape Navigator」全盛期にはマイクロソフトの「IE」の我がま...