mr, rightソースコード

・霧島さん「小説表紙・話数が出る目次・あとがき有の本文ページ。イメージは古書。」

自動改行“しない”で作成しています。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
ご覧になるデバイスの幅によって見え方が若干異なります。
背景画像はBGroundERさんよりお借りしています。ポイント画像はパブリックドメインのものを加工して使用していますのでこちらからどうぞ。

HEAD

@import url('https://fonts.googleapis.com/css?family=Alegreya+SC|Cinzel+Decorative|Gentium+Book+Basic|Special+Elite');

@font-face
{
font-family: はれのそら明朝;
src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2')
     format("woff2");
}

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

@media screen and (min-width:601px){

.wrp{
max-width:600px;
margin:0 0 0 176px;}

.se{
background:#6a1917;
display:block;
position:fixed;
width:150px;
top:0;
bottom:0;
left:0;
color:#ebd842;
padding:50px 10px;
text-align:center;
border-right:solid 1px #ebd842;
box-shadow:5px 0 0 #6a1917;}

.menu{
margin:10px 0 30px;
padding:10px 0 0;
border:solid 1px #ebd842;}

.info{
margin:60px auto;
max-width:250px;}

.act{margin:20px;}

.main{padding:50px 30px 20px;}

ol li{display:inline-block;}
}

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

.se{
background:#6a1917;
display:block;
position:fixed;
width:20px;
top:0;
bottom:0;
left:0;
color:#ebd842;
padding:50px 5px;
text-align:center;
border-right:solid 1px #ebd842;
box-shadow:5px 0 0 #6a1917;}

.mini{display:none;}

.info{
margin:60px 20px 60px 56px;}

.act{
margin:20px 20px 20px 56px;}

.main{padding:50px 15px 20px;}
}

.top{
max-width:200px;
margin:0 auto;
height:100%;
background:#6a1917;
color:#ebd842;
padding:50px 5px 0;
text-align:center;
border-right:solid 1px #ebd842;
border-left:solid 1px #ebd842;
box-shadow:5px 0 0 #6a1917,-5px 0 0 #6a1917;}

.se a,.top a{
color:#ebd842;
display:inline-block;
padding:2px;
margin:0 0 10px;}
.se a:hover,.top a:hover{
color:#ebd842;
opacity:.8;
border:none;}

.en{margin:20px 0;}

.en a{
display:inline-block;
padding:2px 10px;
width:80px;
background:#6a1917;
color:#ebd842;
border:solid 1px #ebd842;}

.en a:hover{
background:#ebd842;
color:#6a1917;
border:solid 1px #ebd842;
opacity:1;}

.info{
padding:15px;
background:rgba(255,255,255,.6);
border:solid 1px #6a1917;
box-shadow:0 0 0 3px rgba(255,255,255,.6);
text-align:center;}

.act{
padding:15px;
background:rgba(255,255,255,.6);
border:solid 1px #6a1917;
box-shadow:0 0 0 3px rgba(255,255,255,.6);
text-align:center;}

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

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

ol li:before{
position: absolute;
counter-increment: number;
content: counter(number);
display:inline-block;
text-align:center;
margin:0 0 0 -10px;}

.text{
max-width:600px;
margin:0 auto;}

.main{
margin:50px 10px 20px;
background:rgba(255,255,255,.6);
border:solid 1px #6a1917;
box-shadow:0 0 0 3px rgba(255,255,255,.6);
font-size:13px;
letter-spacing:2px;
line-height:200%;}

.main p{
font-size:11px;
line-height:150%;
margin:20px;
padding:10px 20px;
background:rgba(255,255,255,.5);
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.main p::before,.main p::after {
position: absolute;
content: '';
width: 50px;
height:50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

.main p::before {
top: 0;
left: 0;
border-top: 1px solid #c4972f;
border-left: 1px solid #c4972f;}

.main p::after {
bottom: 0;
right: 0;
border-bottom: 1px solid #c4972f;
border-right: 1px solid #c4972f;}

.ft{
margin:20px 0 10px;
padding:5px;
border-top:double 3px #c4972f;
border-bottom:double 3px #c4972f;
text-align:center}

hr{
border:none;
border-top:solid 1px #6a1917;
margin:20px 30px;
padding:0;}

h1{
font-size:24px;
font-weight:normal;
line-height:150%;
font-family:"Alegreya SC","はれのそら明朝","メイリオ", sans-serif;
margin:10px 0 30px;
padding:20px 0;
border-top:double 3px #ebd842;
border-bottom:double 3px #ebd842;}

h2{
font-size:24px;
font-weight:normal;
font-family:"Alegreya SC","はれのそら明朝","メイリオ", sans-serif;
margin:10px 0 20px;
padding:10px;
border-top:double 3px #c4972f;
border-bottom:double 3px #c4972f;}

h3{
font-size:15px;
line-height:100%;
font-weight:normal;
font-family:"Alegreya SC","はれのそら明朝","メイリオ", sans-serif;
margin:20px auto;
padding:10px 30px;
text-transform: uppercase;
text-align:center;
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

h3::before,h3::after {
position: absolute;
content: '';
width: 20px;
height:50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;}

h3::before {
top: 0;
left: 0;
border-top: 1px solid #c4972f;
border-left: 1px solid #c4972f;}

h3::after {
bottom: 0;
right: 0;
border-bottom: 1px solid #c4972f;
border-right: 1px solid #c4972f;}

h4{
font-size:15px;
font-weight:normal;
font-family:"Alegreya SC"," はれのそら明朝","メイリオ", sans-serif;
margin:20px 0 60px;
padding:5px;
border-top:double 3px #c4972f;
border-bottom:double 3px #c4972f;
text-align:center;}

a{
color:#bb5535;
text-decoration:none;
padding:0 3px;
}

a:hover{border-bottom: 1px solid #ebd842;}

input[type],textarea{
height:50px;
width:70%;
font-family:"Special Elite","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:none;
color:#6a1917;
border:solid 1px #c4972f;
margin:0;
padding:5px;}

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

input[type=submit]{
height:24px;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #6a1917;
background:#6a1917;
color:#ebd842;
padding:0 5px;
margin:0 5px;}

</style>

表紙

目次

文章

名前変換