Lunatic sign

・かなめもちさん「ダーク・ゴシック系の雰囲気。色味は白黒、アクセントで違う色を使っても可。画像はなるべくあり。」

自動改行“しない”で作成しています。
背景画像はBGroundERさんよりお借りしています。トップの花の画像はこちらからどうぞ。

HEAD

@import url('https://fonts.googleapis.com/css?family=Alegreya|Monsieur+La+Doulaise|Parisienne');

body{
font-family:"Alegreya","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#fff;
margin:0;
padding:0;}

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

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

#top{margin:5px 20px;}

header{
height:250px;
margin:0 auto;
padding:0;
width:100%;
color:#fff;
background:url(##背景画像URL##);
background-color:#000;
background-size:120px;
display:table;}

header div{
text-align:center;
vertical-align:middle;
display:table-cell;}

.menu{
width:100%;
height:28px;
border-top:solid 1px #000;
border-bottom:solid 1px #000;
background:#000;
margin:0 0 30px;
padding:0;}

.link{
max-width:600px;
margin:0 auto;
padding:0;
text-align:center;
text-transform:uppercase;}

.link li{
width:25%;
text-align:center;
display:inline;
float:left;}

.link li a{
padding:5px 10px;
margin:0;
color:#fff;
background:#000;
border:none;
display:block;
}

.link li a:hover{
background:#b22222;
color:#fff;
border:none;
}

.box{
margin:10px;
padding:15px;
border:double 3px #555;
}

strong{
font-weight:normal;
background:#000;
color:#fff;
padding:0 5px;
margin:0 3px;
}

footer{
color:#fff;
background:url(##背景画像URL##);
background-color:#000;
background-size:120px;
padding:0 0 20px;
margin:30px 0 0;
text-align:center;}

footer p{
background:#000;
margin:0 0 20px;
padding:5px;}

footer a{color:#fff;}

h1{
font-family:"Parisienne", sans-serif;
letter-spacing:-1px;
font-size:50px;
font-weight:normal;
color:#fff;
margin:0;
padding:50px 0 30px;}

h1:first-letter{
font-family:"Monsieur La Doulaise", sans-serif;
font-size:80px;}

h2{
font-weight:normal;
font-size:13px;
border:solid 1px #fff;
background:#000;
color:#fff;
box-shadow:0 0 0 2px #000;
margin:5px 20px 5px 0;
padding:2px 15px;
display:inline-block;}

h3{
color:#fff;
font-family:"Parisienne", sans-serif;
letter-spacing:-1;
font-size:24px;
font-weight:normal;
margin:0 0 20px;
padding:0 10px;
position: relative;
height:40px;
line-height:40px;
background: #000;
right:28px;
display:inline-block;
width:60%;}

h3:first-letter{color:#b22222;}

h3:before,h3:after {
content: '';
position: absolute;}

h3:before {
top: 100%;
left: 0;
border-width: 0 10px 10px 0;
border-style: solid;
border-color: transparent;
border-right-color: #b22222;}

h3:after {
top: 0;
right: 0;
z-index: 2;
border-width: 20px 15px;
border-style: solid;
border-color: transparent;
border-right-color: #fff;}

a{
color:#888;
text-decoration:none;
padding:0 3px;
transition:0.5s;}

a:hover{color:#b22222;}

</style>

BODY

◆ Attention

ranking