ALICE+サポート タグ・デザイン掲示板 TOPページ タグ・デザイン掲示板 テンプレート通りの形にならない タグ・デザイン掲示板 『テンプレート通りの形にならない』へのコメント投稿 記事 6 へのレス:>>5 分かりやすいご説明ありがとうございます、、!! こちらはトップページで使用しています。 今気付いたのですが、このCSSをトップページHEAD間ではなく共通HEAD間編集で保存していました。なにか違いがありますかね……? HTMLを下に記載しておきます。 フッターの欄にテンプレートサイトさんのURLとお名前がありましたので一応伏せさせて頂きますね。 ────────────── <div class="pageWrap"> <!-- モバイル用メニュートリガー --> <div id="navTrigger" class="navTrigger mobile"></div> <!-- ナビゲーション --> <div id="mainNavWrap" class="mainNavWrap"> <nav id="mainNav" class="mainNav"> <div class="navInfo"> <h1>サイト名</h1> <div class="url">https://yoursiteurl.jp/</div> </div> <ul> <li><a href="#link_info">information</a></li> <li><a href="#link_contents">contents</a></li> <li><a href="#link_mail">mailform</a></li> </ul> </nav> </div> <!-- /ナビゲーション --> <!-- ヘッダー --> <header id="mainHeader" class="mainHeader"> <div class="headerBox"> <div class="siteTitle">yoursite<br>name</div> <div class="siteInfo">unofficial <span>xxx</span> site.</div> </div> </header> <!-- /ヘッダー --> <!-- メイン部分 --> <div class="contentsWrap"> <section id="link_info" class="box"> <h2>information</h2> <p>ここは何々を取り扱う何々サイトです。</p> </section> <section class="box"> <h2>sample(h2)</h2> <h3><span>heading3</span></h3> <h3><span>見出し3</span></h3> <h4>heading4</h4> <p><a href="">リンク</a>と<em>強調</em>と<strong>もっと強調</strong></p> </section> <!-- 小説部分 --> <section id="link_contents" class="box novel"> <h2>main contents</h2> <p>最新→下線付き</p> <h3><span>name change</span></h3> <!-- 名前変換フォーム(ダミー) --> <form class="nameChange space"> <input type="text" placeholder="名字" class="enter"><input type="text" placeholder="名前" class="enter"><input type="submit" value="input" class="button"> </form> <!-- /名前変換フォーム(ダミー) --> <h3><span>long1</span></h3> <!-- 長編リスト(画像なし) --> <ul class="longList space"> <li><a href="">タイトル</a> <div class="longInfo">あらすじあらすじ全何話</div> </li> <li><a href="">タイトル</a> <div class="longInfo">あらすじあらすじ</div> </li> <li><a href="">タイトル</a> <div class="longInfo">あらすじあらすじ</div> </li> </ul> <!-- /長編リスト(画像なし) --> <h3><span>long2</span></h3> <!-- 長編リスト(画像あり) --> <ul class="longList2 space"> <li> <a href=""> <div class="longImage"><img src="画像URL" alt="image"></div> タイトル <div class="longInfo">あらすじあらすじ全何話</div> </a> </li> <li> <a href=""> <div class="longImage long_2 light"><img src="画像URL" alt="image"></div> タイトル <div class="longInfo">色が薄い画像のときはclass="light"で枠線の色が変わります。</div> </a> </li> <li class="new"> <a href=""> <div class="longImage"><img src="画像URL" alt="image"></div> タイトル <div class="longInfo">あらすじあらすじ</div> </a> </li> </ul> <!-- /長編リスト(画像あり) --> <h3><span>short</span></h3> <!-- 短編リスト --> <ul class="shortList space"> <li><a href="">リンクサンプル</a><span>既読</span></li> <li><a href="URL">リンクサンプル</a><span>未読</span></li> <li class="new"><a href="">タイトル</a><span>注意</span></li> <li><span class="left">注意(左)</span><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> </ul> <!-- /短編リスト --> </section> <section id="link_mail" class="box"> <h2>mainform</h2> <p>なにかありましたらどうぞ!</p> <!-- メールフォーム(ダミー) --> <form class="mailForm space"> <input type="text" placeholder="お名前" class="enter"><br> <textarea cols="30" rows="3" placeholder="メッセージを入力してください。" class="enter"></textarea><br> <input type="submit" value="送信" class="button"><input type="reset" value="消去" class="button"> </form> <!-- /メールフォーム(ダミー) --> </section> </div> <!-- /contentsWrap --> <!-- フッター(削除OK※デフォルト非表示) --> <footer class="mainFooter"> designed by <a href="https://○○○○.jp" rel="noopener">○○</a> </footer> </div> <!-- /pageWrap --> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function(){ //ハンバーガーメニュー var wrap = $('#mainNavWrap'); $('#navTrigger').on('click', function(){ wrap.toggleClass('view'); }) wrap.on('click', function(){ $(this).removeClass('view'); }) //ページ内スクロール $('a[href^="#"]').on('click', function(){ var target = $($(this).attr('href')); var point = target.offset().top - 40; $('html, body').animate({scrollTop : point}, 900) wrap.removeClass('view') return(false) }) }) </script> ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>6 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート