アンハッピーサイレンス

Unhappy
silence

Information

ここは○○を扱う◇◇サイト。わからない・嫌悪感を抱く人はブラウザバック。
また当サイト内の作品の著作権はすべて管理人ナナシにあります。
荒らし・晒し・転載はご遠慮ください。
:main
:blog
:bookmark
:mail form

Thanks 123456 hit.
since 2016.XX.XX～

Master

ナナシ
成人済みです。
これこれこんなものが好きです。

Link

検索除け済サイト様のみリンクフリーです。

Description

いつもと違う感じのテンプレにしてみたくてこんな感じになりました。ちょっと大人っぽい気がします。
レスポンシブデザインになっていますので、横幅が1000px未満(タブレットやスマホ)だと＜div class="sub"＞＜/div＞の部分が下に来るようになっています。
素材はPhoto+から保存してください。
もっとさっぱりさせたい人は写真を使わなかったりストライプやドットなどの素材にしても良いと思います。
別バージョンはこちら

Title:心眼さま
Icon font:Font Awesomeさま
和文フォント:Leafscapeさま

Source

HEAD(css)

@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Codystar);

@font-face{
font-family:刻明朝;
src: url('https://cdn.leafscape.be/kokumin/font_1_kokumr_1.00_rls_web.woff')
format("woff");
}

body{
margin:0;
padding:0;
font-size:12px;
color:#555;
line-height:2;
letter-spacing:2px;
font-family:'Alegreya Sans SC',YuGothic,游ゴシック,Meiryo,メイリオ, sans-serif;
background:#fff;
text-align:center;
}

@media screen and (min-width:999px){
.main{
width:61%;
margin:2% 2% 0 2%;
display:inline-block;
text-align:left;
vertical-align:top;
}

.sub{
width:31%;
margin:2% 2% 2% 0;
display:inline-block;
text-align:left;
vertical-align:top;
}
}

@media screen and (max-width:1000px){
.main{
width:92%;
margin:4% 4% 0 4%;
text-align:left;
}

.sub{
width:92%;
margin:0 2%;
padding:2%;
text-align:left;
}
}

.top{
background:url(#画像URL#) center bottom;
background-size:cover;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
text-align:center;
}

.title{
font-family:'Codystar',刻明朝,sans-serif;
font-size:55px;
font-weight:bold;
color:#fff;
line-height:1.1;
padding-top:40px;
text-shadow:0 0 7px #000,0 0 7px #000;
}

.icon{
padding-bottom:40px;
}

.icon a{
width:27px;
margin:10px;
padding:5px 0 5px 3px;
color:#fff;
font-size:20px;
line-height:20px;
display:inline-block;
background:#C3E4E1;
border:solid 3px #C3E4E1;
border-radius:50%;
}

.icon a:hover{
color:#C3E4E1;
background:#07627C;
border:solid 3px #cadeda;
}

.box{
width:100%;
background:#fff;
border-radius:7px;
border:dotted 1px #ddd;
border-bottom:solid 3px #eee;
margin-bottom:4%;
vertical-align:top;
}

.box i{
color:#C3E4E1;
font-size:12px;
padding:0 5px;
}

.sub .box{
font-size:11px;
}

.text{
padding:10px;
}

.plus{
text-align:right;
color:#aaa;
border-top:dotted 2px #ddd;
}

.prof{
height:80px;
float:left;
margin-right:4%;
}

.box-title{
color:#07627C;
font-size:15px;
line-height:2;
background:#eee;
padding:0 7px;
border-radius:7px 7px 0 0;
}

.box-title i{
color:#fff;
font-weight:bold;
}

textarea{
background:#fff;
border:solid 2px #eee;
color:#C3E4E1;
font-family:'Alegreya Sans SC',刻明朝,sans-serif;
letter-spacing:1px;
line-height:1.1;
width:100%;
height:30px;
}

a{
text-decoration:none;
color:#07627C;
padding:0 3px;
border-bottom:solid 2px #eee;
transition:0.4s;
-ms-transform:0.4s;
-webkit-transform:0.4s;
-moz-transform:0.4s;
-o-transform:0.4s;
}

a:hover{
color:#C3E4E1;
}

</style>

BODY(html) ＜/textarea＞を半角にして使用してください。

<div class="top"><div class="title">Site
title</div><div class="icon"><a href=""><i class="fa fa-cubes"></i></a><a href=""><i class="fa fa-pencil"></i></a><a href=""><i class="fa fa-star"></i></a><a href=""><i class="fa fa-envelope"></i></a></div></div><div class="main"><div class="box"><div class="box-title"><i class="fa fa-star"></i>Information</div><div class="text">ここは○○を扱う◇◇サイト。わからない・嫌悪感を抱く人はブラウザバック。
また当サイト内の作品の著作権はすべて管理人ナナシにあります。
荒らし・晒し・転載はご遠慮ください。
<i class="fa fa-cubes"></i>:main
<i class="fa fa-pencil"></i>:blog
<i class="fa fa-star"></i>:bookmark
<i class="fa fa-envelope"></i>:mail form
<div class="plus">Thanks 123456 hit.
since 2016.XX.XX～</div></div></div></div><div class="sub"><div class="box"><div class="box-title"><i class="fa fa-star-o"></i> Master</div><div class="text"><img src="#画像URL#"class="prof"/>ナナシ
成人済みです。
これこれこんなものが好きです。</div></div><div class="box"><div class="box-title"><i class="fa fa-star-o"></i> Link</div><div class="text">検索除け済サイト様のみリンクフリーです。<form action="."><textarea><a href="http://nanos.jp/yourID/">サイト名</a>＜/textarea＞</form></div></div></div>

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

- ナノ -