こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

FC2のHPでjQueryの設置ができない

FC2のHPでボタンを押すと画像が次々に送られていく一般的なスライド型のjQueryを設置しようとして、参考サイトの通りにソースにプラグインを記述/コピペしたのですが、確認すると、スライド動作が実装されず、ページにただ画像が縦並びになっただけのエラー画面になってしまいます。
解決方法を自分なりに調べて色々試してみましたが、何度やってもダメでした。
行き詰まって先に進めないので、どなたか設置方法を切にお願い致します。
ちなみにタグ類は少しなんとなくわかる程度の初心者なので出来る限り具体的に教えて下さると有り難いです。

<head>と<body>にそれぞれ記述するものを参考サイト通りに入れていったはずなのですが。。
以下に現在打ち込んでいるソースを載せましたので、記述が足りていない/間違っているなど、ありましたら指定して下さい。。

jQueryは現在最新バージョンの【1.10.2】バージョンをFC2ディレクトリにアップロード済みなので一部書き換えなどしてあります。
画像パスが上手くいってないのでしょうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</head>
<body style="background-color: rgb(139, 139, 139); color: rgb(0, 0, 0); ">
<p>&nbsp;</p>
<div class="flexslider">
<ul class="image">
<li>
<img src="image/1128355_m.jpg" />
<p class="flex-caption">画像1のキャプション</p>
</li>
<li>
<img src="image/2661080_m.jpg" />
<p class="flex-caption">画像2のキャプション</p>
</li>
</ul>
</body>

</div>
</html>

ーーーーーーー

それぞれの動作の意味など細かいところまではわかっていません…
プラグインを入れてあるファイルの場所にも問題があるのでしょうか…
ちなみにライトボックスの設置には成功したのですが、ファイルの保存先が違うだけでも動作しないような気がしましたので。

あとFC2では構造上、jQueryが元々使用出来ないような記事を見かけたのですが、他のFC2ユーザーの方は出来ているようなので大丈夫ですよね…

すごく初歩的な事かと思いますが、何卒宜しくお願いします。。
後々補足から回答者様に再度質問させて頂く事もあるかも知れません。

投稿日時 - 2014-01-23 10:52:39

QNo.8442699

すぐに回答ほしいです

質問者が選んだベストアンサー

以下のように追加・変更してみてください。

>中央揃えで幅・高さを指定   (aaa:横、bbb:高さ)
    <div class="flexslider">
       ↓
    <div class="flexslider" style="margin:0 auto; width:aaapx; height:bbbpx;">

>矢印が表示されない
    http://artpaint01hellohappynight.web.fc2.com/css1/の直下に
    fontsフォルダをそのまま(フォルダごと)アップロードする。

>自動ループを止めるオプション
    <script type="text/javascript">
      $(document).ready()
        $(window).load(function() {
         $('.flexslider').flexslider({
          animationLoop: false,
          animation: "slide"
       });
      });

投稿日時 - 2014-01-27 18:01:00

お礼

遅くなりましたが、無事疑問点が解決しました!
基本がわかっていなかったので何度もお聞きしてしまってすみませんでした。
しかし、組み方など勉強になりました。
奥深さやまだまだ色々と難しいこともわかりました。
長い事お付き合い下さって大変感謝しております。
恐らく今回の質問についてはもう大丈夫かと思います。
あとは今回の事を参考に自分でも簡単なカスタマイズ程度は出来るように頑張ってみます。
本当に助かりましたありがとうございました…!

投稿日時 - 2014-01-30 16:33:00

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(6)

ANo.5

とりあえず、これで動作するはずです。
(インデントは全角スペースになっていますので、コピペする場合は半角スペースに変更して
ください)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://artpaint01hellohappynight.web.fc2.com/js1/jquery.flexslider-min.js"></script>
    <link rel="stylesheet" href="http://artpaint01hellohappynight.web.fc2.com/css1/flexslider.css" type="text/css" media="screen" />
    <script type="text/javascript">
      $(document).ready()
        $(window).load(function() {
         $('.flexslider').flexslider({
          animation: "slide"
       });
      });
    </script>

  </head>
  <body style="background-color: rgb(139, 139, 139); color: rgb(0, 0, 0); ">
    <div class="flexslider">
      <ul class="slides">
        <li>
          <img alt="" src="http://artpaint01hellohappynight.web.fc2.com/image/1918753941_130.jpg" />
          <p class="flex-caption">コメント1</p>
        </li>
        <li>
          <img alt="" src="http://artpaint01hellohappynight.web.fc2.com/image/1918753941_201.jpg" />
          <p class="flex-caption">コメント2</p>
        </li>
      </ul>
    </div>
  </body>
</html>

投稿日時 - 2014-01-26 15:12:09

補足

こんにちは、ありがとうございました!!
ページに無事表示され、動作もしました!
かなり悩んでいたので大変助かりました。。

すみません、後もう少しだけ宜しいでしょうか。。
明示してありますソースだとスライドショーがページ全体にフルサイズで表示されてしまうので、例えば、中央揃えで幅・高さを指定して適当な大きさで固定表示するにはどこに書き入れたら良いでしょうか?
ページの一部分に載せたいのですが。。

あと、矢印が表示されないので画像の両端に表示させる矢印のタグと、自動ループを止めるオプション、以上3点それぞれのタグと書き入れ場所を教えて頂けないでしょうか…
重ね重ねすみません。

animation: "slide"に続けてオプションを入れようとするとエラーになってしまうのです…
違うjsにする必要があるのか、自分のやり方がおかしいのか…宜しくお願い致します…

投稿日時 - 2014-01-27 15:22:09

ANo.4

>えっとHPのURLとは自サイトの、でしょうか?
そうです。あなたがスライド・ショーを設定しているページのURLです。

投稿日時 - 2014-01-25 21:18:33

補足

お手数おかけしてしまいすみません。
以下になります。
スライドショーの他はまだありませんが。。

http://artpaint01hellohappynight.web.fc2.com/newfile0.html

ページで見ると文字化けしているみたいなのですが、画像はページ上では表示されていました。
ただの縦並び状態ですが。。
どうぞ宜しくお願い致します。

投稿日時 - 2014-01-25 22:52:39

ANo.3

スクリプトの詳細を理解していませんので必須か否かは定かではありませんが、
<head>~</head>の間に次のようにflexslide.cssのパスを指定して
みてください。

<link rel="stylesheet" href="xxxxx/flexslider.css" type="text/css" media="screen" />

それでもだめな場合、もし差し支えなければホームページのURLを明示してください。
チェックしてあげますよ。

投稿日時 - 2014-01-24 22:00:35

補足

残念ながら…やはりダメでした。。

cssの記述とその他変更も含めソースは現在このようになっています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
$(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});
</script>
</head>

<body>
<body style="background-color: rgb(139, 139, 139); color: rgb(0, 0, 0); ">
<p>&nbsp;</p>
<div class="flexslider">
<ul class="slides">
<li>
<img src="image/11283515_m.jpg" />
<p class="flex-caption">画像1のキャプション</p>
</li>
<li>
<img src="image/26610180_m.jpg" />
<p class="flex-caption">画像2のキャプション</p>
</li>
</ul>
</body>

</div>
</html>

えっとHPのURLとは自サイトの、でしょうか?
参考にさせて頂いたサイト様でしたら、以下になります。
http://motoshige.net/blog/archives/3040
↑のサイト様のデモにありますように、自分が設置したいスライドショーはこちらhttp://flexslider.woothemes.com/になります。

自分自身のサイトのURLですと、まだ何もないに等しく、スライドショーを置きたいページのみ開いている状態なのですが、このページのURLを明示すれば良いのでしょうか?
すみません;

投稿日時 - 2014-01-25 19:39:08

ANo.2

「flexslider.css」が見当たりませんが、質問内容への単なるコピペ
ミスですか?。

投稿日時 - 2014-01-24 14:50:19

補足

いえ、参考にしたサイトでは「必要に応じて」としか書かれていなかったので、必要ない場合もあるのかと思い込んでおり記述してませんでした。
やはり今回の場合CSSが必要でしょうか?
おかしいなとは感じていたのですが、自分にはどこに入れれば良いのかCSSの記述方法がわからなかったので、打ち込めませんでした。
CSSを入れれば動くようになりますか?

上記のソースにCSSを記述する必要があるとなると、どこにどのように打ち込んだら良いでしょうか?
<head>と</head>の間になるのでしょうか。
大変お手数ですが、宜しければソースを教えて頂きたく思います。
度々恐れ入ります。
宜しくお願い致します。

投稿日時 - 2014-01-24 16:34:37

ANo.1

prototype.jsを使用していませんか?。使用している場合は
prototype.jsとjQueryは競合(コンフリクト)します。共存させるためには、
↓の対策が必要です。

参考URL:http://www.css-lecture.com/log/javascript/029.html

投稿日時 - 2014-01-23 12:12:11

補足

prototype.jsは、DLしていないのでたぶん使用してないと思います。
これは元々中に入っているものなのでしょうか?
両方ないといけませんか?
URL先を拝見しましたが、両方を一緒に使う事はよくないとありました。
なのであまり関係ないのかも知れません…

今、ディレクトリにアップしているものは、「js」と書かれたフォルダの中に入っているjquery-1.10.2.min.js(jQuery本体)とjquery-flexslider-min.js
の2つと、フォルダに入っていないflexslider.css、あとはimageフォルダになります。

jQuery本体とflexslider.js、flexslider.cssがアップロードされている状態です。
なのでprototype.jsではなくあるのはflexslider.jsというものなのですが。。

記述方法は上記で大丈夫なのでしょうか?
再度確認したところ、画像表示もいまいちされてないようです。
何か勘違いをしていましたら申し訳ないです。
宜しくお願いします。

投稿日時 - 2014-01-23 15:05:38

あなたにオススメの質問