Stripe-note

名前変換

スタートダッシュに失敗通り雨にご注意ラムネ味のキャンディ今からでも間に合いますかプログラムナンバー13 ノーコメントでお願いします特別な瞬間を記して

番外編

ソースコード

自動改行「しない」で作成。
手書き風フォントでノート風。

ナノの仕様に合わせてありますので、
独自タグなどは適宜書き換えてご利用ください。

section class="list1"でナンバリング有の縦並び、
section class="list2"でナンバリング無の横並びになります。

小説本文サンプル（読みやすさ重視）
小説本文サンプル（デザイン重視）

使用したタイトルはこちらにて配布しております。

HEAD

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

body{
min-height:100vh;
font-size: 0.9em;
font-family: 'Yomogi';
line-height: 1.5;
background-color: #a0d8ef; /* アクセントカラー */
background-image: repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
}

a{
text-decoration: none;
color: #333;
border-bottom: dotted 2px #a0d8ef; /* アクセントカラー */
margin: 3px;
}

.wrp{
position: relative;
background: #fff;
width:90%;
max-width:600px;
margin: 30px auto;
padding: 10px 15px 5px 50px;
}
.wrp::before{
display: block;
content: "";
background: #fff;
width: 25px;
height: 99%;
left: 0;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
border-right: dotted #ccc 20px;
}

header{
font-size:1.1em;
text-align: center ;
margin: 50px auto 50px;
}

.nav{
text-align: center;
line-height: 1.5;
}

.nav a{
border: none;
padding: 2px 5px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #000, -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000;
background-color: #a0d8ef; /* アクセントカラー */
background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255,255,255,.5) 15px, rgba(255,255,255,.5) 30px);
}

h1 {
font-family: 'Yusei Magic';
font-size: 1.8em;
margin: 10px;
}

h2 {
font-family: 'Yusei Magic';
font-size: 1.2em;
}
h2 span{
padding: 2px 5px;
color: #fff;
background: #a0d8ef; /* アクセントカラー */
}
h3 {
font-family: 'Yusei Magic';
font-size: 1.2em;
margin: 10px;
border-bottom: 3px double #ccc;
}

hr {
border-style: solid #ccc 1px;
}

section{
margin: 20px 0;
}

em{
background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffffbc 0%); /* 強調のマーカー色 */
}

.list1{
line-height: 2em;
padding: 5px 1em;
margin: 0 auto;
counter-reset: title 0;
}

.list1 a:before{
counter-increment: title;
content: '0' counter(title);
background: #a0d8ef; /* アクセントカラー */
color: #fff;
padding: 2px;
margin-right: 3px;
}

.list1 a:nth-of-type(9) ~ a:before {
  content: counter(heading);
}

.list1 a:after{
content: "\A" ;
white-space: pre ;
}

.list2{
line-height: 2em;
padding: 5px 1em;
}

.text1{
font-family: 'Noto Sans JP', sans-serif;
font-size: 0.9em;
width: 90%;
margin: 0 auto;
line-height: 1.8em;
padding: 0 1em;
}

.text2{
width: 90%;
margin: 0 auto;
background-image:linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 98%, #646464 100%);
background-size: 100% 2.5em;
line-height: 2.5em;
padding: 0 1em;
}

.atgk{
width: 90%;
text-align: right;
font-size:0.9em;
color: #666;
margin: auto 0 auto auto;
}

.drm{
text-align: center;
}

input[type="text"] {
border: none;
font-family: 'Yomogi';
font-size:1em;
padding: 2px;
margin: 10px;
border-bottom: 2px solid #ccc;
}

input[type="submit"] {
padding: 2px 5px;
font-weight: bold;
font-size:1em;
color: #000;
background-color: #a0d8ef; /* アクセントカラー */
background-image: repeating-linear-gradient(-45deg, transparent, transparent 15px, rgba(255,255,255,.5) 15px, rgba(255,255,255,.5) 30px);
border: 1px solid #a0d8ef; /* アクセントカラー */
}

footer{
font-family: 'Yusei Magic';
text-align: center ;
margin: 50px auto 20px;
}
</style>

BODY（#list#タグ利用の場合）

BODY（リンク先を1ページずつ貼り付ける場合）

BODY（小説ページ）

BODY（名前変換ページ）