<!-- ↓トップに戻る用アンカー -->
<a id="link_top"></a>

<!-- ヘッダー -->
<header id="mainHeader" class="mainHeader pageHeader click">
<div class="mainNavInfo">
    <div class="navSiteName">your<br>site<br>name</div>
    <div class="navSiteInfo">unofficial xxx site.</div>
</div>

<nav id="mainNav" class="mainNav">
<ul>
    <li><a href="URL?cid=imson_po&cid=imson_po">information</a></li>
    <li><a href="URL?cid=imson_po&cid=imson_po#link_contents">contents</a></li>
    <li><a href="URL?cid=imson_po&cid=imson_po">update log</a></li>
</ul>
<div class="siteName mainImage">
    <h1 class="">サイト名</h1>
    <div class="url">https://yoursite.no.url/</div>
</div>
</nav>
</header>
<!-- /ヘッダー -->

<div class="pageWrap">
<main class="logWrap">
<h2><div>2023</div></h2>
<dl class="logList space">

<!-- ↓追記なし -->
<dd>00/00</dd>
<dt>何々を更新しました。</dt>

<!-- ↓追記あり -->
<dd>00/00</dd>
<dt>何々を更新しました。<a class="logOpen"></a>
    <div class="more">
        <div class="moreText">追記文章</div>
    </div>
</dt>

<dd>00/00</dd>
<dt>何々を更新しました。<a class="logOpen"></a>
    <div class="more">
        <div class="moreText">先日久しぶりに何々して楽しかったです。</div>
    </div>
</dt>

<dd>00/00</dd>
<dt>何々を更新しました。</dt>
<dd>00/00</dd>
<dt>何々を更新しました。</dt>
</dl>

<h2><div>2022</div></h2>
<dl class="logList space">
<dd>00/00</dd>
<dt>何々を更新しました。</dt>
<dd>00/00</dd>
<dt>何々を更新しました。</dt>
<dd>00/00</dd>
<dt>何々を更新しました。</dt>
</dl>
</main><!-- /logWrap -->

<!-- トップに戻るボタン -->
<div id="backTop" class="backTop">
<a href="#link_top">top</a>
</div>

</div><!-- /pageWrap -->

<!-- jQuery -->
<script>
$(function(){

    //ページ内スクロール（ナビゲーション）
    $('a[href^="#link_"]').on('click', function(){
        var target = $($(this).attr('href'));
        var point = target.offset().top - 50;
        $('html, body').animate({scrollTop : point}, 900)
        return(false);
    })

    //ページ内スクロール（トップに戻る）
    $(window).on('scroll', function(){
        var target = $('#backTop');
    
        var scroll = $(this).scrollTop();
        var point = $(this).outerHeight() / 2;
    
        if(scroll >= point) {
            target.addClass('view');
        } else {
            target.removeClass('view');
        }
    })


    //メニュー開閉
    $('.click').on('click', function(){
        $(this).toggleClass('view');
    })


    //ログ追記開閉
    $('.logOpen').on('click', function(){

        var target = $(this).next('.more');
        var $height = target.find('.moreText').outerHeight();

        if(target.hasClass('logView')) {
            target.removeClass('logView').css('height', '');
        } else {
            target.addClass('logView').css('height', $height);
        }
    })
})</script>
