鮮やかに散った記憶ソースコード

自動改行“しない”で作成しています。
素材画像はFrame Designさんの外枠有アラビアフレームよりお借りしております。
独自タグ部分は各自で書き換えください。

HEAD

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

@font-face
{
font-family: はれのそら明朝;
src: url('https://cdn.leafscape.be/Harenosora/harenosora_web.woff2')
  format("woff2");
}

body{
font-family:"Alegreya","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#b0c4de;
margin:0;
padding:0;}

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

.wrp2{
width:600px;
margin:0 auto;}
}

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

.op{
padding:50px 0 30px;
background:#fff;
border-bottom:double 5px #b0c4de;}

.op a{
color:#164a84;
padding:0 5px;
border-bottom:solid 1px #c5c1c0;
}

.op a:hover{
color:#b0c4de;
border-bottom:solid 1px #eee;
}

.top{
margin:20px;
padding:0;
}

.act{
margin:20px 10px 0;
padding:0 10px 10px;
border:double 3px #fff;
}

.tp{
margin:30px 0 10px;
padding:15px 0;
background:#fff;
border-top:double 5px #b0c4de;
border-bottom:double 5px #b0c4de;}

.text{
font-size:13px;
letter-spacing:2px;
margin:20px;
}

.text p{
color:#555;
font-size:11px;
letter-spacing:1px;
margin:20px 10px;
padding:10px;
border:double 3px #c5c1c0;
}

.ft{
max- width:250px;
margin:0 auto 20px;
text-align:center;}

.ft a{
color:#164a84;
background:rgba(255,255,255,.8);
text-decoration:none;
padding:0 3px;
}

a:hover{background:none;}

header{
width:290px;
height:auto;
background:url(##画像URL##) no-repeat;
background-size:290px;
background-position:center;
margin:0 auto;
padding:0;}

h1{
font-family:Alegreya,はれのそら明朝, sans-serif;
font-weight:normal;
font-size:20px;
margin:0 auto;
padding:0 25px;
background:#fff;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;}

h2{
font-family:Alegreya,はれのそら明朝, sans-serif;
font-weight:normal;
font-size:14px;
margin:0 10px;
padding:0 10px;
color:#fff;
background:#b0c4de;
position:relative;
bottom:10px;
display:inline-block;}

h3{
font-family:Alegreya,はれのそら明朝, sans-serif;
font-weight:normal;
font-size:14px;
margin:30px 20px;
padding:2px 0;
text-align:center;}

a{
color:#164a84;
text-decoration:none;
padding:0 3px;
}

a:hover{background:rgba(255,255,255,.8);}

input[type],textarea{
height:60px;
width:90%;
font-family:"Alegreya","游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", serif; sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#b0c4de;
color:#000;
border:solid 1px #b0c4de;
margin:5px;
padding:3px 5px;
-webkit-appearance: none;
border-radius:0;
box-shadow:none;
}

input[type=text]{
height:auto;
width:80px;}

input[type=submit]{
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #555;
background:#555;
color:#fff;
font-weight:normal;
}

</style>

表紙

文章

名前変換