Love is blindソースコード

・ゆりさん「写真がついた小説ページ。19世紀頃のイギリスをイメージ。文章ページの一列あたりの文字数を多めに表示。」

自動改行“しない”で作成しています。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
画像はBg-Pattrensさんのヨーロッパ系のオーナメントパターンよりお借りしています。写真はパブリックドメインのものを加工して使用しています。サイズは自動的に調整されますが、正方形のものの使用を推奨しています。
ご覧になるデバイスの幅によって見え方が若干異なります。

HEAD

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

@font-face
{
font-family: はんなり明朝;
src: url('https://cdn.leafscape.be/hannari/hannari_web.woff')
     format("woff");
}

body{
font-family:"Alegreya","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#274a78;
background:#e9e4d4;
margin:0;
padding:0;text-align:center;}

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

.width{margin:30px;}

.act{
position:relative;
display:block;
margin:30px 17px;}

.text{
padding:30px;
border:solid 2px #e9e4d4;
box-shadow:0 0 0 5px #fff;}

.text img{
max-width:200px;
max-height:200px;}
}

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

.width{margin:20px;}

.text{padding:30px 15px 20px;}

.text img{
max-width:150px;
max-height:150px;}

.act{
margin:30px auto;
display:inline-block;}
}

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

.act{
width:150px;
background:rgba(255,255,255,.5);
padding:0;
position: relative;}

.act img{
max-width:150px;
max-height:150px;}

.change{
text-align:center;
margin:20px;
padding:15px;}

.top{margin:30px 20px;}

.text{
background:#fff;
color:#554738;
line-height:200%;
font-size:13px;
margin:50px 5px 20px;
text-align:left;}

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

.text img{
display:block;
margin:0px auto 50px;
border:solid 3px #fff;
box-shadow:0 0 0 1px #554738;}

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

.ft a{
text-transform:uppercase;
color:#274a78;
background:#e9e4d4;
margin:0 5px;
padding:2px 5px;
border-radius:5px;
display:inline-block;
width:50px;}

.ft a:hover{
border:none;
background:none;}

.con{margin:10px;}

.title{
font-size:15px;
color:#554738;
font-family:Alegreya ,はんなり明朝, sans-serif;
margin:10px 0;
padding:3px 5px;
border:solid 1px #554738;
background:rgba(255,255,255,.5);
display:inline-block;}

.title:hover{
border:solid 1px #554738;
background:#fff;}

header{
background:url(##背景画像URL##);
background-size:50px;
margin:0;
padding:20px;}

footer{
background:url(##背景画像URL##);
background-size:50px;
padding:15px;
margin:0;}

footer a{background:#e9e4d4;}

h1{
font-size:30px;
font-family:Norican ,はんなり明朝, sans-serif;
font-weight:normal;
color:#274a78;
margin:30px 20px 0;
line-height:100%;
display:inline-block;}

h1 p{
font-size:12px;
font-family:Alegreya ,はんなり明朝, sans-serif;
margin:0;
padding:0;
display:inline-block;}

h2{
font-size:15px;
color:#554738;
font-weight:normal;
font-family:Alegreya ,はんなり明朝, sans-serif;
margin:10px 0;
padding:3px 5px;
border:solid 1px #554738;
background:rgba(255,255,255,.5);
display:inline-block;}

h3{
font-size:24px;
color:#274a78;
font-weight:normal;
font-family:Alegreya ,はんなり明朝, sans-serif;
margin:0;
padding:3px 5px;
text-align:center;}

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

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

input[type],textarea{
height:50px;
width:80%;
font-family:"Alegreya Sans","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:none;
color:#554738;
border:solid 1px #554738;
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 #274a78;
background:#274a78;
color:#e9e4d4;}

</style>

表紙

<header></header>
<div class="wrp">
<h1>Love is blind.<br>
<p><a href="#名前変換url#">SETTING</a>・<a href="#">CAUTION</a></p></h1>
<div class="width">

<div class="act">
<img src="##画像URL##"><br>
<a class="#">Love is blind.</a>
<div class="con">
説明文
</div></div>

<div class="act">
<img src="##画像URL##"><br>
<a class="title" href="#">聖なる悪意</a>
<div class="con">
説明文
</div></div>

<div class="act">
<img src="##画像URL##"><br>
<a class="title" href="#">親愛なる休日</a>
<div class="con">
タイトル部分をリンクとして使用しない場合、タイトル部分を<h2>～</h2>と書き換えて下さい。
</div></div>

<div class="act">
<img src="##画像URL##"><br>
<h2>にせものの星</h2>
<div class="con">
 <a href="#">あの子には内緒</a><br>
<a href="#">死にたくないだけ</a><br>
<a href="#">こころ鋏</a><br>
<a href="#">小指と赤い糸</a><br>
<a href="#">切り落としてあげる</a><br>
</div></div>

<div class="act">
<img src="##画像URL##"><br>
<a class="title" href="#">純真の黒</a>
<div class="con">
説明やあらすじ等を記載できます。
</div></div>
</div></div>
<footer>

文章

名前変換