16.よんかく様

Long story

1.Ephemeral new
シリアス | 恋愛 | メイン更新

ぼろアパートのゴミ捨て場には、きみにあげたはずの美しい花束が咲いてたのです

2.水の理
ファンタジー | 完結済み

宇宙の磁力的に、きみと一緒にいられないなんて本当に変な話なんだよ

Series

1.虚言レポート
01 02 03 04 05 06 new

2.メタモルフォスの在りか
01 02 03 04 05 end

3.DISTANCE/CODE
01 02 03 04 05 06 07 08 09 10

Short story
錯覚の手助け / weekend fuzzy / 退廃理想郷 / そこに在っても、輪郭はぼやけていた / シャッ／ッハ / ｘｘ、本能が笑ってる / actigraphy

Since 2016/XX/XX~
1234567 access.

上のストライプの部分はCSSで実装しています。
トップの部分は、380pxより狭くなるとメニューがタイトルの下に来ます。
トップまたは小説とのことでしたので、おまけで小説機能も作らせていただきました。このデザインとおそろいです。

Title:ユリ柩さま

HEAD(CSS)

@import url(https://fonts.googleapis.com/css?family=Questrial|Monoton);

@font-face{
font-family:Fontpoにほんご;
src:url('https://cdn.leafscape.be/nihongo/FontopoNIHONGO_web.woff')
format("woff");
}

body{
margin:0;
padding:0;
font-size:11px;
color:#333;
line-height:2;
letter-spacing:2px;
font-family:'Questrial',Meiryo,メイリオ, sans-serif;
background:#fff;
text-align:left;
}

.top{
background:repeating-linear-gradient(-45deg,#fff 0,#fff 10px,#eee 10px,#eee 25px),#eee;
padding:10px;
}

.title{
font-family:'Monoton',Fontpoにほんご;
font-size:30px;
color:#000;
display:inline-block;
vertical-align:middle;
width:200px;
padding-left:20px;
}

.title_nvl{
font-family:'Monoton',Fontpoにほんご;
font-size:15px;
color:#000;
padding-left:20px;
}

.menu{
line-height:1.5;
width:110px;
display:inline-block;
vertical-align:middle;
padding:10px 10px 10px 20px;
}

.menu a{
border:none;
}

.menu a:hover{
color:#29C0E2;
}

.all,.all_nvl{
max-width:600px;
padding:30px 15px 5px 15px;
margin:0 auto;
}

.all_nvl{
font-size:13px;
}

.con{
background:url(#画像URL#) 50% 70%;
background-size:150px;
color:#fff;
font-size:20px;
padding:3px 5px;
}

.detail{
background:#f5f5f5;
padding:5px 10px;
}

a{
text-decoration:none;
font-size:12px;
color:#000;
border-bottom:solid 1px #ddd;
}

a:hover{
border-color:#29C0E2;
color:#ccc;
}

</style>

BODY(HTML)

<div class="top"><div class="title">Site title</div><div class="menu"><a href="">information</a>
<a href="">mail form</a>
<a href="">notebook</a>
<a href="">bookmark</a></div></div><div class="all"><span class="con">Long story</span>

1.<a href="">Title</a> <font color="#E9889F">new</font>
傾向 | ジャンル | 雰囲気
<div class="detail">ここに詳細。ここに詳細。ここに詳細。</div>
2.<a href="">タイトル</a>
傾向 | ジャンル | 雰囲気
<div class="detail">ここに詳細。ここに詳細。ここに詳細。</div>

<span class="con">Series</span>

1.タイトル
<a href="">01</a> <a href="">02</a> <a href="">03</a> <a href="">04</a> <a href="">05</a> <a href="">06</a> <font color="#E9889F">new</font>

2.タイトル
<a href="">01</a> <a href="">02</a> <a href="">03</a> <a href="">04</a> <a href="">05</a> <a href="">end</a>

3.TITLE
<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>

<span class="con">Short story</span>
<a href="">タイトル</a> / <a href="">タイトル</a> / <a href="">タイトル</a>

Since 2016/XX/XX~
1234567 access.</div>

<div class="top"><div class="title">内なる肉声</div><div class="menu"><a href="">attention</a>
<br><a href="">character</a></div></div><div class="all"><span class="con">第１章</span>
<br>ここに詳細。
<br><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> <a href="">11</a> <a href="">12</a> <a href="">13</a> <a href="">14</a>

<div class="top"><div class="title_nvl">#title#</div></div><div class="all_nvl">#text#</div><center>#prev_prev_# <a href="">top</a> #next_next_#</center>

素材+おまけ(リピート可能)