milimili | ナノ

2017, 02, 23 テンプレート

リクエスト内容

No.16 喜多原さん
淡い紫か青（寒色系）リアルタイム風の更新履歴などに使える日記デザイン
涼しげで爽やかなイメージ

テンプレート詳細

「Read more」ボタンで追記を読むことができます（※jQueryを使用しているので、追記ページに飛びません）。

クリップ素材はこちらから保存してください。

※記事画面レイアウトと追記画面レイアウトはありません。

HTML

<header>
    <h1>
        <span>
            milimili
            <i class="fa fa-star" aria-hidden="true"></i>
        </span>
    </h1>
    <ul>
        <li><a href=""><i class="fa fa-home" aria-hidden="true"></i></a></li>
        <li><a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
        <li><a href=""><i class="fa fa-envelope-open-o" aria-hidden="true"></i></a></li>
    </ul>
</header>
#blog#

<article>

<section>
<dl class="clearfix">
            <dt>
                <p class="date">#y1#, #m1#, #d1#</p>
                <p class="category">#fld#</p>
            </dt>
            <dd>
                <h2>#title#</h2>
                <p>#text#</p>
                <p class="more">#ext_Read more#</p>
                <p class="moreBox">#text2#</p>
            </dd>
        </dl>
</section>

</article>
<nav class="pager">
    <ul>
	全角＃になっているので半角に変更してください
        <li>＃prev_<i class="fa fa-angle-double-left" aria-hidden="true"></i>_#</li>
        <li><a href=""><i class="fa fa-home" aria-hidden="true"></i></a></li>
        <li>＃next_<i class="fa fa-angle-double-right" aria-hidden="true"></i>_#</li>
    </ul>
</nav>;

HEAD

* {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-weight: normal;
}

.clearfix:after { 
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
}

a {
    color: #75D2DF;
}

body::after,
body::before {
    display: block;
    width: 100%;
    height: 10px;
    content: '';
    background: repeating-linear-gradient(90deg, #FFF, #FFF 10px, #C0E9EE 0, #C0E9EE 20px);
}

body {
    font-size: 13px;
    text-align: justify;
    line-height: 180%;
    font-family: 'Amiko', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
    font-size: 13px;
}

header {
    max-width: 600px;
    width: 80%;
    margin: 40px auto 0;
    position: relative;
}

header ul {
    text-align: right;
    margin-top: -20px;
}

header ul li {
    list-style-type: none;
    display: inline-block;
}

.pager ul li a,
header ul li a {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    background: #75D2DF;
    border: 1px solid;
    color: #FFF;
    transition: .3s;
}

.pager ul li a:hover,
header ul li a:hover {
    background: #FFF;
    color: #75D2DF;
}

h1 {
    font-family: 'Sacramento', cursive;
    font-size: 24px;
}

h1 span {
    position: relative;
    top: 8px;
    padding-left: 15px;
}

h1 span i.fa {
    font-size: 10px;
    color: #ffedab;
    position: relative;
    top: -12px;
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}

h1::before,
h1::after {
    content: '/';
    font-family: 'Sacramento',cursive;
    display: inline-block;
    position: absolute;
    left: 0;
    font-size: 22px;
}

h1::after {
    margin: 20px 0 0 -3px;
    -moz-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
}

article {
    max-width: 600px;
    width: 80%;
    margin: 50px auto;
}

section::before {
    display: inline-block;
    content: '';
    width: 100%;
    height: 40px;
    float: right;
    background: url(#クリップ素材_url#) no-repeat right top;
    background-size: 32px;
    position: relative;
    top: -10px;
    right: -15px;
}

section {
    margin-bottom: 50px;
    position: relative;
    background: #F5F5F5;
}

dl {
    position: relative;
    top: -20px;
    padding: 0 20px;
}

dl dt {
    float: left;
    padding-right: 20px;
    color: #333;
    font-size: 11px;
    line-height: 20px;
    width: 90px;
}

dl dt p::before {
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 12px;
    color: #75D2DF;
    margin-right: 5px;
}

dl dt .date::before {
    content: '\f017';
}

dl dt .category::before {
    content: '\f115';
}

dl dd {
    border-left: 1px dotted #DDD;
    overflow: hidden;
    padding: 0 0 5px 20px;
}

dl dd h2 {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

dl dd h2:nth-child(n+2) {
    margin-top: 20px;
}

dl dd p.more {
    margin: 20px 0 0;
}

dl dd p.more span::before {
    content: '\f107';
    font-family: 'FontAwesome';
    margin-right: 5px;
}

dl dd p.more span {
    background: #75D2DF;
    border: 1px solid #75D2DF;
    color: #FFF;
    text-decoration: none;
    padding: 2px 15px;
    border-radius: 3px;
    transition: .3s;
    cursor: pointer;
}

dl dd p.more span:hover {
    background: #FFF;
    color: #75D2DF;
}

dl dd p.more span:hover::before {
    position: relative;
    top: 2px;
}
dl dd p.moreBox {
    margin-top: 20px;
    display: none;
}

.pager {
    text-align: center;
    margin: 25px 0;
}

.pager ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0 5px;
}

.pager ul li a {
    display: inline-block;
}

h3 {
	position: relative;
	display: inline-block;
	padding: 0 15px;
	width: auto;
	min-width: 45px;
	height: 22px;
	line-height: 22px;
	color: #FFF;
	text-align: center;
	background: #75D2DF;
	z-index: 0;
    border-radius: 3px;
    margin-bottom: 10px;
}

h3::before {
	content: "";
	position: absolute;
	bottom: -4px; 
    left: 50%;
	margin-left: -9px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #75D2DF transparent transparent transparent;
	z-index: 0;
}

@media screen and (max-width:480px){ 
    dl dd p {
        font-size: 12px;
        line-height: 175%;
    }
}

@media screen and (max-width:480px){ 
    dl dt {
        float: none;
        border-bottom: 1px dotted #DDD;
        padding-bottom: 10px;
        width: 90%;
    }
    
    dl dd {
        border-left: none;
        padding: 15px 0 8px;;
    }
}
</style>