Skip to main content
Known Participant
January 21, 2021
Question

カルーセルが出ない

  • January 21, 2021
  • 1 reply
  • 21127 views

大学のホームページを変更しています。ページによってboostrapのカルーセルが機能したりしなかったりします。機能しているページに機能しないページ(3枚の写真スペースが縦一列に現れる)をリンクさせると、機能していたページまで壊れます。対処方法を教えてください。ちなみに、どうしてもカルーセルが機能しないページのコードは以下のようになっています。

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-171786245-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-171786245-1');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="../ja/js/styleswitcher.js"></script>
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css" />
<!-- <script type="text/javascript" src="../ja/js/jquery.js"></script> -->
<script src="file:///C|/Users/seiko/AppData/Roaming/Adobe/Dreamweaver 2021/ja_JP/Configuration/Temp/Assets/eamDADE.tmp/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../ja/js/style.js"></script>
<script type="text/javascript" src="../ja/js/rollover.js"></script>
<script type="text/javascript" src="../ja/js/navi_rollover.js"></script>
<script type="text/javascript" src="../ja/js/script.js"></script>
<link rel="stylesheet" href="../ja/css/style.css" type="text/css" />
<link href="../css/test.css" rel="stylesheet" type="text/css" />
<meta name="description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Overview: Graduate School of Fisheries Science and Environmental Studies, Nagasaki University</title>
</head>
<body>
<div id="container">

<div id="header">

<noscript>
<div id="noscript">
Your browser appears to have JavaScript disabled.<br />
The features of this page may not work nor display properly if your browser has JavaScript disabled.<br />
To view all information, we recommend that you enable JavaScript (activate) in the browser settings.
<!-- end #noscript --></div>
</noscript>

<div class="content">

<div class="skipNavigation">
<p>
You may skip common menus on this page and directly view the text. To directly view text, click "Go to main body."<br />
<a href="#section1">Go to main body.</a>
</p>
<!-- .skipNavigation --></div>

<div id="logo">

<p>
<a href="../index.html"><img src="../images/common/logoE.gif" alt="Nagasaki University" /></a>
</p>

<!-- end #logo --></div>

<div id="tools">

<div id="langNavigation">
<ul>
<li><a href="../../index.html"><img src="../images/common/japanese.gif" alt="Japanese" /></a></li><!--
--><li><a href="../index.html"><img src="../images/common/english.gif" alt="English" /></a></li>
</ul>
<!-- end #langNavigation --></div>

<div id="contactNavigation">
<ul>
<li><a href="../contact/index.html">Contact</a></li><!--
--><li><a href="../access/index.html">Access Guide</a></li><!--
--><li><a href="../sitemap/index.html">Site map</a></li>
</ul>
<!-- end #contactNavigation --></div>

<div id="mojisize">
<ul>
<li><img src="../images/common/moijE.gif" alt="Change the font size" /></li><!--
--><li><a href="#top" onclick="fsc('larger');return false;" onkeypress="fsc('larger');return false;"><img src="../images/common/bigE.gif" alt="Make the font larger." /></a></li><!--
--><li><a href="#top" onclick="fsc('smaller');return false;" onkeypress="fsc('smaller');return false;"><img src="../images/common/smallE.gif" alt="Make the font smaller." /></a></li><!--
--><li><a href="#top" onclick="fsc('default');return false;" onkeypress="fsc('default');return false;"><img src="../images/common/resetE.gif" alt="Default" /></a></li>
</ul>
</div>

<div id="search">
<form method="get" action="http://www.google.com/search">
<table cellpadding="0" cellspacing="0">
<tr valign="top">
<td><a href="http://www.google.com/"><img src="../images/common/google_logo.jpg" border="0" alt="Google" align="absmiddle" width="50" height="20" /></a></td>
<td><input type="text" name="q" size="22" maxlength="255" value /><!--
--><input type="hidden" name="ie" value="utf-8" /><!--
--><input type="hidden" name="oe" value="utf-8" /><!--
--><input type="hidden" name="hl" value="en" /><!--
--><input type="submit" name="btnG" value="Search this site" /><!--
--><input type="hidden" name="as_sitesearch" value="http://www.fe.nagasaki-u.ac.jp" />
</td>
</tr>
</table>
</form>
<!-- end #search --></div>

<!-- end #tools --></div>

<!-- end .content --></div>

<div id="globalNavigation">

<ul>
<li><a href="../prospective/index.html"><img src="../images/common/prospectiveE_n.gif" alt="For Prospective Students" /></a></li><!--
--><li><a href="../student/index.html"><img src="../images/common/studentE_n.gif" alt="For Current Students" /></a></li><!--
--><li><a href="../alumni/index.html"><img src="../images/common/alumniE_n.gif" alt="For Alumni" /></a></li><!--
--><li><a href="../business/index.html"><img src="../images/common/businessE_n.gif" alt="For the General Public and Businesses" /></a></li>
</ul>

<ul>
<li><a href="../index.html"><img src="../images/common/homeE_n.gif" alt="Home" /></a></li><!--
--><li><a href="../greeting/index.html"><img src="../images/common/greetingE_n.gif" alt="Dean's Message" /></a></li><!--
--><li><a href="../outline/index.html"><img src="../images/common/outlineE_n.gif" alt="Overview" /></a></li><!--
--><li><a href="../research/index.html"><img src="../images/common/researchE_n.gif" alt="Education" /></a></li><!--
--><li><a href="../intro/index.html"><img src="../images/common/introE_n.gif" alt="Laboratories" /></a></li>
</ul>

<!-- end #globalNavigation --></div>

<!-- end #header --></div>

<div id="contents">

<p id="topicPath">
<a href="../index.html">Home</a> &gt; Overview
</p>

<div id="section1">
<div class="skipNavigation">
<p>
The main body starts here.
</p>
<!-- end .skipNavigation --></div>

<h1>Overview</h1>

<p class="styletest">
The Graduate School of Fisheries Science and Environmental Studies was established in April 2011 through a reorganization of the Graduate School of Science and Technology, based on the Faculty of Fisheries and the Faculty of Environmental Studies. The fundamental principle of the new Graduate School is: "To cultivate both advanced specialists with practical leadership skills and internationally competent researchers, who can address and provide solutions to environmental and food-security issues, by promoting education and research in interdisciplinary and comprehensive academic fields of fisheries science and environmental studies". </p>
<div id="carouselExampleIndicators1" class="carousel slide" data-ride="carousel" style="background-color: grey">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators1" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"> <img class="d-block mx-auto" src="file:///C|/Users/seiko/AppData/Roaming/Adobe/Dreamweaver 2021/ja_JP/Configuration/Temp/Assets/eamDADE.tmp/images/Carousel_Placeholder.png" alt="First slide" />
<div class="carousel-caption">
<h5>First slide Heading</h5>
<p>First slide Caption</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="file:///C|/Users/seiko/AppData/Roaming/Adobe/Dreamweaver 2021/ja_JP/Configuration/Temp/Assets/eamDADE.tmp/images/Carousel_Placeholder.png" alt="Second slide" />
<div class="carousel-caption">
<h5>Second slide Heading</h5>
<p>Second slide Caption</p>
</div>
</div>
<div class="carousel-item"> <img class="d-block mx-auto" src="file:///C|/Users/seiko/AppData/Roaming/Adobe/Dreamweaver 2021/ja_JP/Configuration/Temp/Assets/eamDADE.tmp/images/Carousel_Placeholder.png" alt="Third slide" />
<div class="carousel-caption">
<h5>Third slide Heading</h5>
<p>Third slide Caption</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators1" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators1" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
<img src="../images/test.JPG" width="630" height="350" alt=""/><img src="../images/map.JPG" width="600" height="600" alt=""/>

<!-- end #section1 --></div>

<div id="section2">

<div id="localNavigation">
<dl>
<dt>Overview</dt>
<dd>
<ul>
<li><a href="philosophy.html" class="off">Departmental Philosophy</a></li>
<li><a href="organization.html" class="off">Organization</a></li>
<li><a href="organization.html" class="off">History</a></li>
</ul>
</dd>
</dl>
<!-- end #localNavigation --></div>

<!-- end #section2 --></div>


<!-- end #contents --></div>

<div id="footer">

<p class="pageTop">
<a href="#container">To the top of this page.</a>
</p>

<div class="globalNavigation">
<p>
| <a href="../index.html">Home</a><!--
--> | <a href="../greeting/index.html">Dean's Message</a><!--
--> | <a href="../outline/index.html">Overview</a><!--
--> | <a href="../research/index.html">Education</a><!--
--> | <a href="../intro/index.html">Laboratories</a>|
</p>
<!-- end .globalNavigation --></div>

<div id="copyright">
<p>
Graduate School of Fisheries Science and Environmental Studies, Nagasaki University 1-14 Bunkyo-machi, Nagasaki 852-8521, Japan<br />
Copyright&copy; Nagasaki University, All Rights Reserved.
</p>
<!-- end #copyright --></div>

<!-- end #footer --></div>

<!-- end #container --></div>
<script src="file:///C|/Users/seiko/AppData/Roaming/Adobe/Dreamweaver 2021/ja_JP/Configuration/Temp/Assets/eamDADE.tmp/js/popper.min.js" type="text/javascript"></script>
<script src="file:///C|/Users/seiko/AppData/Roaming/Adobe/Dreamweaver 2021/ja_JP/Configuration/Temp/Assets/eamDADE.tmp/js/bootstrap-4.4.1.js" type="text/javascript"></script>
</body>
</html>

This topic has been closed for replies.

1 reply

Inspiring
January 22, 2021

コード内に数カ所 file:///C|/Users/seiko/ で始まるパスが記述されていますが、これはごご自身のPC内でDreamweaverが設定している仮のファイルパスですので、サイトにアップロードすると動作しなくなります。Dreamweaverで設定しているローカルルートフォルダの中にリンクしているファイルが保存されていないことがまず原因として考えられます。

 

Bootstrapのカルーセルを挿入した際にDreamweaverがファイルの保存先を確認するダイアログが出たと思うのですが、その際に編集しているファイルと同じローカルルートフォルダの中に保存先を選択するようにしてみてください。

 

Dreamweaverでサイトを編集する際に必要になる「ローカルルートフォルダ」の詳細については、以下のサイトの解説を参照してみてください。
ローカルバージョンのサイトの設定

 

また、複数のJSファイルが複雑に入り組んでいますので、JSどうしで衝突が起こっているのかもしれません。いったんそれらをすべてコメントアウトして、少しずつコメントを解除しながら実際にブラウザでプレビューを行い、どの部分が原因になっているか原因を探す必要があると思います。

 

TeahouseAuthor
Known Participant
January 22, 2021

返信をありがとうございます。私はDreamweaverもホームページの作成も全く初めてで、色々よく分かりません。

ご教示の通り、Dreamweaverでローカルフォルダを指定しましたが、やはりカルーセルはできませんでした。また、JIS ファイルを全てコメントアウトしましたが、特に何もページの体裁は変わらず、カルーセルの問題も解決しませんでした。縦長に出てくるカルーセルを添付します。

 

カルーセルを挿入した際にDreamweaver がファイルの保存先を確認するダイアログが出るということですが、私の場合は、そのようなダイアログは出ませんで、代わりに「・・・新しいBoostrap CSS/JS ファイルが作成され、ドキュメントに関連づけられます。続行しますか?」(添付イメージ)というメッセージが出ます。

 

何かやり残した手順があるのでしょうか。もう一度アドバイスをください。よろしくお願いいたします。

 

Inspiring
January 23, 2021

カルーセルが動作しない色々な要因が考えられるので、まずは問題の切り分けのためにコードブロックを動作しないファイルと同じ階層にある新規HTMLファイルにコピーして確認すると良いかと思います。

カルーセルの肝になっているのは、ヘッダ領域にある

<script src="js/jquery-3.4.1.min.js"></script>
<link href="css/bootstrap-4.4.1.css" rel="stylesheet" type="text/css" />

コード末にある

<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.4.1.js"></script>

 

そして、Dreamweaverが記述する id=carouselExampleIndicators1 のdiv タグのコードブロックです。

 

これが新規作成したHTMLファイル上で正常に動作するかどうか確認してみてください。

これで問題ないようであれば、動作しないファイル上に確認したdivタグのコードブロックをコピーします。まずは他のHTMLタグの影響を避けるために、開始body タグの直後や、<!-- end #container --></div>の直後が良いと思います。

 

ここで表示に問題があるようなら、他のscriptタグをコメントアウトしたり順番を入れ替えるなどして原因を絞っていけるかと思います。

 

問題が解決したら、先ほどコピーしたdivタグのコードブロックを希望する表示位置に移動させます。ここでまた表示が崩れないかどうか確認してください。

 

いずれにしてもコードのブロック構造を壊してしまわないように注意することが必要です。Dreamweaverのコードビューは、コードの端の三角マークをクリックするとコードブロック単位で閉じたり開いたりできますので、それを活用すると良いと思います。

 

慣れない内は大変かと思いますが、頑張ってみてください。