過眠室ソースコード

自動改行“しない”に設定しています。
記事は表示しているディスプレイの幅によって、二列か一列になりますので、記事の表示数は偶数を推奨します。
また、基本設定より“ノート内の記事でのHTMLの使用”を“有効にする”に設定してください。

HEAD

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

body{
font-family:"Quicksand","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#000;
background:#fff;
margin:20px 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;}
}

.con{
text-decoration: none;
width:150px;
display: inline-block;
text-align:center;
background:#ebf6f7;
border:solid 1px #ebf6f7;
margin:15px 10px;
padding:15px;}

.con:hover{
text-decoration:none;
border:solid 1px #ebf6f7;
color:#888;
background-color: #fff;
background-image: linear-gradient(-45deg, rgba(235,246,247,.5) 25%, transparent 25%, transparent 50%, rgba(235,246,247,.5) 50%, rgba(235,246,247,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(235,246,247,.5) 25%, transparent 25%, transparent 50%,  rgba(235,246,247,.5) 50%, rgba(235,246,247,.5) 75%, transparent 75%, transparent 100%);
background-size: 30px 30px;}

.title{
padding:10px;
margin:30px 0 0 0;
border:solid 1px #ebf6f7;
background-color: #fff;
background-image: linear-gradient(-45deg, rgba(235,246,247,.5) 25%, transparent 25%, transparent 50%, rgba(235,246,247,.5) 50%, rgba(235,246,247,.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(235,246,247,.5) 25%, transparent 25%, transparent 50%,  rgba(235,246,247,.5) 50%, rgba(235,246,247,.5) 75%, transparent 75%, transparent 100%);
background-size: 30px 30px;}

.blog{
text-align:center;
margin:30px 20px;}

.text{
background:#fff;
border-right:solid 1px #ebf6f7;
border-bottom:solid 1px #ebf6f7;
border-left:solid 1px #ebf6f7;
margin:0 0 20px 0;
padding:15px;
text-align:left;}

.text a{
text-transform:uppercase;}

hr{
border:0;
border-top:solid 1px #ebf6f7;
padding:0;
margin:20px 0;}

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

.ft a{
background:#a2d7dd;
color:#fff;
padding:1px 5px;
margin:10px;
transition:0.5s;}

h1{
font-size:30px;
font-family:"Sacramento",sans-serif;
color:#fff;
letter-spacing:0;
line-height:150%;
text-shadow: 0 0 20px #a2d7dd,0 0 20px #a2d7dd,0 0 30px #a2d7dd;
margin:20px 0;
padding:0;}

a{
color:#000;
text-decoration:none;
background:linear-gradient(transparent 50%,#ebf6f7 0%);
padding:0 3px;
margin:0;
transition:0.5s;}

a:hover{
color:#888;
background:none;}

</style>

一覧画面レイアウト

ノート画面レイアウト