elestial quartz

about this design

モバイル版の小説ページはclass="hidden"でヘッダーを非表示にしています。

class="bg"で背景画像が付きます。※ナビゲーションはデフォルトで画像背景です。

PCから見たらこんな感じ（トップページ）
PCから見たらこんな感じ（小説ページ）

小説部分

PC版のカテゴリー別表示はわくわくBank様の記事を参考にして作成しました。
Chrome、Edgeでのみ強制改段落機能が使えるので、next-columnのclassで２段落目をどのカテゴリーから始めるか自分で決められます。（その他ブラウザから見たときは反映されていないので注意）

バナー風リンクはボックスの背景をCSSで設定しています。画面幅によって横幅だけ変わるので、すでにバナーがある場合はCSSを変更した方がいいと思います。

source & image

PC

ZIPファイルをダウンロード

head

/* フォントのライセンス表記 */
/*
'Rajdhani' is licensed under the Open Font License.
https://fonts.google.com/specimen/Rajdhani
*/

/* リセット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}

/* バナー風リンク背景設定 */
a#banner1 {
    background: url('URL') center / cover no-repeat #cae7e9;
}
a#banner2 {
    background: url('URL') center / cover no-repeat #fdc0fa;
}
a#banner3 {
    background: url('URL') center 75% / cover no-repeat　#302dbb;
}

/* 共通設定 */
html {
    background: transparent;
    font-size: 62.5%;
}
body {
    min-height: 100vh;
    background: #ffffff;
    font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
    letter-spacing: 0.2em;
    line-height: 1.8;
}
a {
    text-decoration: none;
}
em {
    background: #0a4277;
    color: #ffffff;
    font-style: normal;
    font-weight: bolder;
}
ul,ol,dl {
    list-style: none;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}

/* スラッシュ付きリスト設定 */
.list-slash {
    display: flex;
    flex-wrap: wrap;
}
.list-slash li::before {
    content: '/';
    display: inline-block;
    margin: 0 1em;
    color: #67828f;
}
.list-slash li:first-of-type::before {
    content: none;
}
/* 背景設定（ボタン、ボックス） */
.bg-button {
    padding: .2em 1em;
    background: #0a4277;
    border: none;
    color: #e9ecf0;
}
.bg {
    background-image: url('背景画像①URL');
}
</style>
<style type="text/css" media="screen and (min-width:1001.000px)">
/* PC用CSS */

/* 共通設定 */
body {
    color: #293738;
    font-size: 1.3rem;
}
h2,h3,.back {
    font-family: 'Rajdhani', sans-serif;
}
h2 {
    margin: 3em 0 2em;
    font-size: 1.2em;
}
h3 {
    margin: 1em;
    color: #485257;
    font-weight: normal;
}
input,textarea,button,select {
    margin-bottom: 1em;
    border: solid .2px #cccccc;
    font-family: inherit;
    font-size: 90%;
    letter-spacing: inherit;
}
.mobile {
    display: none;
}

/* 段落設定 */
p {
    padding: 0 1em;
}
section {
    margin: 10vh 0;
}

/* ページ全般設定 */
main {
    display: block;
    padding: 5vh 0;
    margin: 0 10% 0 30%;
    width: 60%;
    min-width: 600px;
    max-width: 1200px;
    min-height: 100vh;
    background: #ffffff;
}
.wrap-page,.wrap-contents {
    margin:0 auto 5vh;
     width: 80%;
     min-width: 600px;
}
.wrap-page a {
    color: #2b71b3;
    transition: .3s;
}
.wrap-page a:hover {
    color: #788ea1;
}

/* フォーム、リストなどの機能に追加すれば余白を揃えられます */
.space {
    padding: 0 1em;
    margin: 3vh 0;
}

/* 小説部分設定 */

/* 名前変換フォーム設定 */
.nameChange {
    text-align: center;
}
.nameChange input[type="text"] {
    padding: .5em;
    margin-right: 1em;
    width: 10em;
}
.nameChange input[type="submit"] {
    padding: .5em 1em;
}

/* 小説部分ナビゲーション設定 */
.contentsNav {
    display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
.contentsNav li a {
    margin: 0 1em;
    color: #0d4071;
}

/* 小説一覧リスト設定 */
.novelList {
    margin: 5vh auto;
    width: 100%;
    box-sizing: border-box;
    columns: 2;
    column-gap: 3em;
}
.novelList ul {
    padding: 1em 0;
    width: 90%;
    min-width: 22em;
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}
.novelList li {
    margin: .5em;
}
.next-column {
    break-before: column;
    -webkit-break-before: column;
}
li.categoryName {
    margin: 0 0 2em;
    color: #727b83;
    text-align: center;
}
.novelList li a {
    color: #0d4071;
}
.novelList li a:visited {
    color: #75899c;
}
.novelList li span,.novelList li div {
    margin: 0 1em;
    color: #b9b9b9;
}
.novelList li div {
    font-size: .8em;
}

/* 更新マーク設定 */
.new::after {
    content: 'new';
    margin: 0 .5em;
    color: #678e92;
    font-size: 1rem;
    letter-spacing: 0;
}

/* バナー風リンク設定 */
.banner {
    display: flex;
     justify-content: center;
     align-items: center;
    width: 100%;
     max-width: 300px;
    height: 4em;
    background: #999999;
    text-align: center;
}
a.banner span.bannerTitle {
    padding: .2em 1em;
    background: rgba(255,255,255,.8);
    color: #444444;
}

/* 小説本文設定 */
.wrap-text {
    padding: 10vh 3%;
    margin: 0 auto;
    width: 40%;
    max-width: 1000px;
    min-width: 600px;
    background: #ffffff;
    line-height: 220%;
}
.wrap-text h4 {
    margin-bottom: 3em;
    text-align: right;
}
.wrap-text h4::after {
    content: '';
    display: block;
    margin: .5em 0;
    width: 100%;
    height: .3rem;
    background: url('背景画像①URL') #dbe5f0;
}
.wrap-text aside {
    color: #888888;
    font-size: .8em;
}

/* メールフォーム設定 */
.mail textarea,.mail input[type="text"] {
    padding: .5em;
    width: 60%;
    border: solid .2px #cccccc;
}
.mail textarea {
    height: 5em;   
}

/* ヘッダー設定 */
.mainHeader {
    display: flex;
    justify-content: center;
    position: fixed;
     top: 0;
     left: 0;
    height: 100vh;
    width: 30%;
    overflow-wrap: anywhere;
    word-break: break-all;
}
.siteInfoFrame {
    display: flex;
     flex-direction: column;
     justify-content: center;
    padding: 10vh 5% 0;
    width: 50%;
    background: url('背景画像②URL') center / cover fixed #dce0e6;
    z-index: 2;
}
.siteInfo {
    padding: 0 1em;
    margin-bottom: 2em;
    text-align: center;
}
.siteInfo span {
    color: #67828f;
    font-size: .9rem;
    text-align: center;
}
h1 {
    position: relative;
    font-size: 1.5em;
}
h1::before {
    content: '';
    display: block;
    position: absolute;
     top: -4em;
     left: calc(50% - 1.5rem);
    padding: 1em 0;
    width: 3rem;
    height: 3rem;
    background: url('羽アイコンURL') center / contain no-repeat;
}

.navFrame {
    margin: 0 auto 6em;
    width: 100%;
}
.mainNav {
    display: flex;
     flex-flow: column wrap;
     justify-content: center;
     align-items: center;
    position: relative;
    font-family: 'Rajdhani', sans-serif;
}
.mainNav li {
    margin: .8em 1em;
    font-size: 1.2em;
}
.mainNav li a {
    padding: 0.5em 1em;
    color: #49696d;
    transition: .5s;
}
.mainNav li a:hover {
    background: rgba(204,209,214,.4);
}

/* 戻るボタン設定 */
.back {
    text-align: right;
}
.back a {
    display: inline-block;
    padding: 1em 2em;
    color: #67828f;
    cursor: pointer;
    font-family: 'Bebas Neue', cursive;
    font-size: 1rem;
}

/* フッター設定※削除OK */
footer {
    display: none;
    padding: 5vh 0;
    margin: 0 10% 0 30%;
    width: 60%;
    min-width: 600px;
    max-width: 1200px;
    background: #ffffff;
    color: #c4d3d5;
    font-size: 1rem;
    text-align: center;
}
footer a {
    color: #cddcea;
}

/* 画面幅1001px～1300px時の調整用 */
@media screen and (max-width:1300px) {
    .mainHeader {
        min-width: 300px;
    }
    .siteInfoFrame {
        padding: 10vh 3% 0;
    }
    .mainNav li a {
        padding: .5em 0;
    }
    main,footer {
        padding: 2em;
        margin-left: 30%;
    }
}
</style>
<style type="text/css" media="screen and (max-width:1000.999px)">
/* モバイル用CSS */

/* 共通設定 */
body {
    color: #484e5a;
    font-size: 1.2rem;
}
a {
    text-decoration: none;
}
h2,h3,.mainHeader,.back {
    font-family: 'Rajdhani', sans-serif;
}
h2 {
    margin: .5em 0;
    font-size: 1.2em;
    font-weight: normal;
}
h3 {
    margin: 1em 0;
}
em {
    font-weight: normal;
}
input,textarea,button,select {
    margin-bottom: 1em;
    border: solid .2px #cccccc;
    font-family: inherit;
    font-size: 90%;
    letter-spacing: inherit;
}

/* 段落設定 */
p {
    padding: 0 1em;
}
section {
    margin: 2em 0;
}

/* ページ全般設定 */
main {
    display: block;
    padding: 1em 0;
    margin: 0 auto 5vh;
     width: 90%;
     max-width: 500px;
}
.wrap-page a {
    color: #2b71b3;
    transition: .3s;
}

/* 共通余白設定 */
.space {
    padding: 0 1em;
    margin: 1em 0;
}

/* 小説設定 */
.wrap-contents h2 {
    text-align: center;
}

/* ナビゲーション非表示用 */
.mainHeader.hidden {
    display: none;
}

/* 小説部分ナビゲーション設定 */
.contentsNav {
    display: flex;
     flex-wrap: wrap;
     justify-content: center;
}
.contentsNav li a {
    margin: 0 1em;
    color: #0d4071;
}

/* 名前変換フォーム設定 */
.nameChange {
    padding: 2em 0 0;
    text-align: center;
}
.nameChange input[type="text"] {
    padding: .2em;
    margin-right: 1em;
    width: 6em;
}
.nameChange input[type="submit"] {
    padding: .2em .5em;
}

/* 小説一覧リスト設定 */
.novelList {
    margin: 1em;
}
.novelList ul {
    padding: 1em 0;
}
.novelList ul[id] {
    padding: 4em 0 0;
}
.novelList li {
    margin: .5em 0;
}
li.categoryName {
    margin: 0 0 2em;
    color: #8191a0;
    text-align: center;
}
.novelList li a {
    color: #335d85;
}
.novelList li a:visited {
    color: #979da3;
}
.novelList li span,.novelList li div {
    margin: 0 1em;
    color: #b9b9b9;
}
.novelList li div {
    font-size: .8em;
}

/* バナー風リンク設定 */
.banner {
    display: flex;
     justify-content: center;
     align-items: center;
    margin-bottom: .5rem;
    width: 100%;
     max-width: 300px;
    height: 4em;
    background: #999999;
    text-align: center;
}
a.banner span.bannerTitle {
    padding: .2em 1em;
    background: rgba(255,255,255,.8);
    color: #444444;
}

/* 小説本文設定 */
.wrap-text {
    margin: 5vh auto;
     width: 90%;
     max-width: 500px;
    background: #ffffff;
    line-height: 220%;
}
.wrap-text h4 {
    margin-bottom: 3em;
    text-align: right;
}
.wrap-text h4::after {
    content: '';
    display: block;
    margin: .5em 0;
    width: 100%;
    height: .3rem;
    background: url('背景画像①URL') #e9ecf0;
}
.wrap-text aside {
    color: #999999;
}

/* メールフォーム設定 */
.mail textarea,.mail input[type="text"] {
    padding: .2em;
    width: 90%;
    border: solid .2px #cccccc;
}
.mail textarea {
    height: 5em;   
}

/* ヘッダー、ナビゲーション設定 */
.mainHeader {
    padding: 0;
    margin: 0 auto 4em;
    width: 100%;
    text-align: center;
}
.siteInfoFrame {
    display: flex;
     flex-direction: column-reverse;

}
.siteInfo {
    padding: 3rem 0;
    background: #ffffff;
    box-sizing: border-box;
}
h1 {
    font-size: 1.2em;
}
.siteInfo span {
    color: #888888;
    font-size: .8em;
}
.mainNav {
    display: flex;
     justify-content: center;
    position: absolute;
    padding: 0;
    width: 100%;
    background: url('背景画像②URL') center / cover ;
    transition: transform 0.2s 0.4s, opacity 0.3s;
    z-index: 2;
}
.mainNav li {
    margin: .5em 0;
    font-size: 1em;
}
.mainNav li a {
    padding: 0 1em;
    color: #67828f;
    transition: .3s;
}
.stop ul {
    position: fixed;
     top: 0;
}

/* 戻るボタン設定 */
.back {
    padding: 0 2em;
    text-align: right;
}
.back a {
    display: inline-block;
    padding: 1em;
    background: rgba(255,255,255,.5);
    color: #67828f;
    font-size: 1rem;
}

/* フッター設定※削除OK */
footer {
    display: none;
    margin: 0 auto 5vh;
    width: 90%;
    color: #c4cbd5;
    font-size: 1rem;
    text-align: center;
}
footer a {
    color: #b8c2db;
}

/* 画面幅350px以下用CSS（ナビゲーションはみ出し防止） */
@media screen and (max-width:350px) {
    .mainNav li a {
        letter-spacing: .1em;
    }
}
</style>

body(index)

<header class="mainHeader">

<nav id="navJump" class="navFrame">

<ul class="mainNav">
<li><a href="URL">information</a></li>
<li><a href="URL">main contents</a></li>
<li><a href="URL">menu item</a></li>
</ul>

</nav>

<div class="siteInfo">
<h1>サイト名</h1>
<span>https://yoursite.jp/</span>
</div>

</div>

</header>

<main>
<div class="wrap-page">

<section>
<h2>information</h2>
<p>ここは○○を取り扱う××サイトです。<a href="">リンク</a>と<em>強調</em></p>
</section>

<section id="mail">
<h2>contact</h2>

<form class="space mail">
<input type="text" placeholder="お名前" class="mail-text"><br>
<textarea placeholder="内容を入力してください。" class="mail-text"></textarea><br>
<input type="submit" value="送信" class="bg-button">
<input type="reset" value="消去" class="bg-button">
</form>

</section>

<section>
<h2>bookmark</h2>
<ul class="space bookmark list-slash">
<li><a href="">aaaaaa</a></li>
<li><a href="">bbbbbb</a></li>
<li><a href="">cccccc</a></li>
<li><a href="">dddddd</a></li>
<li><a href="">eeeeee</a></li>
</ul>
</section>
</div>

</main>

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

<script>
$(function() {

function scrollTop() {
return $(window).scrollTop();
}

//トップに戻るボタン

$('a.toPageTop').click(function() {
$('html,body').animate({scrollTop:0}, 'easeInCubic');
});

//モバイル版メニュー用

$(window).scroll(function() {

var $height = $('.navFrame').offset().top;
var $scrollTop = scrollTop();

if ($scrollTop >= $height) {
$('.navFrame').addClass('stop');
} else {
$('.navFrame').removeClass('stop');
}

});

});
</script>

body(main)

<ul class="mainNav">
<li><a href="URL">information</a></li>
<li><a href="URL">main contents</a></li>
<li><a href="URL">menu item</a></li>
</ul>
</nav>

<div class="siteInfo">
<h1>サイト名</h1>
<span>https://yoursite.jp/</span>
</div>

</div>
</header>

<main>
<div id="main" class="wrap-contents">
<section>
<h2>main contents</h2>

<ul id="category1">
<li class="categoryName"><h4>カテゴリー名</h4></li>
<li><a href="design57_text.html">本文サンプル</a></li>
<li><a href="">リンクサンプル</a><span>既読</span></li>
<li><a href="URL">リンクサンプル</a><span>未読</span></li>
<li><a href="">タイトル</a><span>同じ行で説明</span></li>
<li><a href="">タイトル</a><span class="new">同じ行で説明</span></li>
<li><a href="">タイトル</a><div>次の行で説明</div></li>
<li>
<a href="" id="banner1" class="banner"><span class="bannerTitle">バナー風リンク</span></a>
<div>説明</div>
</li>
<li><a href="">タイトルタイトル長いタイトルタイトルタイトルタイトル</a></li>
<li><a href="">タイトル</a><div>長い説明説明説明説明説明説明説明説明説明説明説明説明</div></li>
</ul>

<ul id="category2">
<li class="categoryName"><h4>消せない履歴</h4></li>
<li>
<a href="" id="banner2" class="banner"><span class="bannerTitle">ロストラブソング</span></a>
<div>全１５話</div>
</li>
<li>
<a href="" id="banner3" class="banner"><span class="bannerTitle">恋愛頓挫</span></a>
<div>続編・全７話</div>
</li>
<li><a href="">ハッピーエンドの裏舞台</a></li>
<li><a href="">君以外なにもいらないのに</a></li>
<li><a href="">肩書はどうせ女生徒A</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>

<ul id="category3" class="next-column">
<li class="categoryName"><h4>グレイガール</h4>
<div>※ここにも注意書きができます</div></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>
<li class="center"><br>僕<br>は</li>
<li class="center"><a href="">僕はただ君の目が見たかっただけなのに</a></li>
</ul>

</div>
</section>
</div>

</main>

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

<script>
$(function() {

function scrollTop() {
return $(window).scrollTop();
}

//トップに戻るボタン

$('a.toPageTop').click(function() {
$('html,body').animate({scrollTop:0}, 'easeInCubic');
});

//モバイル版メニュー用

$(window).scroll(function() {

var $height = $('.navFrame').offset().top;
var $scrollTop = scrollTop();

if ($scrollTop >= $height) {
$('.navFrame').addClass('stop');
} else {
$('.navFrame').removeClass('stop');
}

});

});
</script>

body(text)

body(ページ追加用)

<header class="mainHeader">

<nav id="navJump" class="navFrame">

<ul class="mainNav">
<li><a href="URL">information</a></li>
<li><a href="URL">main contents</a></li>
<li><a href="URL">menu item</a></li>
</ul>

</nav>

<div class="siteInfo">
<h1>サイト名</h1>
<span>https://yoursite.jp/</span>
</div>

</div>

</header>

<main>

<section>
<h2>heading</h2>
<p>div="wrap-page"で囲まれた部分に内容を追加していってください。</p>
</section>

<section>
<h2>heading</h2>
<p>headerにclass="hidden"を足せばモバイル版のみ非表示にできます。</p>
</section>

</div>

</main>

<script>
$(function() {

function scrollTop() {
return $(window).scrollTop();
}

//トップに戻るボタン

$('a.toPageTop').click(function() {
$('html,body').animate({scrollTop:0}, 'easeInCubic');
});

//モバイル版メニュー用

$(window).scroll(function() {

var $height = $('.navFrame').offset().top;
var $scrollTop = scrollTop();

if ($scrollTop >= $height) {
$('.navFrame').addClass('stop');
} else {
$('.navFrame').removeClass('stop');
}

});

});
</script>

image

背景①（400×267・シームレス）

背景②とおまけの脱色前着色後（2000×1667）

ファビコンとアイコン（PC用）
icon icon
元画像をダウンロード（Pixabay）

バナーで使用

元画像をダウンロード（Unsplash）

mobile

小説部分の携帯サイト向け使い方です。

メールフォームは別のページでご利用ください。※↑の追加用タグが使えます。

XRIA

Alice+

ナノ※注意

HEADが１万字を超えているので、ナノで使用する際はお手数ですが各機能で不要なCSSや空白を削除して文字数を減らしてください。（ライセンス表記の誤削除にだけ注意）

9000字弱に収めた例（小説ページ）：/* フッター設定 */、モバイル用の/* ヘッダー、ナビゲーション設定 */をすべて削除→空白削除ツールなどでさらに調節

めんどくさい場合はモバイル版デザインだけの使用もありかと思います。