傾国水晶 | ナノ

当サイトのデザインです。
きらきらした感じのものを作りたくてこんな感じに。
テンプレート配布ページのデザインも希望される方がおりましたので付加しました。
このページデザインのみ横幅が816pxになっていますので、ご注意ください。
＜span class="ma"＞＜/span＞で囲むとこんな感じです。
＜span class="mi"＞＜/span＞で囲むとこんな感じです。

シンプルなので改変はしやすいかと思われます。背景画像を変えるだけで印象が変わるのでお好きなように改変してみてください。
素材は自作です。背景画像はMaterialのBackground3から、女の子はショウジョから保存してください。

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

HEAD(css)

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

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

body{
margin:3%;
padding:3%;
font-size:11px;
color:#333;
line-height:2;
letter-spacing:2px;
font-family:'Julius Sans One',YuGothic,游ゴシック,Meiryo,メイリオ, sans-serif;
background:#fff;
text-align:center;
}

.all{
max-width:600px;
text-align:left;
margin-top:20px;
}

.title{
font-family:'Julius Sans One',刻明朝,"ヒラギノ明朝 Pro W3" ,'游明朝',MS 明朝,HGP明朝B;
font-size:30px;
line-height:1;
padding:0 10px;
background:url(#画像URL#) left top;
background-size:300px;
margin-bottom:15px;
color:#000;
}

.title-2{
font-size:25px;
line-height:2;
background:url(#画像URL#) left top;
background-size:300px;
margin-bottom:15px;
color:#000;
}

.menu{
margin:15px 0;
width:100%;
}

.menu a{
color:#222;
font-size:15px;
line-height:10px;
margin:0 2px;
letter-spacing:1px;
padding:0 2px;
background:url(#画像URL#) right bottom;
background-size:250px;
}

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

.mi{
background:url(#画像URL#) left top;
background-size:300px;
color:#000;
font-weight:bold;
padding:3px 5px;
font-size:13px;
font-family:'Julius Sans One',刻明朝;
border-radius:3px;
}

.ma{
background:#eee;
padding:2px 5px;
}

.link-box textarea{
background:url(#画像URL#) left top;
background-size:300px;
color:#000;
font-size:12px;
line-height:1;
padding:5px 0;
height:15px;
text-shadow:0 0 2px #fff,
0 0 2px #fff;
font-weight:bold;
font-family:'Julius Sans One',刻明朝,YuGothic,游ゴシック,Meiryo,メイリオ, sans-serif;
border:none;
width:100%;
}

.temp{
max-width:816px;
height:auto;
}

p{
font-family:'Julius Sans One',刻明朝,"ヒラギノ明朝 Pro W3" ,'游明朝',MS 明朝,HGP明朝B;
font-size:14px;
color:#000;
letter-spacing:1px;
text-align:center;
display:inline;
text-shadow:3px 3px #eee;
}

.box{
width:180px;
height:auto;
padding:5px;
margin:5px;
border:solid 2px #f5f5f5;
border-radius:3px;
background:#fff;
font-size:10px;
color:#B0C4DE;
display:inline-block;
}

.box img{
width:60px;
height:60px;
border-radius:50%;
}

.box a{
background:#f7f7f7;
border-radius:3px;
padding:3px 5px;
color:#000;
text-shadow:none;
}

.box a:hover{
background:url(#画像URL#) right bottom;
background-size:150px;
color:#000;
}

.pict{
width:80px;
height:80px;
border-radius:50%;
border:solid 3px #ddd;
line-height:1;
}

.text{
padding:10px;
margin:0 5px;
background:#fff;
}

.bg{
background:url(#画像URL#) right top;
background-size:200px;
margin:5px 20px 0 20px;
}

.tuiki a{
font-family:'Julius Sans One',YuGothic,游ゴシック,Meiryo,メイリオ, sans-serif;
float:right;
font-size:10px;
background:url(#画像URL#) left top;
background-size:200px;
color:#000;
line-height:1;
padding:0 5px;
}

.date{
background:#eee;
color:#000;
font-weight:bold;
padding:3px 5px;
font-size:13px;
border-radius:3px;
}

textarea,input[type="text"],input[type="submit"]{
letter-spacing:1px;
background:#fff;
border:solid 1px #eee;
font-family:'Julius Sans One',YuGothic,游ゴシック,Meiryo,メイリオ, sans-serif;
padding:10px;
width:100%;
}

textarea{
display:block;
height:110px;
line-height:1.5;
}

input[type="submit"]{
box-shadow:none;
background:url(#画像URL#) right bottom;
background-size:250px;
width:40px;
text-align:center;
float:right;
font-size:10px;
line-height:10px;
padding:15px 0;
font-weight:bold;
display;inline-block;
border-radius:50%;
}

a{
text-decoration:none;
color:#000;
padding:0 3px;
text-shadow:2px 2px #F1E6FA;
}

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

a:visited{
color:#777;
}
</style>

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

<img src="#女の子の画像URL#"width="150"/>
<font color="#333333">This site is ×× site.</font><div class="menu"><a href="">information</a><a href="">main</a><a href="">XX/XX</a><a href="">love</a></div><font style="color:#bbbbbb;font-size:10px;letter-spacing:1px;">Thanks 123456. Last up-2015/XX/XX.</font>
<a href="">Rank</a> / <a href="">Rank</a> / <a href="">Rank</a>

<center><span class="title-2">Information</span><div class="all">当サイトは<span class="ma">□□を扱う××サイト</span>です。
管理人の趣味嗜好に突っ走っております。ご注意ください。
当サイト内の<span class="ma">作品の著作権はすべて管理人nonameにあります。</span>荒らし・晒し・転載はご遠慮ください。

検索除け済みサイト様のみリンクフリーです。<div class="link-box"><form action="."><textarea><a href="http://nanos.jp/yourID/">サイト名</a>＜/textarea＞</form></div>
<span class="mi">Master</span>
noname
きらきらしてるものが好き。
(<a href="">mail</a>/<a href="">res</a>)</div></center>

<center><span class="title-2">Contents</span>
<font style="color:#bbb;font-size:10px;">読み物とかいろいろ。</font>
[ log /<a href="">project</a>]

<div class="temp"><div class="box"><p>Title</p>
#画像#
×××
<a href="">See?</a>
</div><div class="box"><p>Title</p>
#画像#
×××
<a href="">See?</a>
</div><div class="box"><p>タイトル</p>
#画像#
×××
<a href="">See?</a>
</div><div class="box"><p>タイトル</p>
#画像#
×××
<a href="">See?</a>
</div>

×××に説明とか更新履歴とかを載せてみたらいいかもしれない。</div></center>

<center><span class="title-2">Bookmark</span><div class="all">いつもお世話になっています。敬称略。
<a href="">Site name</a>より愛をこめて。
(あ-ん,a-z,0-9)

<span class="mi">Thanks</span>
<a href="">Site name</a> / <a href="">Site name</a> / <a href="">Site name</a> / <a href="">Site name</a></div></center>

<center>#blog#</center>

<span class="title-2">Notebook</span><div class="all">

<span class="date">#date#</span><div class="bg"><div class="text">#text#
<p class="tuiki">#ext_追記#</p></div></div>
<center><font style="color:#F1E6FA;font-size:10px;">◆ ◆ ◆</font></center></div>

#prev_newer_# #next_older_#

<center>#form#</center>

<span class="title-2">Mail form</span>
<font color="#777777">ご意見ご感想などございましたら気軽にどうぞ。
誹謗中傷などはご遠慮ください。
</font><div class="all">#error#
#form#</div>

人気急上昇中のBL小説
BL小説 BLove

- ナノ -