慧眼のさきソースコード

・夜泉さん「パソコンからでも閲覧し易い春っぽい小説ページ。画像の有無は任意だが、人物画（シルエット等）は不可。」

自動改行“しない”で作成しています。
背景画像はBg-Pattrensさまのポリゴン風のパターン背景よりお借りしています。
見だし横の画像について、<div class="icn"></div>と記載すると丸く、<div class="icn2"></div>と記載するとひし形になります。お好きにご使用ください。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。

HEAD

@import url('https://fonts.googleapis.com/css?family=Varela+Round|Dancing+Script');

@font-face
{
font-family:和田研中角ゴシック;
src: url('https://cdn.leafscape.be/wadalab/wadalab-nakakakugo_web.woff')
     format("woff");
}

body{
font-family:"Varela Round","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#555;
background:#fff;
margin:0;
padding:0;}

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

.top{
max-width:470px;
margin:0 auto;}

.act{margin:10px 0 30px 30px;}
}

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

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

.icn{
background:url(##画像URL##);
background-size:100px;
width:30px;
height:30px;
border-radius:50%;
border:solid 1px #fff;
box-shadow:0px 0px 5px 1px #fff inset;
vertical-align:middle;
display:inline-block;
opacity:.6;
margin-right:10px;}

.icn2{
left: 0;
right: 0;
width: 20px;
height: 20px;
background:url(##画像URL##);
background-size:100px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
overflow: hidden;
border:solid 1px #fff;
box-shadow:0px 0px 5px 1px #fff inset;
vertical-align:middle;
display:inline-block;
opacity:.6;
margin:0 15px 0 5px;}

.menu{
text-transform:uppercase;
margin:15px auto 30px;
text-align:center;}

.menu a{
color:#333;
background:#fbdac8;
border:solid 1px #fbdac8;
padding:2px;
margin:5px;
display:inline-block;
width:80px;
text-align:center;}

.menu a:hover{
color:#555;
background:#fff;
border:solid 1px #fbdac8;
padding:2px;
margin:5px;
display:inline-block;
width:80px;
text-align:center;}

.act{
border:solid 2px #e7e7eb;
padding:15px;}

.act a{
background:linear-gradient(transparent 60%, #fbdac8 0%);
margin:5px;
padding:0 5px;
text-align:left;}

.act a:nth-child(2n+1){
background:linear-gradient(transparent 60%, #ffe9a9 0%);}

.act a:hover{
background:#fff;}

.text{
line-height:200%;
font-size:13px;
padding:30px 0 10px;
margin:20px;
text-align:left;}

.text p{
line-height:150%;
background:#e7e7eb;
margin:10px;
padding:10px;
font-size:10px;
}

header{
background:url(##画像URL##);
width:240px;
height:240px;
margin:-175px auto 20px;
border-radius:50%;
border:solid 1px #fff;
box-shadow:0px 0px 5px 3px #fff inset;
display:table;}

header p{
font-size:30px;
letter-spacing:0;
line-height:100%;
font-family:Dancing Script,和田研中角ゴシック,sans-serif;
background:rgba(255,255,255,.5);
text-align:center;
vertical-align:bottom;
display:table-cell;}

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

.ft a{
color:#333;
background:#fbdac8;
border:solid 1px #fbdac8;
padding:1px 5px;
margin:5px;}

.ft a:hover{
color:#555;
background:#fff;
border:solid 1px #fbdac8;
padding:1px 5px;
margin:5px;}

h1{
font-family:Dancing Script,和田研中角ゴシック,sans-serif;
line-height:100%;
font-weight:normal;
color:#000;
margin:0;
padding:0;
text-align:center;}

h2{
font-family:Dancing Script,和田研中角ゴシック,sans-serif;
color:#555;
font-weight:normal;
font-size:18px;
margin:10px;
padding:0;}

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

a:hover{color:#a58f86;}

input[type],textarea{
height:50px;
width:70%;
font-family:"Varela Round","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#fff;
color:#333;
border:solid 1px #fbdac8;
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 #fbdac8;
background:#fbdac8;
color:#333;
}

</style>

表紙

文章

名前変換