bookshelf | ナノ

Long

思考に溶け込んでいくよ
01純みたる心
02吐露する劣情
03PHANTOM OF LOVERS
04トランスペアレンシー
05ほとりの逢瀬

白線堂堂
01プリズムキラー
02オーロラを並べる
03レンタルディストピア
04去る脳

Short

小夜なら
兄弟は笑った
雄弁は罪でもある
誇れば水泡
リセットしよう星も水も
スクラップを拾った
都会のけもの

Series

息を潜めた観衆
01 02 03 04 05 06 end
誓いを立てよう
01 02 03
鏡を見てみなよ
01 02 03 04 04 05

Description

シンプルな小説分岐ページです。
レスポンシブデザインです。スマホから見ると1カラム、タブレットはサイズによりますが2カラム、PCからは3カラムになります。
ちょっとおしゃれに見えてればいいな、と思います。
上の丸はCSSで丸くしているので、丸い画像を用意する必要はありません。
お好きなようにカスタムしてみてください。初心者の方はこのまま使っていただくことをお勧めします。

お題はすべてユリ柩様からお借りしました。ありがとうございます。

Code

HEAD(CSS)

body{
 margin:3% 0;
 padding:3% 0;
 font-size:11px;
line-height:2;
letter-spacing:1px;
color:#000;
font-family:'Alegreya Sans',Meiryo, メイリオ, sans-serif;
background:#fff;
text-align:center;
}

.title{
font-family: 'Hammersmith One';
font-size:40px;
color:#333;
margin-bottom:20px;
}

.box{
width:280px;
padding:10px;
margin:10px;
text-align:left;
display:inline-block;
vertical-align:top;
}

.box a{
border-left:solid 3px #eee;
border-bottom:none;
padding:0 5px;
margin-left:5px;
}

.box span{
font-size:13px;
color:#444;
}

.maru1{
background:url(#画像URL#) center top;
background-size:100px;
width:50px;
height:50px;
border-radius:50%;
margin:0 auto;
}

.maru2{
background:url(#画像URL#) center top;
background-size:100px;
width:50px;
height:50px;
border-radius:50%;
margin:0 auto;
}

.maru3{
background:url(#画像URL#) center top;
background-size:100px;
width:50px;
height:50px;
border-radius:50%;
margin:0 auto;
}

.maru4{
background:#F0E0FF;
width:50px;
height:50px;
border-radius:50%;
margin:0 auto;
}

p{
font-family: 'Hammersmith One';
font-size:18px;
line-height:0;
border-bottom:solid 1px #f5f5f5;
letter-spacing:2px;
text-align:center;
}

a {
text-decoration:none;
color:#000;
border-bottom:solid 1px #eee;
}

a:hover {position:relative;
top:1px;
left:1px;
}

a:visited{
color:#444;
}

</style>

BODY(HTML)

Sozai