<a id="link_top"></a>
<!-- トップに戻る用アンカー -->

<!-- ヘッダー -->
<header id="mainHeader" class="mainHeader">
<div class="siteInfo">

<div class="siteNameFrame">
    <div class="siteName">YourSiteName</div>
</div>

<span class="bg">これこれこういった非公式○○サイト</span><br>
<span class="bg">最終更新：00/00/00</span>

</div>

<!-- ナビゲーション -->
<nav id="mainNav" class="mainNav mainNavOrigin">
<ul class="navUpper">
<li><a href="#link_info">information</a></li>
<li><a href="#link_main">main contents</a></li>
<li><a href="#link_contact">contact</a></li>
</ul>

<div class="navLower">
<h1>サイト名</h1><span>https://yoursite.no.url/</span>
</div>

</nav>
<!-- /ナビゲーション -->

<!-- ナビゲーション（複製） -->
<nav id="mainNavClone" class="mainNav mainNavClone">
    <!-- ここにナビゲーションの<ul>〜</ul>が複製されます。 -->
</nav>
<!-- /ナビゲーション（複製） -->

<!-- トップに戻るリンク -->
<div class="backTop">
<a href="#link_top">↑top</a>
</div>
<!-- /トップに戻るリンク -->

</header>
<!-- /ヘッダー -->


<div class="pageWrap">
<!-- メインコンテンツ -->
<main>

<section id="link_info" class="box">
<h2><span>information</span></h2>
<h3><span>about</span></h3>
<p>ここは何々を取り扱う何々サイトです。何々な表現が多く含まれますので、苦手な方はご注意ください。</p>
</section>

<section class="box">
<h2><span>heading leevel2</span></h2>
<h3><span>heading3</span></h3>
<h4><span>heading4</span></h4>
<p><a href="">リンク</a>と<em>強調</em>と<strong>もっと強調</strong></p>
</section>

<section id="link_main" class="box">
<h2><span>main contents</span></h2>
<h3><span>serial</span></h3>

<!-- 長編リスト -->
<ul class="longList space">
<li class="new">
    <a href=""><span>タイトル</span><img src="画像URL" alt="image"></a>
    <div class="longInfo">あらすじ・連載中</div>
</li>
<li class="no_image">
    <a href=""><span>タイトル</span></a>
    <div class="longInfo">画像なし</div>
</li>
<li>
    <a href=""><span>タイトル</span><img src="画像URL" alt="image"></a>
    <div class="longInfo">あらすじ・全何話</div>
</li>
<li>
    <a href=""><span>タイトル</span><img src="画像URL" alt="image"></a>
    <div class="longInfo">あらすじ・全何話</div>
</li>
</ul>
<!-- /長編リスト -->

<h3><span>short</span></h3>
<!-- 名前変換フォーム（ダミー） -->
<form class="nameChange space">
<input type="text" placeholder="名字" class="form"><input type="text" placeholder="名前" class="form"><input type="submit" value="送信" class="button">
</form>
<!-- /名前変換フォーム（ダミー） -->

<!-- 短編リスト -->
<ul class="shortList space">
<li class="new"><a href="">タイトル</a><span>誰々</span></li>
<li class="new"><a href="">タイトル</a></li>
<li><a href="">タイトル</a><span>誰々</span></li>
<li><a href="">タイトル</a></li>
<li><span class="left">誰々</span><a href="">タイトル</a></li>
<li><a href="">タイトル</a></li>
<li><a href="">タイトル</a></li>
<li><a href="">タイトル</a></li>
</ul>
<!-- /短編リスト -->
</section>


<section id="link_contact" class="box">
<h2><span>contact</span></h2>
<p>何かありましたら以下のメールフォームかxxxxxxx@xxxx.ne.jpまでどうぞ。</p>
<!-- メールフォーム（ダミー） -->
<form class="mailForm space">
<input type="text" placeholder="お名前" class="form">
<textarea cols="10" rows="2" placeholder="メッセージを入力してください。" class="form"></textarea>
<input type="submit" value="送信" class="button"><input type="reset" value="消去" class="button">
</form>
<!-- /メールフォーム（ダミー） -->
</section>
</main>
<!-- /メインコンテンツ -->

<!-- フッター（削除OK※デフォルト非表示） -->
<footer class="mainFooter">
designed by <a href="https://ragusnon.wwww.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(){

//ページ内スクロール
$('a[href^="#link_"]').on('click', function(){

    var href = $(this).attr('href');
    var scrollTo = $(href).offset().top - 45;
    
    $('html, body').animate({scrollTop : scrollTo}, 900)
    return false;
})


//ナビゲーションの複製
$('#mainNav > ul').clone(true).appendTo('#mainNavClone');

//ナビゲーション変化
$(window).on('scroll', function(){
    var header = $('#mainHeader');

    var scroll = $(this).scrollTop();
    var point = $('#mainNav').outerHeight() / 2;

    if(scroll >= point) {
        header.addClass('change');
    } else {
        header.removeClass('change');
    }
})

})
</script>
