鯨の歌 - 朝の病

source code

・いよさん「#f6f6f6・#19283cと似たような色使い。画像の使用よりフォントやアイコンが凝っているもの。雰囲気は落ち着いているけど女の子らしいもの（見出しなどのデザインもあり）。」

自動改行“しない”で作成しています。
タイトル部分につきましては、文字数等の関係で崩れるおそれがあります。その場合、お手数ですが各自での改変をお願いします。

HEAD

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

@font-face
{
font-family: 自由の翼;
src: url('https://cdn.leafscape.be/JiyunoTsubasa/JiyunoTsubasa_web.woff')
     format("woff");
}

body{
font-family:"Open Sans","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#19283c;
background:#f6f6f6;
margin:0;
padding:0;
text-align:center;}

@media screen and (min-width: 601px){
.wrp{
width:600px;
margin:0 auto;}
}

@media screen and (max-width:600px){
.wrp{
width:100%;
margin:0 auto;}
}

header{
max-width:290px;
padding:15px;
margin:0 auto;
height:250px;}

.top{
width:180px;
height:180px;
border-radius:50%;
box-shadow: 18px 5px 0 5px #19283c;
margin:30px auto 20px;
position:relative;
right:20px;}

.menu{margin:0 20px 20px;}

.menu a{
display:inline-block;
width:50px;
color:#f6f6f6;
border:none;
background:#708090;
padding:2px 3px;
margin:0;}

.menu a:hover{
border:none;
position:relative;
bottom:2px;}

.info{
margin:20px;
text-align:left;}

.box{
background:#d4dcda;
margin:10px;
padding:10px;}

.box a{border-bottom:solid 2px #fff;}

strong{
font-weight:normal;
background:linear-gradient(transparent 50%, #d4dcda 0%);
padding:0 3px;
margin:0 1px;}

.ft{
max-width:290px;
border-top:double 3px #19283c;
margin:25px auto 20px;
padding:20px 10px 0;}

h1{
font-family:"Open Sans",自由の翼, sans-serif;
font-weight:normal;
font-size:30px;
margin:0 auto 10px;
padding:0;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
position:relative;
bottom:150px;
left:15px;
display:inline-block;}

h1 div{
display:inline-block;
position:relative;
right:10px;
bottom:10px;}

h1 p{
display:inline-block;
position:relative;
top:5px;
right:30px;}

h2{
font-family:"Open Sans",自由の翼, sans-serif;
font-weight:normal;
font-size:18px;
margin:20px auto;
padding:0;
border-top:double 5px #19283c;}

h2 p{
display:inline-block;
text-align:center;
position:relative;
bottom:12px;
left:20px;
background:#f6f6f6;
margin:0 auto -10px;
padding:0 10px;}

h3{
font-family:"Open Sans",自由の翼, sans-serif;
font-weight:normal;
border:double 3px #19283c;
display:inline-block;
margin-right:10px;
padding:1px 10px;
text-align:center;}

a{
color:#19283c;
text-decoration:none;
padding:0 3px;
border-bottom:solid 2px #ddd;
transition:0.5s;
}

a:hover{
border-bottom:solid 2px #708090;
position:relative;
bottom:1px;}

</style>

BODY

鯨
の
歌

information

midashi3

source code