temp09 ソースコード

このテンプレートは小説などの分岐用ページです。「子ページ」として作成しており、リストタグは使っていませんので、各作品へのリンクを載せるページとしてお使いいただければと思います。

自動改行「しない」で作成しています。編集トップ＞ホムペ設定＞その他共通設定＞「改行を< br >に変換して表示」を「しない」にすればOKです（ナノの場合）

HEAD内

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Kaku Gothic New', sans-serif;
color: #262626;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
width: 100vw;
background-color: #F8F8F8;/* ★全体の背景色 */
background-image: linear-gradient(#F2F2F2 1px, transparent 0),/* ★背景のチェック柄の色 */
linear-gradient(90deg, #F2F2F2 1px, transparent 0);/* ★背景のチェック柄の色 */
background-size: 16px 16px;/* ★チェック柄の間隔 */
overflow-x: hidden;
}

.wrap{
max-width: 800px;
min-height: 100vh;
padding: 0 25px;
margin: 50px auto 30px;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 3px double #CC3F0A;/* ★リンク文字の下線の色 */
}

a:hover{
color: #CC3F0A;/* ★リンク文字をホバーした時の文字色 */
}

/* 強調文 */
strong{
font-weight: 700;
color: #CC3F0A;/* ★強調文の文字色 */
}

/* タイトル部分 */
header{
width: 100%;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 80px auto 30px;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 60px;
padding-top: 50px;
border: 1px solid #262626;/* ★セクションを囲む線 */
position: relative;
}

/* 見出し */
h1,h2,h3,h4{
font-family: 'Cedarville Cursive', 'Zen Kaku Gothic New', cursive;
}

h1{
font-size: 26px;
text-align: center;
padding-bottom: 30px;
}

h2{
font-size: 20px;
padding: 0 10px;
background-color: #F8F8F8;/* ★見出しの背景色 */
position: absolute;
top: -20px;
left: -10px;
}

/* リスト */
ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 10% 40px;
row-gap: 30px;
}

ul li{
background-color: #FFF;
width: 275px;
border-left: 3px solid #CC3F0A;/* ★付箋の線の色 */
box-shadow: 10px 2px 12px 0 rgba(0, 0, 0, 0.03);
}

ul li a{
border-bottom: none;
display: block;
padding: 20px 30px 25px 30px;
}

ul li a:hover{
box-shadow: 10px 10px 12px 0 rgba(0, 0, 0, 0.05);
opacity: 0.6;
}

.title{
font-size: 13px;
}

.outline{
font-size: 11px;
display: inline-block;
padding-top: 7px;
}

.genre{
font-size: 11px;
color: gray;
}

/* フッター */
footer{
text-align: center;
margin: 0 auto 60px;
font-size: 11px;
}

/* 740px以下のデバイスでの見え方 */
@media screen and (max-width: 740px){
ul{
margin: 0 5% 40px;
}
}

/* 668px以下のデバイスでの見え方 */
@media screen and (max-width: 663px){
ul{
display: block;
width: 275px;
margin: 0 auto 50px;
}

ul li+li{
margin-top: 30px;
}
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin-top: 0;
padding-top: 25px;
}

}

</style>

全体レイアウト

<div class="wrap">

<header>
<h1>Graph Paper</h1>
<p >
ここに説明書きを入れてください。不要な場合は削除してください。
</p>
</header>

<main>
<div class="section">
<h2>Long story</h2>
<ul>

<li><a href="■">
<span class="title">長編のタイトル</span><br>
<span class="outline">（△△ / ◯◯◯ / 日常）</span><br>
<span class="genre">作品ジャンルなど</span>
</a></li>

<li><a href="■">
<span class="title">長編のタイトル</span><br>
<span class="outline">（△△ / ◯◯◯ / 恋愛）</span><br>
<span class="genre">作品ジャンルなど</span>
</a></li>

<li><a href="■">
<span class="title">長編のタイトル</span><br>
<span class="outline">（△△ / ◯◯◯ / 恋愛）</span><br>
<span class="genre">作品ジャンルなど</span>
</a></li>

</ul>
</div>

<div class="section">
<h2>Short story</h2>
<ul>
<li><a href="■"><span class="title">ジャンル名など</span></a></li>
<li><a href="■"><span class="title">ジャンル名など</span></a></li>
</ul>
</div>


</main>

<!-- ↓ここからフッター↓ -->
<footer>
Template by <a href="https://nanos.jp/mellow100/">mellow.</a>
</footer>

</div>

色違いver：HEAD内

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">

/* フォントの読み込み */
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;700&display=swap');

/* 全体設定 */
*{
font-family: 'Zen Kaku Gothic New', sans-serif;
color: #FFF;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 2.0em;
box-sizing: border-box;
padding: 0;
margin: 0;
list-style-type: none;
text-decoration:none;
}

body{
width: 100vw;
background-color: #505050;/* ★全体の背景色 */
overflow-x: hidden;
}

.wrap{
max-width: 800px;
min-height: 100vh;
padding: 0 25px;
margin: 50px auto 30px;
}

/* リンク文字 */
a{
transition: 0.2s;
border-bottom: 3px double #E87E7E;/* ★リンク文字の下線の色 */
}

a:hover{
color: #E87E7E;/* ★リンク文字をホバーした時の文字色 */
}

/* 強調文 */
strong{
font-weight: 700;
color: #E87E7E;/* ★強調文の文字色 */
}

/* タイトル部分 */
header{
width: 100%;
}

/* メインコンテンツ */
main{
width: 100%;
margin: 80px auto 30px;
}

/* セクション（見出し＋本文のセット） */
.section{
width: 100%;
margin: 0 auto 60px;
padding-top: 50px;
border: 1px solid #FFF;/* ★セクションを囲む線 */
position: relative;
}

/* 見出し */
h1,h2,h3,h4{
font-family: 'Cedarville Cursive', 'Zen Kaku Gothic New', cursive;
}

h1{
font-size: 26px;
text-align: center;
padding-bottom: 30px;
}

h2{
font-size: 20px;
padding: 0 10px;
background-color: #505050;/* ★見出しの背景色 */
position: absolute;
top: -20px;
left: -10px;
}

/* リスト */
ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 10% 40px;
row-gap: 30px;
}

ul li{
background-color: #FFF;
width: 275px;
border-left: 3px solid #E87E7E;/* ★付箋の線の色 */
box-shadow: 10px 2px 12px 0 rgba(0, 0, 0, 0.2);
}

ul li a{
border-bottom: none;
display: block;
padding: 20px 30px 25px 30px;
}

ul li a:hover{
box-shadow: 10px 16px 12px 0 rgba(0, 0, 0, 0.2);
opacity: 0.6;
}

.title{
font-size: 13px;
color: #262626;
}

.outline{
font-size: 11px;
display: inline-block;
padding-top: 7px;
color: #262626;
}

.genre{
font-size: 11px;
color: gray;
}

/* フッター */
footer{
text-align: center;
margin: 0 auto 60px;
font-size: 11px;
}

/* 740px以下のデバイスでの見え方 */
@media screen and (max-width: 740px){
ul{
margin: 0 5% 40px;
}
}

/* 668px以下のデバイスでの見え方 */
@media screen and (max-width: 663px){
ul{
display: block;
width: 275px;
margin: 0 auto 50px;
}

ul li+li{
margin-top: 30px;
}
}

/* 500px以下のデバイスでの見え方 */
@media screen and (max-width: 500px) {
.wrap{
margin-top: 0;
padding-top: 25px;
}

}

</style>

※黒背景に白文字の方を「色違いver」としています。
※色違いverにする場合でも、全体レイアウトは全て同じです。

source code