しかも、他の非公開ブログで前もって実験していて、そちらでは正常に機能したのにです。
対処法を求めて少し調べてやってみました。
一番最初に開いた基本チェックの参考にしたのはこちらです。
[Bxslider]スライドショーが正常に動作しない、設置できない場合の対処法まとめ | ふかふか交易所
1. オンライン（公開する）
基本中の基本ですが、記事を使ったスライダーでは限定公開ではスライダーが出ないです。2. jQuery実行コードを書き換える
「jQueryが動いていないのでおかしくなっている可能性があります。」ということで、Ctrl+fでスクリプトコードで
$(document).ready(function(){
を検索して移動。
①
**$(document).ready(function(){
というところを
jQuery(document).ready(function($){
に直す。②
上下に
jQuery(function($){と
});を足す。
■■■■■■■■■jQuery(function($){$(document).ready(function(){
});});
①も②もやってみましたが変化なし。
3. jQuery多すぎ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
こういうやつが、バージョン違いでいくつかある場合、競合して動かないことがあります。
一つしかなかった。
4. jQueryのバージョンを変えてみる
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
を、1.8.2あたりに変えてみます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
変化なし。そもそも別の非公開bloggerでは動いてたのでこの辺に問題はないような。5. httpsとhttpの競合
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
最近bloggerを含め多くのブログがhttpsを推奨していますが、httpとhttpsの混在はあまりよろしくないらしいです。ここが最初httpだったので、接続することを確認しhttpsに変えてみた。変化なし。
6. デベロッパーツールのConsoleでチェックする
ブラウザのデベロッパーツールを使います。chromeの場合デベロッパーツールという名称。右端の３つの縦並びの点の中に
その他のツールの中にあります。
ここでCSSのチェックなどができるわけですが、
Consoleの文字が見えます。
エラーが出てる箇所が判明。
「colorboxが機能してない」とあります。
Ctrl+Fでコードをcolorboxを検索しても該当なし。
昔使ってたスライダーのコードでも出てるのだろうか？うーん。
右端の文字をクリックすると、該当コードに飛びます。
どうもこいつが悪さしてるような。しかし、本コードの中のこの行にはそのような文字はない。これはhtmlなので上のほうに持っていった。するとある文字が出た。
「てへ。」
てへ？こっちは必死なのに！ふざけてるの!?
いやいや、これはブログ記事の…
7. 結論・ブログ記事内のscriptが原因だった
このスライダーは最新記事５つを読み込むものだったので、「てへ。」は５つの中にある。あった！→削除
スライダー動きました！
まさかの記事の中に問題があるとは、誰も書いてなかった。
このcolorboxというのは、jQueryを使って動かすもので画像をポップアップしてくれます。記事の画像に記述しないといけないもので、以前使ってました。ということは、他の記事にも入ってる可能性がありますが、最新記事しか関係ないのでとりあえず無視。
５時間くらいかかったのに、原因が「てへ。」って…。一時ははずすことも考えたのに。
今回は、裏の別のサイトでテンプレテストを実施してたのですぐに原因が判明しましたが、jQueryはちょっとしたことで動かなかったりします。前もって本サイトで動かすより、テストサイトで実験しておいたほうがよいと思います。
