ソースコード

about

ミントブルーの一体型ページです。ソースまでスクロール

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

コード

メインカラーの#cdedeeはカスタムプロパティで指定しています。※リンク色やヘッダー装飾の内側のボーダーは手打ちなのでご注意ください。

メニューのバナーは全頁同じのものをCSSで設定しています。ページごとに変更したい場合などはclass="mainImage"内に直接画像を貼り付けてもOKです。（その際はCSSの.mainImageの::beforeを削除してください）

jQuery

テキストボックス用の配布コードはhead内にscriptタグを記述しています。（CSS→jQueryの順だとログページの追記の中身が一瞬見えてしまうため）
追記を使わない場合は</body>の直前に置くと読み込みが若干早くなります。

表示

class="borderFrame"で上下に装飾が付きます。※余白や幅は適宜調整してください。

PC

class="columns-2"を追加すれば２カラム表示になります。
class="no-brake"で囲んだ要素は途中で改行されなくなります。※FireFox非対応

mobile

class="mobileHidden"でモバイル版のみ非表示にできます。（ログページ、配布ページのヘッダーに使用しています）

配布コード修正のお知らせ（5/23）

配布中のコードにミスがありましたので訂正いたします。ログページの追記の開閉リンクに使用していたidは、classの誤りでした。（idを使用してしまうと、同ページに複数の追記記事がある際に、一つ目の記事しか開閉しなくなります）
本日以前にお持ち帰りの方は、大変お手数ですが以下の二か所を修正してご利用くださいませ。（このページの配布コードはすべて正しいものに変更しております）
ご迷惑をお掛けして申し訳ありません。

jQuery(head)

$('#click').on(～
↓
$('.click').on(～

html(body(log))

source & image

source

PC

zipファイルをダウンロード（05/23訂正版）
内容ファイル：以下のものすべて＋リセットCSS

head

$('.tsuikiText').addClass('hidden');
    $('.click').on('click', function(){
        $(this).parent().toggleClass('active');
    })
});
</script>

/* リセットCSS */
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:bolder}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

/* 基本設定 */
:root {
    --mainColor: #cdedee;
}
html {
    background: transparent;
    font-size: 62.5%;
}
body {
    min-height: 100vh;
    color: #253333;
    font-size: 1.3rem;
    font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
    letter-spacing: 0.2em;
    line-height: 1.8;
}
a {
    text-decoration: none;
}

/* フォント指定まとめて */
h2,
h3,
h4,
.time,
.tsuiki,
.mainNav,
.backTop {
    font-family: 'Montserrat', sans-serif;
    font-weight: normal;
}

h2 {
    display: flex;
     flex-direction: column;
     align-items: center;
    margin: 0 0 40px;
    font-size: 1.2em;
    text-align: center;
    text-transform: uppercase;
}
h2::before {
    content: '';
    display: block;
    width: 100px;
    height: 6px;
    margin-bottom: 15px;
    border-top: var(--mainColor) solid 6px;
    box-sizing: border-box;
}
h3 {
    margin: 20px 0 10px;
}
h3 > span {
    display: inline-block;
    padding: 2px 10px;
    background: #faf9f6;
}
h4 {
    margin: 10px 5px 8px;
    color: #756f63;
}
em {
    text-decoration: underline;
}
strong {
    font-weight: bolder;
    background: var(--mainColor);
}
ul,
ol {
    list-style: none;
}

/* フォーム関連 */
input[type],
textarea {
    background: #fff;
    border: #777 solid 1px;
    border-radius: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 90%;
    letter-spacing: .1em;
}
.mailForm .enter {
    padding: 2px;
    margin-bottom: 3px;
    width: 80%;
}
.mailForm .button {
    padding: 2px 5px;
}

.nameChange {
    padding-bottom: 2em;
}
.nameChange .enter {
    width: 10em;
}

/* 段落、余白 */
p {
    padding: 0 1em;
}
.box {
    margin: 15vh 0 25vh;
}
.box:last-of-type {
    margin-bottom: 10vh;
}
.space {
    margin: 1em;
}
.mainWrap {
    padding: 10px 0;
    margin: 5vh auto 10vh 35%;
    width: 55%;
     max-width: 900px;
}
.mainWrap a {
    color: #109196;
    transition: .1s;
}
a:hover {
    opacity: .6;
}

/* カラム指定 */
.columns-2 {
    columns: 2;
    column-gap: 30px;
}
.no-brake {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* ボーダー装飾 */
.borderFrame::before,
.borderFrame::after {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    margin: 30px auto;
}
.borderFrame::before {
    border-top: var(--mainColor) solid 10px;
    border-bottom: #d9f2f2 solid 3px;  
}
.borderFrame::after {
    border-top: #d9f2f2 solid 3px;
    border-bottom: var(--mainColor) solid 10px;
}

/* スラッシュ付きリスト */
.slashList {
    display: flex;
     flex-wrap: wrap;
}
.slashList li::before {
    content: '/';
    display: inline-block;
    margin: 0 7px;
    color: #777;
}
.slashList li:first-of-type::before {
    content: none;
}

/* ログページ */
.logWrap {
    display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto;
     gap: 30px 50px;
}
.logWrap h2 {
    grid-column: 1 / 3;
}
.logWrap h4 {
    margin: 0 5px;
    text-align: center;
}
.logWrap h4::after {
    content: '';
    display: block;
    width: 1.5rem;
    height: 3px;
    margin: 3px auto;
    border-top: var(--mainColor) solid 3px;
    border-bottom: var(--mainColor) solid 3px;
}
.logWrap article {
    padding: 20px 10px 10px;
    box-sizing: border-box;
}
.time {
    margin: 5px 0 5px;
    font-size: 1rem;
    text-align: center;
}
.logText {
    padding: 15px 10px 20px;
    margin-top: 10px;
    background: #faf9f6;
}
.tsuiki {
    margin: 5px 0;
    text-align: center;
}
.tsuiki a {
    cursor: pointer;
}

/* 追記開閉 */
.hidden {
    display: none;
}
.active + .hidden {
    display: block;
}

/* ログページナビゲーション */
.logNav ul {
    display: flex;
     justify-content: center;
     gap: 0 20px;
}

/* メインコンテンツ */
.contentsList a:visited {
    color: #7ecbd2;
}
.contentsList ul {
    margin-bottom: 2em;
}
.contentsList li {
    margin: 5px 0;
}
.caution::after {
    content: '*';
    color: #e26060;
}
.long {
    padding-bottom: .5em;
}
.long > img {
    width: 200px;
    height: 40px;
    object-fit: cover;
    object-position: center;
}
.long > span {
    color: #555555;
    font-size: 1rem;
}

/* 本文ページ */
.textWrap {
    width: 600px;
    padding: 30px;
    margin: 3vh auto;
    font-size: 1.5rem;
    letter-spacing: .1em;
    line-height: 200%;
}
.textWrap::before,
.textWrap::after {
    width: 100%;
    margin: 50px 0;
}
.textWrap h2::before {
    content: none;
}
.textWrap p {
    text-indent: 1em;
}
.atogaki {
    padding: 20px;
    margin-top: 30px;
    font-size: 1.2rem;
    text-align: center;
}

/* メインヘッダー */
.mainHeader {
    display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
    position: fixed;
     top: 0;
     left: 0;
    width: 25%;
     min-width: 350px;
    height: 100vh;
    padding: 10vh 0 10vh 60px;
    box-sizing: border-box;
    text-align: center;
}
.mainHeader::before,
.mainHeader::after {
    width: 90%;
}
.mainHeader::before {
    margin: 0 0 auto;
}
.mainHeader::after {
    margin: auto 0 0;
}

.siteName {
    display: inline-block;
    padding: 0 10px;
    margin-bottom: 15px;
    font-size: 1.5em;
    font-weight: normal;
}

/* ナビゲーション */
.mainNav {
    width: 95%;
}
.mainNav li {
    margin: 5px 0;
}
.mainNav li a {
    font-size: 1.1em;
    color: #555;
    transition: .2s;
}
.url {
    font-size: 1rem;
}
.mainImage {
    display: block;
    width: 200px;
    height: 40px;
    margin: 30px 0;
    background: #ccc;
}
.mainImage > img {
    width: 100%;
}
.mainImage::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url('メインバナーURL') center / contain no-repeat var(--mainColor);
}

/* トップに戻るリンク */
.backTop {
    position: relative;
    text-align: right;
}
.backTop a {
    display: inline-block;
    position: fixed;
     bottom: 5vh;
    width: 45px;
    height: 45px;
    background: var(--mainColor);
    color: #253333;
    font-size: 1rem;
    line-height: 45px;
    text-align: center;
}

/* フッター（削除OK※デフォルト非表示） */
.mainFooter {
    display: none;
    margin: 15vh 0 0;
    color: #666;
    font-size: 1rem;
    text-align: center;
    opacity: .4;
}
.mainFooter a {
    color: #89b8cd;
}

/* レスポンシブ調整用 */
@media (max-width:1100px) {
    .box {
        margin: 50px 0 100px;
    }
    .columns-2 {
        columns: unset;
    }
    .mainWrap {
        min-width: 500px;
        margin: 0 auto 50px;
    }
    .logWrap {
        display: block;
    }
    .logWrap article {
        margin: 20px 0;
    }
    .textWrap {
        width: 90%;
         max-width: 500px;
        padding: 0;
        box-sizing: border-box;
        font-size: 1.3rem;
    }
    .mainHeader {
        position: static;
        width: 90%;
         max-width: 500px;
         min-width: 200px;
        height: auto;
        padding: 0;
        margin: 30px auto;
    }
    .mainHeader::before,
    .mainHeader::after {
        height: 6px;
        margin: 40px 0;
    }
    .mainNav ul {
        display: flex;
         flex-wrap: wrap;
         justify-content: center;
    }
    .mainNav li {
        margin: 0 5px;
    }
    .mainNav li a {
        font-size: 1em;
    }
    .point {
        margin: 20px 0;
    }
    .backTop a {
        bottom: 10px;
        right: 10px;
    }
    .mainFooter {
        margin-top: 30px;
    }
    .mobileHidden {
        display: none;
    }
}

@media (max-width:900px) {
    body {
        font-size: 1.2rem;
    }
    h2 {
        margin-bottom: 20px;
    }
    h2::before {
        margin-bottom: 10px;
    }
    .nameChange .enter {
        width: 8em;
    }
    .mainWrap {
        width: 90%;
         max-width: 500px;
         min-width: 150px;
    }
    .backTop a {
        transform: scale(.8);
    }
}
</style>

body(index)

<a id="link_top"></a>

<header class="mainHeader borderFrame">

<nav class="mainNav">
    <h1 class="siteName">サイト名</h1>
    <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>
</nav>

<div class="mainImage"></div>

<div class="url">https://yoursite.url/</div>
</header>

<div class="mainWrap">

<section id="link_info" class="box">
<h2>information</h2>

<section class="columns-2">
    <h3><span>about</span></h3>
    <p>ここは○○を取り扱う○○サイトです。<em>○○な要素</em>が含まれますので○○が苦手な方の閲覧はご遠慮ください。</p>
    <h4>url</h4>
    <p>https://yoursite.url/<br>
    （アン）リンクフリーです。</p>
    <h4>banner</h4>
    <p><img src="バナーURL" alt="banner" width="200px"></p>
    <h4>管理人</h4>
    <p>誰々（だれだれ）<br>
    ○○と××が好きです。</p>

<div class="no-brake">
    <h3><span>contact</span></h3>
    <p>ご連絡は以下のメールフォームまでお願いします。お返事は<a href="">ログページ</a>で行います。</p>
    
    <form class="mailForm space">
    <input type="text" placeholder="お名前" class="enter">
    <textarea cols="10" rows="3" placeholder="本文を入力してください。" class="enter"></textarea><br>
    <input type="submit" value="send" class="button">
    </form>
    
    </div>

<h3><span>bookmark</span></h3>
    <ul class="slashList space">
    <li><a href="">aaa</a></li>
    <li><a href="">bbbbbbb</a></li>
    <li><a href="">cc</a></li>
    <li><a href="">dddd</a></li>
    <li><a href="">eee</a></li>
    <li><a href="">fffff</a></li>
    </ul>
</section>

</section>

<section class="box">
<h2>sample(h2)</h2>
<h3><span>heading3</span></h3>
<h4>heading4</h4>
<p><a href="">リンク</a>と<em>強調</em>と<strong>もっと強調</strong></p>
</section>

<section id="link_contents" class="box">
    <h2>main contents</h2>

<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>

<section class="contentsList">
    <p><span class="caution">このマーク</span>はちょっと注意</p>

<h3><span>category1</span></h3>
    <ul class="columns-2 space">
        <li class="long">
            <img src="長編バナーURL" alt="banner"><br>
            <a href="">タイトル</a><br>
            <span>あらすじあらすじ（連載中）</span>
        </li>
        <li class="long">
            <img src="長編バナーURL" alt="banner"><br>
            <a href="">タイトル</a><br>
            <span>あらすじあらすじ（全何話）</span>
        </li>
        <li><a href="URL">未読リンクサンプル</a></li>
        <li class="caution"><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>
        <li><a href="">タイトル</a></li>
        <li><a href="">タイトル</a></li>
    </ul>

<h3><span>category2</span></h3>
    <ul class="columns-2 space">
        <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>

<h3><span>category3</span></h3>
    <ul class="columns-2 space">
        <li><a href="">タイトル</a></li>
        <li><a href="">タイトル</a></li>
        <li><a href="">タイトル</a></li>
        <li><a href="">タイトル</a></li>
    </ul>

</section>
</section>

<nav class="backTop">
<a href="#link_top">top</a>
</nav>

<footer class="mainFooter">
designed by <a href="https://ragusnon.wwww.jp" rel="noopener">無糖</a>
</footer>

</div>

body(log)

<a id="link_top"></a>

<header class="mainHeader borderFrame mobileHidden">

<nav class="mainNav">
    <h1 class="siteName">サイト名</h1>
    <ul>
    <li><a href="URL">information</a></li>
    <li><a href="URL">contents</a></li>
    <li><a href="URL">update log</a></li>
    </ul>
</nav>

<div class="mainImage"></div>

<div class="url">https://yoursite.url/</div>
</header>

<div class="mainWrap">

<section id="link_info" class="box logWrap">
<h2>update log</h2>

<article>
<h4>タイトル</h4>
<div class="logText">
    <div class="time">00/00/00</div>
    <p>○○を更新しました。</p>

<div class="tsuiki"><a class="click">more</a></div>
    
    <div class="tsuikiText">
        <p>追記追記追記追記</p>
    </div>

</div>
</article>

<article>
<h4>タイトル</h4>
<div class="logText">
    <div class="time">00/00/00</div>
    <p>追記無し</p>
</div>
</article>

</section>

<nav class="logNav">
    <ul>
    <li><a href="">prev</a></li>
    <li><a href="">next</a></li>
    </ul>
</nav>

<nav class="backTop">
<a href="#link_top">top</a>
</nav>

</div>

body(text)

image

favicon

icon

banner

すべて幅500px

banner
banner
banner