雪の足跡

サンプル３

20XX/12/03

サンプル２

20XX/12/02

サンプル１

20XX/12/01

ソースコード

ナノの独自機能「ブログ」に合わせて作成してあります。
自動改行「しない」で作成。

背景画像は素材屋 flower&clover様
◆雪:snow 16よりお借りしました。

おまけ→ トップページ

HEAD

body{
color: #333;
font-family: 'Zen Maru Gothic', sans-serif;
font-size: 0.9em;
line-height: 1.7;
background: #fff url(#背景画像URL#) repeat fixed;
}
a{
text-decoration: none;
color: #406080;
}
a:hover{
color: #e0e0f0;
}

h1{
font-size: 2em;
font-family: 'Kaisei Opti', serif;
color: #6080a0;
}
h1:before{
font-family: "Font Awesome 5 Free";
content: '\f2dc';
font-weight: 900;
margin-right : 2px;
}
h1:after{
font-family: "Font Awesome 5 Free";
content: '\f2dc';
font-weight: 900;
margin-left : 5px;
}

h2{
font-size: 1.5em;
font-family: 'Kaisei Opti', serif;
color: #6080a0;
}

h3{
font-size: 1.2em;
line-height: 2.5em;
}

.line {
position: relative;
overflow: visible;
text-align: center;
color: #ccc;
border-width: 3px 0 0 0;
border-style: double;
border-color: #ccc;
margin:0.5em auto 0.5em;
}
.line:after {
font-family: "Font Awesome 5 Free";
content: '\f2dc';
font-size: 1em;
font-weight: 900;
position: absolute;
top: -1em;
left: 50%;
display: inline-block;
background: #ffffff;}

.line2 {
position: relative;
overflow: visible;
text-align: center;
color: #6080a0;
border-width: 3px 0 0 0;
border-style: double;
border-color: #6080a0;
margin:2em auto 2em;
}
.line2:after {
font-family: "Font Awesome 5 Free";
content: '\f2dc';
font-size: 1em;
font-weight: 900;
position: absolute;
top: -1em;
left: 50%;
display: inline-block;
background: #f0f0f0;}

.wrp{
width: 90%;
max-width:600px;
margin: 10px auto;
}

header{
font-size:1.1em;
text-align: center ;
margin: 50px auto 50px;}

header a{
padding: 0.5em;
background-color: #f0f0f0;
border-radius: 10px;
}

.post{
height:2.5em;
display: flex;
justify-content: space-between;
}

.title{
font-size: 1.2em;
line-height: 2.5em;
display: inline-block;
}

.date{
line-height: 2.5em;
text-align: right;
display: inline-block;
}

.kiji {
 margin: 2em auto;
 padding: 1em;
 width: 90%;
 background-color: #e0e0f0; /* 背景色 */
 box-shadow: 0 0 10px 10px #e0e0f0; /* 影 */
}

.time{
font-size: 1em;
text-align: right;
color: #6080a0;
}
.time:before{
font-family: "Font Awesome 5 Free";
content: '\f017';
font-weight: 400;
color:#6080a0;
padding-right : 5px;
}

.right{
text-align: right;
}

.kiji2 {
 margin: 0.5em auto;
 padding: 1em;
 width: 95%;
 background-color: #f0f0f0; /* 背景色 */
 box-shadow: 0 0 5px 5px #f0f0f0; /* 影 */
}

textarea , input[type='text'] {
width: 90%;
padding: 0.3em;
transition: 0.3s;
letter-spacing: 1px;
border: 1px solid #606080;
border-radius: 4px;
}
textarea:focus , input:focus {
border: 1px solid #e0e0f0;
outline: none;
box-shadow: 0 0 5px 1px rgba(224,224,240, .5);
}

input {
padding: 0.3em;
transition: 0.3s;
letter-spacing: 1px;
border: 1px solid #606080;
border-radius: 4px;
}

footer{
text-align: center;
}
</style>

◆一覧画面レイアウト
上部表示テキスト

一覧部分

下部表示テキスト

◆記事画面レイアウト

◆追記画面レイアウト