ソースコード

information

葉っぱの画像のセットです。ソースまでスクロール

PCから見るとこんな感じです。

header

サイト名の文字数によりunofficial～がずれてしまう場合は、CSSの.navSiteInfoのtop: 45%;の値を変更して調整してください。

mobile

モバイル版のヘッダーの背景は、css下部の/* レスポンシブ調整用 */の中でも指定しています。編集漏れにご注意ください。

ヘッダーのクラス指定は、ハンバーガーメニューの関係でそれぞれインデックス→indexHeader、子ページ→pageHeaderになっています。

H
heading2

h2要素をclass="h2-count"で囲むと数字がカウントされます。途中で任意の文字を表示させたい場合は、
htmlを<h2 class="h2-plain"><div>H</div>heading2</h2>のように変更してください。

source & image

source

PC

zipファイルをダウングレード
内容ファイル：以下のものすべて（矢じり画像はsvg版）＋リセットCSS

head

body(index)

<a id="link_top"></a>  <header id="mainHeader" class="mainHeader indexHeader"> <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="#link_info">information</a></li> <li><a href="#link_contents">contents</a></li> <li><a href="URL">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 h2-count"> <main class="mainWrap"> <section id="link_info" class="box"> <h2>information</h2> <h3><span>about</span></h3> <p>ここは○○を取り扱う××サイトです。○○な内容が登場するので苦手な方はご注意ください。</p> <h3><span>contact</span></h3> <form class="nameChangeForm space"> <input type="text" placeholder="名字" class="form"> <input type="text" placeholder="名前" class="form"> <input type="submit" value="input" class="button"> </form> </section> <section class="box"> <h2>heading2</h2> <h2 class="h2-plain"><div>H</div>heading2</h2> <h3><span>heading3</span></h3> <h4><span>heading4</span></h4> <p><a href="">リンク</a>と<em>強調</em>と<strong>もっと強調</strong></p> </section> <section id="link_contents" class="box mainContents"> <h2>main contents</h2> <h3><span>namechange</span></h3> <form class="nameChangeForm space"> <input type="text" placeholder="名字" class="form"> <input type="text" placeholder="名前" class="form"> <input type="submit" value="input" class="button"> </form> <h3><span>category1</span></h3> <h4><span>long</span></h4> <ul class="contentsList longList"> <li class="longInfo">誰々が何々する話　全９話（00/00/00-00/00/00）</li> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> </ul> <h4><span>short</span></h4> <ul class="contentsList shortList"> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> </ul> <h3><span>category2</span></h3> <h4><span>short</span></h4> <ul class="contentsList shortList"> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> <li><a href="">タイトル</a></li> </ul> </section> </main>  <div id="backTop" class="backTop"> <a href="#link_top">top</a> </div>  <footer class="mainFooter"> designed by <a href="https://ragusnon.wwww.jp" rel="noopener">無糖</a> </footer> </div>  <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'); }) }) </script>

body(log)

<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">information</a></li> <li><a href="URL#link_contents">contents</a></li> <li><a href="URL">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>  <div id="backTop" class="backTop"> <a href="#link_top">top</a> </div> </div>  <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>

image

メイン画像

加工元画像（Unsplash）