晴れの水曜日ソースコード

・鶴野さん「青系の色合いのシンプルで可愛らしい、長編向けの小説ページ。画像の有無はお任せ。」

自動改行“しない”に設定しています。
背景画像はBg-Pattrensさまの斜めのストライプパターンその2よりお借りしています。
自動で章部分が青と白交互になります。幅600px以上のデバイスから見ると、タイトル部分が横にきます。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。

HEAD

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

@font-face
{
font-family: ロゴたいぷゴシック;
src: url('https://cdn.leafscape.be/logotype/logotype_web.woff')
     format("woff");
}

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

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

.act{overflow:hidden;}

.title{
text-align:center;
float:left;
width:25%;}

.sub{
width:65%;
float:right;
padding:5px 0  5px 20px;
margin-left:15px;
border-left:solid 2px #add8e6;}
}

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

.title{
text-align:center;
padding-bottom:10px;
margin-bottom:15px;
border-bottom:solid 2px #add8e6;}

}

.sq{
width:151px;
height:151px;
margin:60px auto 20px;
background:#add8e6;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;
border:solid 3px #fff;
box-shadow:0 0 0 5px #add8e6;
}

.top{
position:absolute;
width:200px;
height:200px;
color:#fff;
background:transparent;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
text-align:center;
}

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

.top a:hover{
background:#eaf4fc;
color:#333;}

.act{
text-align:left;
margin:30px 25px 20px;
padding:15px;
background:#eaf4fc;
border:solid 2px #fff;
box-shadow:0 0 0 3px #eaf4fc;}

.act:nth-child(2n){
margin:30px 23px 20px;
box-shadow:0 0 0 1px #eaf4fc;
border:double 7px #eaf4fc;
background:#fff;}

.bk{
background:url(##画像URL##);
padding:10px;}

.icn{
width:31px;
height:31px;
margin:30px auto 20px;
background:#eaf4fc;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;
border:solid 2px #fff;
box-shadow:0 0 0 3px #eaf4fc;
}

.text{
font-size:13px;
line-height:200%;
margin:30px 20px;}

.text p{
margin:20px 10px;
padding:10px;
font-size:11px;
line-height:150%;
background: -moz-linear-gradient(right top, #fff, #fff 25%, #efefef 25%, #efefef 50%,#fff 50%, #fff 75%,#efefef 75%,#efefef);
background: -webkit-linear-gradient(right top, #fff, #fff 25%, #efefef 25%, #efefef 50%,#fff 50%, #fff 75%,#efefef 75%,#efefef);
background: linear-gradient(right top, #fff, #fff 25%, #efefef 25%, #efefef 50%,#fff 50%, #fff 75%, #efefef 75%,#efefef);
-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;}

header{
background:url(##画像URL##);
margin-bottom:60px;}

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

.ft a{
margin:1px;
padding:0 1px;
text-align:center;
display:inline-block;
width:50px;
color:#fff;
background:#333;
border:solid 1px #333;}

.ft a:hover{
background:#eaf4fc;
color:#333;}

h1{
font-family:"Grand Hotel",ロゴたいぷゴシック,sans-serif;
font-weight:normal;
font-size:24px;
margin:40px auto 20px;
padding:0;
line-height:100%;
text-align:center;}

h2{
color:#333;
font-weight:normal;
font-family:"Julius Sans One",ロゴたいぷゴシック,sans-serif;
font-size:18px;
margin:5px auto;
padding:0;}

h3{
color:#333;
font-weight:normal;
font-family:"Julius Sans One",ロゴたいぷゴシック,sans-serif;
font-size:24px;
text-align:center;
padding:0;
margin:10px auto 20px;
position:relative;
bottom:20px;}

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

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

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

</style>

表紙

文章

名前変換