プリズムキラー

Prism killer

背景が下に行くにつれて薄い水色になります。
＜div class="menu"＞＜/div＞で囲んだ部分のリンクには背景がつきます。
文章画面は文章が目立つように白い背景にしています。
nextやprevをボタンみたいにしてみました。

また、文章画面のサンプルの文章は青空文庫のキプリング=ラデャードさまの世界怪談名作集から。お題はユリ柩さまからお借りしました。ありがとうございます。
素材はMaterialのBackground3より保存してください。

HEAD(css)

@import url(https://fonts.googleapis.com/css?family=Julius+Sans+One);

body{
margin:0;
padding:0;
font-size:13px;
color:#333;
line-height:2;
letter-spacing:2px;
font-family:'Julius Sans One',YuGothic,游ゴシック,Meiryo,メイリオ, sans-serif;
text-align:center;
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #FFFFFF),
color-stop(1, #F2FFFB));
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2FFFB 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2FFFB 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2FFFB 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2FFFB 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #F2FFFB 100%);
}

.all{
max-width:500px;
margin:5%;
margin-bottom:0;
}

.text{
max-width:500px;
margin:3% 5% 0 5%;
padding:5px 10px;
text-align:left;
background:#fff;
}

.title{
font-size:30px;
color:#000;
text-shadow:5px 5px #f1e8f9;
padding-bottom:20px;
}

.menu a{
font-size:11px;
background:url(#画像URL#);
background-size:200px;
text-shadow:none;
margin:0 3px;
padding:5px;
}

.menu a:hover{
color:#000;
background:none;
}

.list{
background:url(#画像URL#);
background-size:200px;
border:solid 5px #fff;
max-width:400px;
margin-top:20px;
padding:10px;
text-align:center;
}

.top{
background:url(#画像URL#) center center;
background-size:200px;
width:100%;
height:30px;
}

p{
margin:0;
padding:0;
color:#ccc;
font-size:10px;
text-align:center;
}

.button{
margin-bottom:10px;
line-height:1;
}

.button a{
display:inline-block;
letter-spacing:0;
text-shadow:none;
background:url(#画像URL#) center top;
background-size:50px;
width:30px;
font-size:10px;
line-height:10px;
padding:10px 0;
margin:0 5px;
border-radius:50%;
border:solid 2px #fff;
}

.button a:hover{
color:#000;
position:relative;
top:2px;
}

a{
text-decoration:none;
color:#000;
padding:0 3px;
text-shadow:2px 2px #e0fdfb;
transition: 0.5s;
 -ms-transform: 0.5s;
 -webkit-transform: 0.5s;
 -moz-transform: 0.5s;
 -o-transform: 0.5s;
}

a:hover{
color:#fee3f9;
text-shadow:none;
}

a:visited{
color:#555;
}

</style>

BODY(html)＃を半角にして使用してください。

「#エロ」のBL小説を読む
BL小説 BLove

- ナノ -