燈火の眠り - 朝の病

最終更新

三月十六日 : ○○○○○更新

必読

ソースはこちらからどうぞ。ここはサイトの趣旨や注意事項などご自由に使用してください。メニューリンク以外のリンクはこうなります。<strong>～</strong>で強調線が引かれます。

・きよのさん「赤系の和風なトップページ。素材有り。」

自動改行“しない”で作成しています。
画像ははながら屋さまより、JAPANESE→WALLPAPER→27ピンクの■からお借りしています。
HEAD

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

@font-face
{
font-family: IPAex明朝;
src: url('https://cdn.leafscape.be/IPAexfont/ipaexm_web.woff')
     format("woff");
}

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

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

.top{
position:relative;
overflow:hidden;
margin:-100px 0 10px;
padding:0px;
}

.top:before {
content: '';
position: absolute;
top:0;
left:0;
width:120%;
height:130px;
margin:0 -10% 0;
background:url(##画像URL##);
background-size:100px;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
z-index: -1;
border:solid 20px #800000;
box-shadow: 0 0 0 5px #d9a62e;
-webkit-box-shadow: 0 0 0 5px #d9a62e;
-moz-box-shadow: 0 0 0 5px #d9a62e;
}
 
.top:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height:140px;
margin:20px -10% 0;
background:#000;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: -2;
}

.contents{
margin: 0 auto;
padding:250px 20px 20px;
color:#000;
}
}

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

.top{
position:relative;
overflow:hidden;
margin:-45px 0 10px;
padding:0px;
}

.top:before {
content: '';
position: absolute;
top:0;
left:0;
width:120%;
height:60px;
margin:0 -10% 0;
background:url(##画像URL##);
background-size:100px;
-webkit-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
z-index: -1;
border:solid 20px #800000;
box-shadow: 0 0 0 5px #d9a62e;
-webkit-box-shadow: 0 0 0 5px #d9a62e;
-moz-box-shadow: 0 0 0 5px #d9a62e;
}
 
.top:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 120%;
height:80px;
margin:20px -10% 0;
background:#000;
-webkit-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
z-index: -2;
}

.contents{
margin: 0 auto;
padding:150px 20px 20px;
color:#000;
}
}

.menu{
text-align:center;
margin:5px 10px 0;}

.menu a{
display:inline-block;
background:#800000;
color:#fff;
border:solid 1px #d9a62e;
box-shadow: 0 0 0 1px #800000;
-webkit-box-shadow: 0 0 0 1px #800000;
-moz-box-shadow: 0 0 0 1px #800000;
padding:5px 3px;
margin:0 5px 50px;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
height:50px;}

.menu a:hover{
background:#fff;
color:#752100;
border:solid 1px #d9a62e;}

.info{
margin:5px 10px 10px;}

.box{
margin:10px;
padding:10px;
border:double 3px #d69090;
box-shadow:0 0 0 1px #d9a62e;}

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

h1{
display:inline-block;
color:#800000;
font-family:IPAex明朝, sans-serif;
font-weight:normal;
font-size:24px;
margin:5px 20px 20px;
padding:0 5px 5px;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;}

h1:first-letter{
color:#fff;
background:#b7282e;
width:50px;
height:50px;
border-radius:50%;}

h2{
color:#000;
font-family:IPAex明朝, sans-serif;
font-weight:normal;
font-size:15px;
margin:5px 0;
padding:0 5px;
border-left:solid 5px #800000;
box-shadow:-2px 0 0 0 #d9a62e;}

h3{
color:#000;
font-family:IPAex明朝, sans-serif;
font-weight:normal;
font-size:15px;
margin:5px;
padding:0 5px;
border:solid 2px #d9a62e;
display:inline-block;}

a{
color:#000;
text-decoration:none;
padding:0 3px;
border-bottom:solid 1px #ba2636;
transition:0.5s;
}

a:hover{
border-bottom:dashed 1px #ba2636;}

</style>

BODY

- ALICE+ -