Yamada Hanako山田花子

「何か一言などあれば」

性別
女性
職業
○○
年齢
○○歳
誕生日
○月○日
星座
○○座

容姿

長文用スペース。詳細な設定を書いたりいろいろ。

性格

　海のおきへ、遠く遠く出ていきますと、水の色は、いちばん美しいヤグルマソウの花びらのようにまっさおになり、きれいにすきとおったガラスのように、すみきっています。けれども、そのあたりは、とてもとても深いので、どんなに長いいかり綱づなをおろしても、底まで届くようなことはありません。海の底から、水の面おもてまで届くためには、教会の塔とうを、いくつもいくつも、積みかさねなければならないでしょう。そういう深いところに、人魚たちは住んでいるのです。
「人魚の姫」ハンス・クリスチャン・アンデルセン／青空文庫

ソースコード

自動改行「しない」で作成。
プロフィールページのテンプレが少ないと聞いてぼんやり作ってみました。
背景画像を変えるだけでも随分雰囲気が変わると思います。
同じ枠組みのバージョン違い→ エレガント／ポップ／カラー

アイコン枠→パブリックドメインのものを利用しています。
こちらからDLしてお使いください。

背景素材→Bg-patterns様
「斜めのストライプパターンその3」

HEAD

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}
hr { height: 0; margin: 0; padding: 0; border: 0;}

body{
background: url(#背景画像URL#) repeat;
font-family: 'Playfair Display', 'Noto Serif JP', serif;
font-size:0.85em;
line-height:1.5;
margin: 0;
padding: 0;
}

a{
text-decoration:none;
color: #999;
}

.wrp{
background: #fff;
width: 90%;
max-width: 600px;
margin: 0 auto;
padding: 10px;
}

header{
font-family: 'Great Vibes', 'Klee One';
font-size:1.2em;
text-align: center ;
margin: 50px auto 20px;
}
.icon{
position: relative;
width: 100px;
margin: 20px auto;
}
.icon::after {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: 140px;
height: 140px;
background: url(#アイコン枠画像URL#);
filter: invert(50%) sepia(0%) saturate(11%) hue-rotate(143deg) brightness(101%) contrast(93%);
background-size:cover;
}
hr {
height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent));
background-image: linear-gradient(to right, transparent, #ccc, transparent);
}

h1{
font-size:2.5em;
color: #ccc;
font-weight:400;
position: relative;}

h1 span{
font-size: 0.6em;
color:#000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);}

h2{
font-size:1.5em;
text-shadow: 0px 0px 3px #666;
margin: 0.2em 1.2em;
}

ul{
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
text-align: center;
}
li {
width: 125px;
padding-bottom: 1em;
margin: 5px 20px;
}
li > div {
padding: 0.2em 1em;
margin-bottom: 0.5em;
background: #fff;
border-radius: 4px;
box-shadow: 0 0 5px #ccc;
}

section{
margin: 0 15px 2em; 
}

.text{
adding-right: 1.5em;
padding-left: 1.5em;
line-height: 2em;
background-image: linear-gradient(transparent 0, transparent 97%, #ccc 100%);
background-size: 100% 2em;
}

footer{
font-family: 'Klee One';
text-align: center ;
margin: 50px auto 20px;
}
</style>

BODY