4 | ナノ

素材とタイトルは星食さまからお借りいたしました。(texture 02)
個人的に好きな色合いで作れました。
＜p class="sub"＞＜/p＞はあまり長いタイトルだと形が崩れてしまうので一行に収まる長さにしてください。
＜span class="mi"＞＜/span＞で囲むとこんな感じです。＜span class="ma"＞＜/span＞で囲むとこんな感じです。＜span class="sp"＞＜/span＞で囲むとこんな感じです。

HEAD(CSS)

@import url(https://fonts.googleapis.com/css?family=Amiri|Dancing+Script);

body{
margin:5% 0;
padding:5% 0;
font-size:11px;
color:#222;
line-height:2;
letter-spacing:2px;
font-family:'Amiri',Meiryo, メイリオ, sans-serif;
background:#fff;
}

.all{
max-width:700px;
padding:0 20px;
margin:0 5px;
border:solid 5px #F1F1EC;
border-top:none;
border-bottom:none;
text-align:left;
}

.top{
max-width:220px;
}

.top a{
font-size:20px;
line-height:20px;
border:none;
color:#fff;
font-family:'Dancing Script';
font-weight:bold;
letter-spacing:0;
padding:0;
margin:0;
}

.top a:hover{
color:#555;
}

.box,.box2,.box3,.box4{
background:#F2E8ED;
background-size:160px;
width:100px;
margin:5px;
padding:40px 0;
border-radius:50%;
display:inline-block;
vertical-align:top;
z-index:2;
}

.box2{
background:url(#画像URL#) center center no-repeat;
background-size:250px;
}

.box3{
background:url(#画像URL#) left top no-repeat;
background-size:300px;
}

.box4{
background:#E4ECEF;
}

.title{
font-family:'Dancing Script';
font-size:35px;
color:#333;
line-height:30px;
letter-spacing:0;
display:inline;
margin:0;
padding:0;
vertical-align:bottom;
}

.sub,.sub2,.sub3,.sub4{
background:url(#画像URL#) center center no-repeat,#49afdb;
background-size:400px;
width:150px;
font-size:25px;
font-weight:bold;
line-height:30px;
letter-spacing:0;
color:#fff;
padding:60px 0;
font-family:'Dancing Script';
border-radius:50%;
}

.sub2{
background:url(#画像URL#) right top;
background-size:400px;
color:#000;
text-shadow:1px 1px #fff,
1px -1px #fff,
-1px 1px #fff,
-1px -1px #fff;
}

.sub3{
background:url(#画像URL#) center top;
background-size:500px;
}

.sub4{
background:url(#画像URL#) left top;
background-size:400px;
color:#000;
text-shadow:1px 1px #fff,
1px -1px #fff,
-1px 1px #fff,
-1px -1px #fff;
}

.link textarea{
width:100%;
height:22px;
border:none;
line-height:15px;
font-family:'Amiri',Meiryo, メイリオ, sans-serif;
}

.blog{
background:#F1F1EC;
padding:5px;
margin:5px;
margin-bottom:20px;
color:#000;
border-radius:3px;
}

.blog a{
border:none;
color:#92255b;
}

.ma{
color:#1d4f7f;
background:#F1F1EC;
padding:0 3px;
}

.mi{
background:linear-gradient(-45deg,#92255b 50%,#1d4f7f 0%);;
color:#fff;
padding:2px 10px;
border-radius:3px;
}

.sp{
color:#D4D4CC;
font-size:11px;
}

a{
text-decoration:none;
color:#000;
font-size:11px;
border-bottom:solid 3px #F1F1EC;
margin:0 5px;
}

a:hover{
border:none;
color:#90908C;
}

input[type="text"],textarea{
background:#F1F1EC;
color:#000;
padding:1%;
width:98%;
line-height:1.5;
letter-spacing:2px;
font-family:'Amiri',Meiryo, メイリオ, sans-serif;
border:none;
border-radius:3px;
}

textarea{
display:block;
height:100px;
}

input[type="submit"]{
box-shadow:none;
background:url(#画像URL#) center center no-repeat,#49afdb;
background-size:100px;
width:40px;
text-align:center;
font-size:10px;
line-height:10px;
padding:15px 0;
font-weight:bold;
font-family:'Dancing Script';
display;inline-block;
border-radius:50%;
border:none;
color:#fff;
}

</style>

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

<center><div class="top"><div class="box"><a href="">Info</a></div><div class="box2"><a href="">Main</a></div>
<div class="box3"><a href="">Note</a></div><div class="box4"><a href="">Love</a></div>
<div class="title">Anti Ambivalence</div>
<span class="sp">http://nanos.jp/yourID/</span></div></center>

<center><p class="sub">Information</p><div class="all">ここは××を扱う○○サイトです。
当サイト内の作品の<span class="ma">著作権はすべて管理人ナナシにあります。</span>
荒らし・晒し・転載はご遠慮ください。
細かい規約は<a href="">main</a>からどうぞ。

<span class="mi">Master</span>
ナナシ
間色が好きです
Thanks 123456 access.
【<a href="">mail</a> / <a href="">res</a>】

<span class="mi">Link</span>
リンクフリーです。お好きに貼りはがし下さい。
<span class="link"><form action="."><textarea><a href="http://nanos.jp/yourID/">サイト名</a>＜/textarea＞</form></span></div></center>

<center><p class="sub2">Main contents</p><div class="all">好きに書き散らしています。閲覧は自己責任です。

<span class="mi">Long story</span>
●<a href="">タイトル</a>
<span class="sp">説明など</span>
●<a href="">タイトル</a>
<span class="sp">説明など</span>
●<a href="">タイトル</a>
<span class="sp">説明など</span>

<span class="mi">Short story</span>
<a href="">タイトル</a> <a href="">タイトル</a> <a href="">タイトル</a> <a href="">タイトル</a> <a href="">タイトル</a> <a href="">タイトル</a> <a href="">タイトル</a></div></center>

<center><p class="sub3">Notebook</p>

<div class="all"><span class="mi">2016/XX/XX</span><div class="blog">
<a href="">…more</a></div>

<center>【<a href="">prev</a> <a href="">top</a> <a href="">next</a>】</center></div></center>

<center><p class="sub4">Mail form</p><div class="all">ご意見ご感想など気軽にお聞かせください。
<br><span class="ma">誹謗中傷などはご遠慮ください。</span>
#error#
<br>#form#</div></center>