Rabbit holeソースコード

・りんさん「長編100話位載せられるようなテンプレ。色味は赤系統。」

自動改行“しない”で作成しています。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。

HEAD

@import url('https://fonts.googleapis.com/css?family=Sniglet|Vibur');

@font-face
{
font-family: やさしさゴシック;
src: url('https://cdn.leafscape.be/Yasashisa/YasashisaGothic_web.woff2')
     format("woff2");
}

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

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

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

.top{
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);}

.menu{
color:#000;
position: relative;
height: 30px;
width:200px;
line-height: 30px;
padding:0 20px;
margin:10px auto;
background-color:#fff;}

.menu:before,.menu:after {
content: '';
position: absolute;}

.menu:before {
top: 0;
left: 0;
z-index: 2;
border-width: 15px 10px;
border-style: solid;
border-color: transparent;
border-left-color: #d3381c;}

.menu:after {
top: 0;
right: 0;
z-index: 2;
border-width: 15px 10px;
border-style: solid;
border-color: transparent;
border-right-color: #d3381c;}

.menu a{
color:#000;
line-height:150%;
padding:0;
margin:5px;}

.menu a:hover{color:#d3381c;}

.act{
border-left:solid 1px #000;
padding:3px 10px;
margin:0 10px 10px 35px;}

.act2{
clear:both;
text-align:right;
border-right:solid 1px #000;
padding:3px 10px;
margin:0 35px 10px 10px;}

.title{
font-family:Vibur,やさしさゴシック,sans-serif;
font-size:20px;
margin:10px;}

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

.text p{
line-height:150%;
color:#888;
border:solid 1px #e7e7eb;
margin:10px;
padding:10px;
font-size:10px;}

header{
text-align:center;
margin:0;
padding:30px;
color:#fff;
background:linear-gradient(-135deg,#d3381c 10px,transparent 0) 0 10px,linear-gradient(135deg,#d3381c 10px,#fff 0) 0 10px;
background-position:left bottom !important;
background-repeat:repeat-x !important;
background-size:20px 20px;
background-color:#d3381c;}

.ft{
text-align:center;
margin:30px auto 0;
color:#fff;
position: relative;
height: 30px;
width:100px;
line-height: 30px;
padding:0 20px;
background-color:#d3381c;}

.ft:before,.ft:after {
content: '';
position: absolute;}

.ft:before {
top: 0;
left: 0;
z-index: 2;
border-width: 15px 10px;
border-style: solid;
border-color: transparent;
border-left-color: #fff;}

.ft:after {
top: 0;
right: 0;
z-index: 2;
border-width: 15px 10px;
border-style: solid;
border-color: transparent;
border-right-color: #fff;}

.ft a{
color:#fff;
line-height:150%;
padding:0;}

.ft a:hover{color:#000;}

h1{
font-family:Vibur,やさしさゴシック,sans-serif;
font-weight:normal;
font-size:40px;
line-height:100%;
letter-spacing:0;
margin:10px;
padding:0;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
position:relative;
right:50px;}

h1 p{
margin:0;
padding:0;
font-size:15px;
position:relative;
right:-50px;}

h2{
width:30px;
height:30px;
margin:20px 20px 10px;
background:#d3381c;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;}

h2 p{
font-size:16px;
margin:0;
padding:6px 0 0 2px;
position:absolute;
width:30px;
height:30px;
color:#fff;
background:transparent;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
text-align:center;}

h3{
float:right;
width:30px;
height:30px;
margin:20px 20px 10px;
background:#d3381c;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
overflow:hidden;}

h3 p{
font-size:16px;
margin:0;
padding:6px 0 0 2px;
position:absolute;
width:30px;
height:30px;
color:#fff;
background:transparent;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
text-align:center;}

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

a:hover{color:#d3381c;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Sniglet","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:none;
color:#000;
border:solid 1px #000;
margin:5px 10px;
padding:2px 5px;
-webkit-appearance: none;
box-shadow:none;
border-radius:0;}

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

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

</style>

表紙

文章

名前変換