ほの灯りとダイヤモンドソースコード

・りりさん「ピンクのパステルカラーで女の子らしい雰囲気。画像有り。」

自動改行“しない”で作成しています。
幅の広いデバイスから見ると章部分が三列になります。また、リストタグ使用でタイトルリンクを貼ると自動で話数をふります。お好きにご使用ください。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
わざとタグミスしていますのでご注意ください。
トップのアイコンは ICOOON MONOさまのシンプルなダイヤモンドのアイコン（色：rgb(0,0,0)）よりお借りしています。
背景はこちらからどうぞ。

HEAD

@import url('https://fonts.googleapis.com/css?family=Comfortaa|Grand+Hotel');

@font-face
{
font-family: しねきゃぷしょん;
src: url('https://cdn.leafscape.be/cinecaption/cinecaption227.woff')
     format("woff");
}

body{
font-family:"Comfortaa","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#333;
background:url(##背景画像URL##);
background-size:500px;
margin:0;
padding:0;}

@media screen and (min-width: 701px){
.wrp{
width:700px;
margin:0 auto;}

.wrp2{
display:flex;
flex-direction:row;
flex-wrap:wrap;}

.act{
background:rgba(255,245,238,.8);
width:28%;
position:relative;
display:block;
margin:10px auto;
padding:10px;}
}

@media screen and (max-width: 700px){
.wrp{
width:100%;
margin:0 auto;}

.act{
margin:30px 20px;
padding:10px;}
}

.act{
border-radius:5px;
background:rgba(255,245,238,.9);}

.act:nth-child(2n){background:rgba(255,255,255,.9);}

.top{
text-align:center;
margin:50px 20px 20px;
}

.top a{
color:#ffa07a;
border:solid 1px #ffa07a;
display:inline-block;
width:100px;
padding:2px;
text-align:center;
margin:0 5px;
background:#fff;}

.top a:hover{
background:#ffa07a;
color:#fff;}

.icn{
width:50px;
opacity:.8;}

.sq{
background:#f5b199;
border:solid 1px #fff;
box-shadow:0 0 0 1px #f5b199;
height:5px;
width:5px;
margin:-15px auto 10px;
padding:0;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;}

.text{
font-size:13px;
line-height:200%;
margin:0 5px;
padding:60px 15px 20px;
background:rgba(255,255,255,.9);}

.text p{
font-size:11px;
line-height:150%;
border-radius:5px;
background:rgba(255,245,238,.8);
padding:10px;
margin:20px 10px;}

ol{
padding:0 10px;
counter-reset:number;
list-style-type: none!important;}

ol li{
position: relative;
list-style-type: none!important;
text-align:left;
margin:5px 0 5px 20px;
padding:0;}

ol li:before{
position: absolute;
counter-increment: number;
content: counter(number);
display:inline-block;
border:solid 1px #f5b199;
background: #f5b199;
color:#fff;
width:20px;
height:20px;
text-align:center;
margin-left:-20px;
}

.ft{
text-align:center;
font-size:12px;
line-height:150%;
margin:20px 0;}

.ft a{
color:#ffa07a;
border:solid 1px #ffa07a;
display:inline-block;
width:60px;
padding:0 2px;
text-align:center;
margin:0 5px;
background:#fff;
border-radius:5px;}

.ft a:hover{
background:#ffa07a;
color:#fff;}

h1{
font-family:"Grand Hotel",しねきゃぷしょん,sans-serif;
font-weight:normal;
font-size:40px;
margin:10px auto;
padding:0;
line-height:100%;
text-align:center;}

h2{
font-family:"Grand Hotel",しねきゃぷしょん,sans-serif;
font-size:15px;
font-weight:normal;
margin:5px auto 10px;
padding:5px 5px 15px;
line-height:100%;
border-bottom:solid 2px #f5b199;
text-align:center;}

h3{
font-family:"Grand Hotel",しねきゃぷしょん,sans-serif;
font-size:24px;
font-weight:normal;
margin:5px auto 10px;
padding:5px 5px 15px;
line-height:100%;
border-bottom:solid 2px #f5b199;
text-align:center;}

a{
color:#555;
text-decoration:none;
padding:0 3px;
margin:5px;
transition:0.5s;
}

a:hover{
color:#ee827c;
text-decoration:none;
}

input[type],textarea{
height:80px;
width:80%;
font-family:"Comfortaa","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:none;
color:#333;
border:solid 1px #f5b199;
margin:5px 10px;
padding:2px 5px;
}

input[type=text]{
margin:5px;
height:24px;
width:80px;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #555;
background:#555;
color:#fff;
}

</style>

表紙

文章

名前変換

- ALICE+ -