Q&A
なにかJSのエラーとかは出ていないんでしょうか？ とりあえずは jsや画像ファイルなどのURLに直接アクセスして、ちゃんと存在してるのか確認してみるのが良いと思います。
###前提・実現したいこと
現在python × bottleにてwebサイトの公開を試みております。
ローカル環境では問題なく表示されているのですが、
本番環境にデプロイ後の表示がおかしいです。(画面が潰れてしまっているようなイメージです。)
ローカル環境では文字の上に画像がスライドで入り、しっかりと動作することを確認しております。
下記はhtmlのソースコードになります。
コードからも分かりますが、上記画像の「Copyright K-PRODUCTION 2017」はページのフッターなので、明らかにスライドする画像部分が潰れてしまっています。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>K-z-Movie Studio</title> <!-- Bootstrap Core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="css/full-slider.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Menu</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li> <a href="https://×××/working">Work</a> </li> <!--<li> <a href="#">Services</a> </li>--> <li> <a href="">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Full Page Image Background Carousel Header --> <header id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for Slides --> <div class="carousel-inner"> <div class="item active"> <!-- Set the first background image using inline CSS below. --> <div class="fill" style="background-image:url('/img/aaa.jpg');"></div> <div class="carousel-caption"> <h2>Take it easy...</h2> </div> </div> <div class="item"> <!-- Set the second background image using inline CSS below. --> <div class="fill" style="background-image:url('/img/bbb.jpg');"></div> <div class="carousel-caption"> <h2>Should be relax...</h2> </div> </div> <div class="item"> <!-- Set the third background image using inline CSS below. --> <div class="fill" style="background-image:url('/img/ccc.jpg');"></div> <div class="carousel-caption"> <h2>For our best time...</h2> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </header> <!-- Page Content --> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1><font color="red">Movie</font></h1> <p>Movie is my passion.</p> <p>If you are interested in my work,,,<a href="https:/×××/working">check it out</a></p> </div> </div> <hr> <!-- Footer --> <footer> <div class="row"> <div class="col-lg-12"> <p>Copyright © K-PRODUCTION 2017</p> </div> </div> </footer> </div> <!-- /.container --> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- Script to Activate the Carousel --> <script> $('.carousel').carousel({ interval: 5000 //changes the speed }) </script> </body> </html>
ちなみにheroku logsは
このような感じで、特別エラーが出ているようでもございません。。
またフォルダ構成は下記の通りです。
├─Include ├─Lib │ ├─collections │ │ └─__pycache__ │ ├─distutils │ │ └─__pycache__ │ ├─encodings │ │ └─__pycache__ │ ├─importlib │ │ └─__pycache__ │ ├─site-packages │ │ ├─bottle-0.12.13.dist-info │ │ ├─pip │ │ │ ├─commands │ │ │ │ └─__pycache__ │ │ │ ├─compat │ │ │ │ └─__pycache__ │ │ │ ├─models │ │ │ │ └─__pycache__ │ │ │ ├─operations │ │ │ │ └─__pycache__ │ │ │ ├─req │ │ │ │ └─__pycache__ │ │ │ ├─utils │ │ │ │ └─__pycache__ │ │ │ ├─vcs │ │ │ │ └─__pycache__ │ │ │ ├─_vendor │ │ │ │ ├─cachecontrol │ │ │ │ │ ├─caches │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ └─__pycache__ │ │ │ │ ├─colorama │ │ │ │ │ └─__pycache__ │ │ │ │ ├─distlib │ │ │ │ │ ├─_backport │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ └─__pycache__ │ │ │ │ ├─html5lib │ │ │ │ │ ├─filters │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ ├─treeadapters │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ ├─treebuilders │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ ├─treewalkers │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ ├─_trie │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ └─__pycache__ │ │ │ │ ├─lockfile │ │ │ │ │ └─__pycache__ │ │ │ │ ├─packaging │ │ │ │ │ └─__pycache__ │ │ │ │ ├─pkg_resources │ │ │ │ │ └─__pycache__ │ │ │ │ ├─progress │ │ │ │ │ └─__pycache__ │ │ │ │ ├─requests │ │ │ │ │ ├─packages │ │ │ │ │ │ ├─chardet │ │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ │ ├─urllib3 │ │ │ │ │ │ │ ├─contrib │ │ │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ │ │ ├─packages │ │ │ │ │ │ │ │ ├─ssl_match_hostname │ │ │ │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ │ │ ├─util │ │ │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ └─__pycache__ │ │ │ │ ├─webencodings │ │ │ │ │ └─__pycache__ │ │ │ │ └─__pycache__ │ │ │ └─__pycache__ │ │ ├─pip-9.0.1.dist-info │ │ ├─pkg_resources │ │ │ ├─extern │ │ │ │ └─__pycache__ │ │ │ ├─_vendor │ │ │ │ ├─packaging │ │ │ │ │ └─__pycache__ │ │ │ │ └─__pycache__ │ │ │ └─__pycache__ │ │ ├─psycopg2 │ │ │ ├─tests │ │ │ │ └─__pycache__ │ │ │ └─__pycache__ │ │ ├─psycopg2-2.6.2.dist-info │ │ ├─setuptools │ │ │ ├─command │ │ │ │ └─__pycache__ │ │ │ ├─extern │ │ │ │ └─__pycache__ │ │ │ └─__pycache__ │ │ ├─setuptools-33.1.1.dist-info │ │ ├─wheel │ │ │ ├─signatures │ │ │ │ └─__pycache__ │ │ │ ├─test │ │ │ │ ├─complex-dist │ │ │ │ │ ├─complexdist │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ └─__pycache__ │ │ │ │ ├─headers.dist │ │ │ │ │ └─__pycache__ │ │ │ │ ├─simple.dist │ │ │ │ │ ├─simpledist │ │ │ │ │ │ └─__pycache__ │ │ │ │ │ └─__pycache__ │ │ │ │ └─__pycache__ │ │ │ ├─tool │ │ │ │ └─__pycache__ │ │ │ └─__pycache__ │ │ ├─wheel-0.29.0.dist-info │ │ └─__pycache__ │ └─__pycache__ ├─Scripts │ └─__pycache__ ├─static │ ├─css │ ├─fonts │ ├─img←ここにaaa～ccc.jpgが入っている。 │ └─js ├─tcl │ ├─tcl8.6 │ │ ├─encoding │ │ ├─http1.0 │ │ ├─msgs │ │ ├─opt0.4 │ │ └─tzdata │ │ ├─Africa │ │ ├─America │ │ │ ├─Argentina │ │ │ ├─Indiana │ │ │ ├─Kentucky │ │ │ └─North_Dakota │ │ ├─Antarctica │ │ ├─Arctic │ │ ├─Asia │ │ ├─Atlantic │ │ ├─Australia │ │ ├─Brazil │ │ ├─Canada │ │ ├─Chile │ │ ├─Etc │ │ ├─Europe │ │ ├─Indian │ │ ├─Mexico │ │ ├─Pacific │ │ ├─SystemV │ │ └─US │ └─tk8.6 │ ├─demos │ │ └─images │ ├─images │ ├─msgs │ └─ttk └─views ・myhp.py ・pip-selfcheck.json ・Procfile ・requirements.txt ・runtime.txt
原因が何かもはっきりと分からず、ここから先に進めず途方に暮れております。
どなたかアドバイスを頂ければ幸いです。
宜しくお願い致します。
早速のご回答有難うございました。デベッロパーツールを開いたところSorry, the requested URL 'https://XXX.herokuapp.com/favicon.ico' caused an error:というところに行きつきましたが、どういったことでしょうか。
それは単純に favicon.ico の画像がなくて404になってるだけなので、今回のお困りの点とはあまり関係なさそうです。
とすると他にエラーらしき点は見つからないのですが。。上記のURLに直接アクセスしてちゃんと存在していｒのか確認するとは、どういった方法でしょうか？
失礼致しました。仰っている旨、把握致しました。全てアクセスしまして、存在は確認できました。
ちなみにwebサイト上で、全て選択→コピペすると、スライド上に表示させている文字をコピーしてくれます。どこかのサイズがおかしいのですかね。。
あなたの回答
tips
プレビュー
