星の由緒ソースコード

・ニコ騒ぎさん「小説一覧と本文（背景白で本文は指定なし）。画像はなしで、シンプルな感じ。」

自動改行“しない”で作成しています。
スマホからは一列、幅の広いデバイスから見ると二列になっています。

HEAD

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

@font-face
{
font-family:和田研中角ゴシック;
src: url('https://cdn.leafscape.be/wadalab/wadalab-nakakakugo_web.woff')
     format("woff");
}

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

@media screen and (min-width: 701px){
.wrp{
width:700px;
margin:0 auto;
overflow: hidden;}

.left{
width:45%;
float:left;
padding:0 15px;
margin:20px auto;}

.right{
width:45%;
float:right;
padding:0 15px;
margin:20px auto;}
}

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

.left{
padding:0 15px 10px;
margin:20px;}

.right{
padding:0 15px;
margin:20px;
}
}

.top{
margin:20px 20px 0;
text-align:center;}

.name{
margin-bottom:10px;}

.name a{
background:#ffdb4f;
border:solid 2px #ffdb4f;
padding:1px 3px;}

.name a:hover{
background:none;}

.box{
border:solid 2px #efefef;
padding:20px 10px 10px;
font-size:11px;
margin:-20px 10px 20px;}

.text{
line-height:200%;
font-size:13px;
padding:30px 0 10px;
margin:20px;
text-align:left;}

.text p{
line-height:150%;
border:solid 2px #efefef;
margin:10px;
padding:10px;
font-size:10px;
}

header{
height:30px;
background:linear-gradient(-135deg,#2a4073 6px,transparent 0) 0 6px,linear-gradient(135deg,#2a4073 6px,#fff 0) 0 6px;
background-color:#2a4073;
background-position:left bottom !important;
background-repeat:repeat-x !important;
background-size:12px 12px;}

.ft{
margin:20px 0 10px;
text-align:center;}

.ft a{
background:#ffdb4f;
border:solid 2px #ffdb4f;
padding:1px 3px;}

.ft a:hover{
background:none;}

h1{
font-family:Varela Round,和田研中角ゴシック,sans-serif;
line-height:60%;
font-weight:normal;
color:#000;
margin:20px auto;
padding:0 20px 10px;
text-align:center;
border-top:double 5px #ffdb4f;
border-bottom:double 5px #ffdb4f;
display:inline-block;}

h1 p{
text-align:center;
background:#fff;
font-size:13px;
color:#ffdb4f;
padding:0 5px;
margin:0 auto;
display:inline-block;
position:relative;
bottom:12px;}

h2{
text-align:center;
color:#000;
border-top:double 5px #2a4073;
font-weight:normal;
font-size:18px;
margin:30px 0 0;
padding:0;}

h2 p{
display:inline-block;
background:#fff;
padding:0 10px;
margin:0;
position:relative;
bottom:10px;}

h3{
color:#000;
font-weight:normal;
font-size:13px;
display:inline-block;
margin:10px 0;}

h3 a{
background:#ffdb4f;
border:solid 2px #ffdb4f;
padding:1px 3px;}

h3 a:hover{
background:#fff;}

h4{
font-family:Varela Round,和田研中角ゴシック,sans-serif;
line-height:60%;
font-weight:normal;
font-size:24px;
color:#000;
margin:40px auto 10px;
padding:0 20px 10px;
text-align:center;
border-top:double 5px #2a4073;
border-bottom:double 5px #2a4073;}

h4 p{
text-align:center;
background:#fff;
font-size:13px;
color:#ffdb4f;
padding:0 5px;
margin:0;
display:inline-block;
position:relative;
top:-12px;}

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

a:hover{color:#b0c4de;}

input[type],textarea{
height:50px;
width:80%;
font-family:"Varela Round","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#ccc;
color:#333;
border:solid 1px #ccc;
margin:5px 10px;
padding:2px 5px;
}

input[type=text]{
margin:5px;
height:24px;
width:80px;}

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

</style>

BODY

文章画面