夢のさざめき

自動改行“しない”で作成しています。
背景画像はBg-Pattrensさまの三角の散布系パターン素材よりお借りしています。
見出し3につきましては幅を固定していますので、文字が長くなる場合はHRAD内のh3{～}部分のwidth:100pxの数字を変更してください。

HEAD

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

@font-face
{
font-family:"源ノ角ゴシック ExtraLight" ;
src: url('https://cdn.leafscape.be/SourceHanSansJP/SourceHanSansJP-ExtraLight_web.woff')
     format("woff");
}

body{
font-family:"Dosis","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#241a08;
background:url(##背景画像URL##);
margin:0;
padding:0;}

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

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

.top{
text-align:center;
border:solid 1px #000;
background:rgba(0,0,0,.8);
color:#fff;
margin:30px auto;
padding:5px;
width:80px;
}

.top a{background:none;}

.con{
text-align:left;
background:rgba(0,0,0,.7);
color:#fff;
margin:30px 25px 20px;
padding:15px;
border:solid 1px #fff1cf;
box-shadow:0 0 0 5px rgba(0,0,0,.7);
-webkit-box-shadow:0 0 0 5px rgba(0,0,0,.7);
-moz-box-shadow:0 0 0 5px rgba(0,0,0,.7);}

.con a{
background:none;
border-bottom:dashed 1px #ffa07a;}

.con a:hover{border:none;}

.box{
color:#fff;
border:solid 2px #cee4ae;
margin:10px 5px;
padding:10px;}

strong{
font-weight:normal;
text-decoration:underline;
color:#cee4ae;}

h1{
color:#fff;
font-family:"Dosis",源ノ角ゴシック ExtraLight,sans-serif;
font-weight:normal;
font-size:30px;
margin:10px auto;
padding:0 0 15px;
border-bottom:dashed 1px #fff;
line-height:100%;
text-align:right;
writing-mode:tb-rl;
writing-mode:vertical-rl;
-moz-writing-mode:vertical-rl;
-o-writing-mode:vertical-rl;
-webkit-writing-mode:vertical-rl;
display:inline-block;}

h1 p{
font-family:"Dosis","メイリオ", sans-serif;
margin:0;
padding:0;
font-size:13px;}

h2{
font-family:"Dosis",源ノ角ゴシック ExtraLight,sans-serif;
font-size:18px;
margin:5px auto 10px;
padding:3px;
border-bottom:dashed 1px #fff1cf;
line-height:100%;}

h2 p{
color:#ffa07a;
margin:0;
transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-webkit-transform:rotate(-10deg);
display:inline-block;}

h3{
font-family:"Dosis",源ノ角ゴシック ExtraLight,sans-serif;
font-size:13px;
margin:5px 0;
padding:2px 5px;
color:#fff;
border-bottom:dashed 1px #fff;
width:100px;}

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

a{
color:#fff1cf;
text-decoration:none;
padding:0 3px;
margin:5px;
transition:0.5s;
background:rgba(0,0,0,.8);
}

a:hover{
color:#ffa07a;
text-decoration:none;
}

</style>

BODY

夢のさざめき
初回 書庫 手紙

は
じめに

見出し3

夢のさざめき 初回 書庫 手紙

はじめに

見出し3

夢のさざめき
初回書庫手紙

は
じめに