幸せの過去形ソースコード

自動改行“しない”に設定しています。
表示トップの白い梅の花のアイコンは ICOOON MONOの梅アイコン3（色：rgb(255,255,255)）から、アイコンの赤い梅の花はFlode illustrationの梅の花素材10からお借りしています。
幅600px以上のデバイスから見ると、リンクメニュー部分が二段になります。お好きなようにご使用ください。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。

HEAD

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

@font-face
{
font-family: XANO明朝;
src: url('https://cdn.leafscape.be/XANO-mincho/XANO-mincho_web.woff')
     format("woff");
}

body{
font-family:"Arsenal","メイリオ", 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{
max-width:800px;
margin:0 auto;}

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

.act{
position:relative;
width:45%;
display:inline-block;}

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

.left{
width:46%;
float:left;
margin-right:40px;}

.right{
width:46%;
float: right;}
}

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

.mini{
width:30px;
margin-right:5px;
vertical-align:middle;}

.act{
background:#fff1cf;
margin:20px 10px;
padding:5px;
border:solid 1px #fddea5;
border-radius:10px;
}

.act2{
background:#fff1cf;
margin:10px;
padding:5px;
border:solid 1px #fddea5;
border-radius:10px;
overflow: hidden;}

.main{
margin:5px 5px 10px 25px;}

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

.text p{
font-size:11px;
line-height:150%;
color:#888;
background:#fff1cf;
margin:20px 10px;
padding:10px;
border:solid 1px #fddea5;
border-radius:10px;}

.top{
width:50px;
position:relative;
bottom:25px;}

.title{
text-align:center;}

.header{
background:#fff1cf;
padding:20px 0;
margin:0;}

.info{
padding:10px 0 0;
margin:30px 20px 10px;
border-top:double 3px #b22222;
}

strong{
font-weight:normal;
border-bottom:solid 1px #d9333f;
padding:1px 2px;
}

header{
background:#df7163;
padding:20px 0;
margin:0;
text-align:center;}

header a{
border-bottom:solid 1px #fff1cf;}

header a:hover{color:#fff1cf;}

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

h1{
font-family: XANO明朝;
color:#fff;
margin:10px 0;
padding:0;}

h2{
font-family: XANO明朝;
font-size:15px;
margin:0;
padding:0;}

h3{
font-family: XANO明朝;
color:#b22222;
font-size:24px;
margin:0 0 20px;
padding:0;
}

a{
color:#000;
text-decoration:none;
padding:0 3px;
border-bottom:solid 1px #d9333f;
}

a:hover{
color:#df7163;
border-bottom:none;
}

input[type],textarea{
height:80px;
width:95%;
font-family:"Arsenal","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#fff1cf;
border:solid 1px #fddea5;
margin:0;
padding:2px 5px;
border-radius:10px;
}

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

input[type=submit]{
height:auto;
width:50px;
cursor:pointer;
text-shadow:none;}

</style>

表紙

<header>
<img width="50px" src="##白い梅の花の画像URL##">
<h1>幸せの過去形</h1>
<a href="#名前変換url#">名前変換</a> | <a href="#">はじめに</a>
</header>

<div class="wrp">
<div class="wrp2">
<div class="act">
<h2><img class="mini" src="##赤い梅の花の画像URL##">悪い子ごっこ</h2>
<div class="main">
<a href="#">文章画面サンプル</a> / <a href="#">死ぬんだったら教えてよ</a> / <a href="#">遺産再生</a> / <a href="#">鳥のように翼広げて</a> / <a href="#">失うことはないの？</a> / <a href="#">まだ踊っていたいのよ</a> / <a href="#">愛の酷薄</a> / <a href="#">See you in hell!</a>
</div>
</div>

<div class="act">
<h2><img class="mini" src="##赤い梅の花の画像URL##">君がくれた全部を返すよ</h2>
<div class="main">
<a href="#">01</a> / <a href="#">02</a> / <a href="#">03</a> / <a href="#">04</a> / <a href="#">05</a> / <a href="#">06</a> / <a href="#">07</a> / <a href="#">08</a> / <a href="#">09</a> / <a href="#">10</a>
</div>
</div>
</div>

<div class="act2">
<div class="left">
<h2><img class="mini" src="##赤い梅の花の画像URL##">別離の音</h2>
<div class="main">
<a href="#">詩星</a> / <a href="#">一体どこの国から来たの？</a> / <a href="#">瞼のシャッターチャンス</a> / <a href="#">肺からさん</a> / <a href="#">お前の記憶に住みたい</a> / <a href="#">喝采と破滅</a> / <a href="#">愛しかない</a> / <a href="#">遺影証明写真</a> / <a href="#">見えない耳</a>
</div>
</div>

<div class="right">
<h2><img class="mini" src="##赤い梅の花の画像URL##">しらじら詐欺</h2>
<div class="main">
<a href="#">01</a> / <a href="#">02</a> / <a href="#">03</a> / <a href="#">04</a> / <a href="#">05</a> / <a href="#">06</a> / <a href="#">07</a> / <a href="#">08</a> / <a href="#">09</a> / <a href="#">10</a>
</div>
</div>
</div>
</div>

文章

名前変換