タグ・デザイン掲示板

[

jQueryが反映されない
by なな

2019-10-02 22:33
パソコンでheadに以下のように書いたコードを、ナノで反映させたいです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link href="http://グーグルフォントの設定">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/jQueryの設定"></script>
<script>
$(function(){
jQueryコード
});
</script>
</head>

いつもナノの編集枠では、一つ目に<div>～</div>のbody、二つ目の編集枠に<style type="text/css">～</style>のcssを記入しています。フォントの設定など、headに書いていることはいつも二つ目の編集枠の<style type="text/css">の上に書いており、それで反映されます。しかし、jQueryが全く反映されません。どこに書けばjQueryが反映されるのでしょうか。head間編集も試してみましたが、駄目でした。

pc
[編集]

by ７７４

2019-10-02 23:43
まず、webページの基本構造は下記です。

ナノの場合、④⑦以外は自動出力される為記述不要です。
下記の要素は一つのwebページに原則一つなので、重複していると重大な不具合の原因になります。

編集,記述をしたい場合は後述する箇所で編集できるので各項正しい箇所に記述するようしてください。

▽webページの基本構造

①<doctype宣言>
②<html>
③<head>
④　ヘッダ内容(ページの設定)
⑤</head>
⑥<body>
⑦　ボディ内容(ページの表示内容)
⑧</body>
⑨</html>

▽基本構造の編集箇所

①[HEAD・HTML詳細]>[文書型宣言(<!DOCTYPE>)]
②[HEAD・HTML詳細]>[HTMLタグ(<html>)]
③編集不可
④[HEAD・HTML詳細]>[HEAD内]
⑤編集不可
⑥[HEAD・HTML詳細]>[BODYタグ(<body>)]
⑦[全体レイアウト]等、[○○レイアウト]と名称の付く項(一部例外有)
⑧編集不可
⑨編集不可

▽jqueryの記述箇所

④⑦どちらでもかまいません。ナノだと④末尾に記述している人が多い印象です。

また、<style>,<div>を同一項目の入力欄に記述しているようですが、<style>は④,<div>は⑦に記述するのがhtmlのルール上無難です。
記述したいhtmlタグを④⑦どちらに記述するかわからない場合は「『記述したいhtmlタグ名』 html 記述箇所」や「body head 違い」あたりで検索してください。

次に、デフォルトだと、⑦にあたる入力欄中の改行が出力時<br />に変換されます。
意図せず記述されるタグが原因かもしれませんので、下記箇所で設定変更をしてください。

[ホムペ設定]>[その他共通設定]>[改行を<br>に変換して表示]
→「しない」に変更

最後に、単純にタグミスの可能性もあります。
「html5 採点」なんかで検索すると見つかるwebツールを使用すると、よろしくない記述を指摘してくれるので試して見てください。
ナノの仕様上満点は取れないのと、冗長部分の指摘はしてくれませんがある程度のミスは削れると思います。

上記で解決しない場合は下記情報の提示をお願いします。

・何という名称の入力欄に記述しているのか
・URLや固有名詞のみを伏せた状態でのページソース(表示方法要検索)

pc
[編集]

by なな

2019-10-03 07:18
長文にわたるお返事ありがとうございます。試してみましたが、やはりjQueryが作動しなかったので下記を送らせていただきます。URLや固有名詞を伏せてのソースコード表示は要検索とのことでしたが、どうしても見つからなかったので自分の判断で伏せて送ります（テンプレートは自作です）。

①全体レイアウトの内容
<header>
<button type="button" class="button">
<span class="fa fa-bars" title="MENU"></span>
</button>
<ul>
<li><a href="#">info</a></li>
<li><a href="#">main</a></li>
<li><a href="#">date</a></li>
<li><a href="#">contact</a></li>
</ul>
</header>
<div class="container">
<div class="logo">
<h1>サイト名</h1>
<p><a href="#">ランク</a> <a href="#">ランク</a> <a href="#">ランク</a></p>
</div>
</div>
<style type="text/css">
@charset "UTF-8";
body{
margin:0;
}

.container{
text-align: center;
background-image: url(#画像url#);
background-size:cover;
background-position:center;
height:100vh;
align-items: center;
justify-content: center;
display:flex;
}

.logo h1{
color:#ffff00;
font-family: 'Turret Road', cursive;
font-size:15vw;
margin-top:0;
margin-bottom:10px;
font-weight: 100;
letter-spacing: 0.2em;
}

.logo a{
text-decoration:none;
font-family: 'Turret Road', cursive;
color:#ff00ff;
font-size:18px;
margin-top:0;
margin-bottom: 0;
}

header{
position: absolute;
top:0;
left:0;
z-index: 100;
width:100%;
align-items: center;
text-align: right;
opacity:0.0;
}

header ul{
margin:0;
padding:0;
list-style: none;
display:none;

}

header a{
display: block;
padding:15px;
color:#ffff00;
font-size: 12px;
text-decoration: none;
font-family: 'Turret Road', cursive;
text-align: center;
}

header a:hover{
background-color: rgba(255,255,255,0.3);
}

header .button{
margin-right: 10px;
padding:0;
border:none;
outline:none;
background:none;
font-size:30px;
cursor:pointer;
color:#ffff00;

}

/* コンテンツページ　*/

div {display: inline-block; _display: inline;}

.back{
background-image: url(img/viewer.jpg);
background-size: cover;
background-position: center;
width:100%;
display: flex;
}

.show{
background-color: rgba(255,255,255,0.5);
width:90%;
height:90%;
margin-right:auto;
margin-left:
auto;
margin-bottom: 10px;
margin-top: 10px;

padding:10px;
}

.show h1{
font-family: 'Turret Road', cursive;
font-size:20px;
color:#ffff00;
border-bottom: solid 3px #ffff00;
position: relative;
}

.show a{
text-decoration: none;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", serif;
font-size: 14px;
color:#000;
}

.show a:hover{
background-color: rgba(0,0,0,0.3);
}

</style>

②head内編集の内容
<link href=グーグルフォントURL>
<script src=フォントアウェサムURL></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$(".button").click(function(){
$("ul").slideToggle();
});
});
</script>

以上になります。jQueryのURLは、適当に検索で出てきたものを使用してしまいこれでいいのかわからなかったのであえて載せさせていただきました。問題があるようであれば削除いたします。
お手数をおかけしますが、よろしくお願いします。

pc
[編集]

by 774

2019-10-03 18:31
試してみましたが、自前環境では動作しました。
下記で解決しない場合は、ソース表示もhtml採点を試していればついでにされるはずなので試してみてください。

▼とりあえず気になった点

・headerのopacity(不透明度指定)の値が0
→header自体完全に透明に指定されています。
そもそもメニューとその開閉のトリガーになるボタン自体見えなくなっているのではないでしょうか。

・jQuery非対応環境だとメニューが一生開けない
→全環境でjQueryが動作するとも限りません。
「jQueryで表示させる要素」を予め非表示にする際はcssではなくjQueryを用いるべきです。

・広告下げまたは広告隠しの可能性
→本件関係なくて申し訳ないですが、レイアウト的に危険そうなので無料版使用の場合は修正をした方がいいです。

以上を踏まえて自分ならこうする程度ですが

▼全体レイアウト

<header>
<button type="button" class="button">
<span class="fa fa-bars" title="MENU"></span>
</button>
<ul id="nav">
<li><a href="#">info</a></li>
<li><a href="#">main</a></li>
<li><a href="#">date</a></li>
<li><a href="#">contact</a></li>
</ul>
</header>

<div class="container">
<div class="logo">
<h1>title</h1>
<p><a href="#"></a> <a href="#">ランク</a> <a href="#">ランク</a></p>
</div>
</div>

▼HEAD内

<link href="グーグルフォントURL">
<script src="フォントアウェサムURL"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style type="text/css">

@charset "UTF-8";

body {
position: relative;
margin: 0;
}

body::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
z-index: -100;
display: block;
height: 100vh;
background-image: url(#mtr数_url#);
background-size: cover;
background-position: center;
}

.container {
padding: 50vh 0 20px;
text-align: center;
}

.logo h1 {
color: #ffff00;
font-family: 'Turret Road', cursive;
font-size: 15vw;
margin: -1em 0 10px;
font-weight: 100;
letter-spacing: 0.2em;
}

.logo a {
text-decoration: none;
font-family: 'Turret Road', cursive;
color: #ff00ff;
font-size: 18px;
}

header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 100;
text-align: right;
}

header #nav {
margin: 0;
padding: 0;
list-style: none;
}

header a {
display: block;
padding:15px;
color:#ffff00;
font-size: 12px;
text-decoration: none;
font-family: 'Turret Road', cursive;
text-align: center;
}

header a:hover {
background-color: rgba(255,255,255,0.3);
}

header .button {
margin-right: 10px;
padding: 0;
border: none;
outline: none;
background-image: none;
background-color: transparent;
font-size: 30px;
cursor: pointer;
color: #ffff00;
}

</style>

<script>
$(function(){

var $nav = $('#nav');

$nav.hide();
$(".button").click(function(){
$nav.slideToggle();
});
});
</script>

pc
[編集]

by なな

2019-10-03 19:41
丁寧なお返事にコードの添削までしてくださりありがとうございます。無事解決いたしました。本当にありがとうございました。

pc
[編集]

[