質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • HTML

    9534questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6177questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

ローカルの表示とレンタルサーバーに転送してアクセスした後の表示が違う

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 436

kiiti

score 4

最近自分のWebサイトを人様の作ったテンプレートを書き換えたりすることを卒業しようと思い
心機一転一から自分でデザインから組み込んで作っています。
とりあえず外装やシステムなどは完全に終わっており、
ローカルでの表示もさほど問題がある点はなかったので実際にテスト用サーバーにアップしてみました。
しかし、ローカルではきちんと作動していたところ
(スライダー)がサーバーにアップしてアクセスしてみると作動しないで縦に画像が並んでいるだけになっておりました。(サーバーはFC2です)
しかし、スライダーだけ適用されていないのかな?と思いきやどうやらそのページ全体のJavaScriptの設定が利かなくなっているようです。

ただ反映されていないだけかな?と思いスーパーリロードやキャッシュ削除→もう一度アクセスなど
いろいろと試してみたのですがやはり変わらずローカルの表示と変わってしまいます。

あとは、コードの所にきちんとJavaScriptが指定されているか?なども確認しましたが、間違っている様子はありませんでした。

スライダーはbx-sliderを使用しており、HTMLはこんな感じです。
機能を見て気に入ったものはコピペしてそのまま入れ込んでしまっているので汚くなってしまいましたが…
ちなみにスライダーの外見設定にあたるCSSはz-indexしかありません。

<!DOCTYPE html>
<html lang="ja">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>サイト名</title>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" charset="utf-8" />
    <link rel="stylesheet" href="css/jquery.bxslider.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/JavaScript.js"></script>
    <script type="text/javascript" src="js/jquery.bxSlider.min.js"></script>

    <script>
    $(document).ready(function() {
    $('body').fadeIn(500);
    });
    </script>
    <script type="text/javascript">
$(document).ready(function(){
    $('.slider').bxSlider({
    auto: true,
    pause:  5500,
    speed: 800,
    mode: 'fade',
    pager:true,
    prevText: '<',
    nextText: '>'
    });
  });
    </script>

</head>
<body>

    <div id="headerArea">

        <header>
            <img src="img/logo.png" width="200" class="logo">
            <section class="sidebar">
                <div Align="right">
                    <figure class="relative">
                        <a href="#"><img src="img/top.png"></a>
                        <a href="#"><img src="img/info.png"></a>
                        <a href="#"><img src="img/main.png"></a>
                        <a href="#"><img src="img/bookmark.png"></a>
                        <a href="#"><img src="img/blog.png"></a>
                        <a href="#"><img src="img/?.png"></a>
                    </figure>
                </div>
            </section>
        </header>
    </div>

        <div id="contentsArea">
            <section class="contents">
                <!--ここからスライダー->

                <ul class="slider">
                    <li><img src="img/te.png"></li>
                    <li><img src="img/su.png"></li>
                    <li><img src="img/to.png"></li>
                </ul>

                <!--ここまでスライダー-->

・
・
・


![イメージ説明
私の検索の仕方が悪いのか検索しても同じ症状は全く出てきませんでした…
長くなってしまいましたが、どなたかお助け頂ければと思います、宜しくお願いします!

----追記----
検証モードのスクリーンショット張っておきます。
あと、私はJavaScriptについては良く分かりません。
今使っているものも例に従って見様見真似で写したりファイルを入れればOKというものを使ったりしているので…
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/01/07 03:35

    デベロッパーツール ⇒ http://eng-entrance.com/javascript-display-error

    キャンセル

  • kiiti

    2017/01/07 03:44

    あっ……とすみません、何か勘違いしてました。張っておいたのでどうぞ!

    キャンセル

  • Kosuke_Shibuya

    2017/01/07 03:46 編集

    動かない理由は、エラーメッセージの通りです。 「張っておいたのでどうぞ!」←なんだこれ?直さずに放置したところで私は困らないし、直しても得はしないのですが。

    キャンセル

回答 2

checkベストアンサー

+2

既に指摘がありますが、JavaScriptが読み込まれていません。相対パスで設計していないのであれば、JavaScriptは絶対パスで書いておいたほうが良いです。

【HTMLの相対パス、絶対パスを紹介します【HTML5実践編】】
http://scene-live.com/page.php?page=16

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/07 12:43

    有難う御座います。読み込まれていないと聞いてとりあえず先に読み込んでおくべきものを読み込ませたら直りました。

    キャンセル

0

良く分かりませんが何かを消してしまった故こうなったようです。
消したものを特定して追加したり色々直したりしていたら直ってました。(先に読み込むものを読み込んでおく等)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    9534questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6177questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。