SeesaaブログでjQueryを使う留意点

こんにちは! Benです。

前回、jQueryを使ったスライドショーを掲載しましたが、SeesaaブログでjQueryを使うときに気を付けたことがありましたのでノートします。

20160206a.gif

プレビューの落とし穴
プレビュー時のHTMLソースの一部が上記の画像ですが、プレビュー表示するためにVer.1のjQueryを利用しているようです。なので、プレビューの時はjQueryを読み込まなくても、そのライブラリを使用したスクリプトを利用できます。
本番では
少なくとも公開したには、現在はプレビューの時のようなjQueryの読み込みはないです。今日実際にプレビューでスライドショーの動作確認をして、正常に表示されているのを確認してから公開しましたが、公開されたものでは見事にスライドショーは表示されていませんでした。慌ててjQueryを読み込むタグを追加して対処しました。基本的に、jQueryなどは2重に読み込むのは好ましくなく、バージョンの違うのを複数読み込むのは動作を不安定にする要因にもなりかねないのでやらない方がいいようです。なので、ソースをチェックして、本文中に読み込みを確認したので、自前の読み込みをやめたのですが。まさか、プレビューだけのモノだったなんて!
スマホなどでは
スマホなどのモバイルページはCSSしかいじることができません。HTMLはいじれないので、望む場所にスクリプトを入れることができなく、今回のスライドショーはスマホでは見れないです。

ちなみに、この記事には、ダブってもいいので、下に前回と同じスライド情報とjQueryとスライドショーと、スマホで見れなかったコードの記述をbody内に全て入れてみました。Seesaaだけに限らず、このようなブログサイトは、記事の前後等に様々な装飾的タグを挿入するので、タグをなかなか目的の場所に入れることができません。今回も、PCでは確認できましたが、スマホ等では無理かな? やっぱ難しいようなので、ご面倒ですが「PC表示」で見ていただければ幸いです。 
(2016.02.07追記)
スライドショーは動きませんでしたが、コードの表示は該当するCSSの中身をスマホ用のCSSの後ろにコピペしたら使えるようになりました。FlexSliderのCSSも同様です。
そして、色々試しているうちにスライドショーもできるようになりました。こちらのダメもとのコードはSeeSaa様に負担をかけないよう削除して、次回解決板をノートします。

この記事へのコメント


この記事へのトラックバック