shikiri

Ranking：RANK01 RANK02

2017, 04, 03

○○○ 公開しました。
サイトの更新内容など色々書いてみて下さい。

フォームメールよりいただいたお問い合わせについてお返事をさせていただきました。「続きを読む」よりご確認ください。※当ページからは確認できません。

2017, 03, 30

○○○ 更新しました。
サイトの更新内容など色々書いてみて下さい。

CAUTION

使用画像

子ページよりご確認ください。

DESIGN DEMO

※トップ（メイン）ページデザインは配布致しませんので、ご了承ください。

HTML

<article id="memo">
    <header>
        <h1>
            <strong>Site title</strong>
        </h1>
<p class="ranking">
           Ranking：<a href="">Rank01</a>
        <a href="">Rank02</a>
        </p>
        <ul>
            <li><a href="">ABOUT</a></li>
            <li><a href="">DESIGN</a></li>
            <li><a href="">CONTACT</a></li>
        </ul>
    </header>
    <div class="wrapper">
        <div class="main clearfix">

<div class="list">

<div class="box">
<h3>#y1#, #m1#, #d1#</h3>
#text#
<p class="more">#ext_続きを読む#</p>
</div>

※カテゴリー表示はカテゴリ分けしてる方のみ使用してください。（使用しない場合はsubクラスのdiv要素を削除してください
<ul class="pager">
#prev_<li><i class="fa fa-angle-double-left" aria-hidden="true"></i></li>_#
#next_<li><i class="fa fa-angle-double-right" aria-hidden="true"></i></li>_#
</ul>
</div>
<aside>
    <div class="sub">
        <h2>CATEGORY</h2>
        <div class="category">
            <a href="/サイトID/blog/1/?FolderID=1">トップ</a>
            <a href="/サイトID/blog/1/?FolderID=2">お知らせ</a>
            <a href="/サイトID/blog/1/?FolderID=3">更新履歴</a>
        </div>
    </div>
</aside>
</div>

<section>
<h3>#y1#, #m1#, #d1#</h3>
#text#
</section>

※カテゴリー表示はカテゴリ分けしてる方のみ使用してください。（使用しない場合はsubクラスのdiv要素を削除してください
<div class="list">
<div class="box" style="margin-bottom: 60px;">
<h3>#y1#, #m1#, #d1#</h3>
#text2#
</div>
</div>
<aside>
    <div class="sub">
        <h2>CATEGORY</h2>
        <div class="category">
            <a href="/サイトID/blog/1/?FolderID=1">トップ</a>
            <a href="/サイトID/blog/1/?FolderID=2">お知らせ</a>
            <a href="/サイトID/blog/1/?FolderID=3">更新履歴</a>
        </div>
    </div>
</aside>
</div>

HEAD

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

a {
  color: #45c0e6;
}

header h1,strong {
  font-weight: 700;
}

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

header ul li:last-child::after,header ul::after,header ul::before,header::after,header::before {
  content: '';
}

h3::before,header ul li::after {
  content: '\f08a';
}

h5::before,header ul {
  height: 25px;
  line-height: 25px;
}

p {
  margin-bottom: 20px;
}

body {
  background: repeating-linear-gradient(-45deg,#FFF,#FFF 10px,#F8F8F8 0,#F8F8F8 20px);
  font-family: "Open Sans","ヒラギノ角ゴ Pro","メイリオ",sans-serif;
  font-size: 13px;
  letter-spacing: .5px;
  line-height: 22px;
  text-align: justify;
  animation: fadeIn 1s ease 0s 1 normal;
  -webkit-animation: fadeIn 1s ease 0s 1 normal;
}

header ul li,ul li {
  list-style-type: none;
}

h5,header h1,header h1 span,header h1 strong,header ul,header::after,header::before {
  position: relative;
}

h5::before,header ul::after,header ul::before {
  position: absolute;
}

.pager li,.pager li a,aside a {
  transition: .4s;
}

#memo textarea,header {
  box-sizing: border-box;
}

#memo .box::after,h2,h3::before,h5::before,header,header h1 {
  text-align: center;
}

header::before {
  display: block;
  content: '';
  width: 100%;
  height: 20px;
  border-top: 7px double #FFF;
  position: relative;
  top: 5px;
}

header ul::after,header ul::before {
  top: 0;
  z-index: 2;
  border-width: 12px 8px;
  border-style: solid;
}

header {
  margin-top: 40px;
  height: 180px;
  background: #abe4f5;
  box-sizing: border-box;
  text-align: center;
}

header::after {
  display: block;
  content: '';
  height: 30px;
  background: url(#波線素材#) repeat-x center top;
  background-size: 40px;
  position: relative;
  top: 25px;
}

header a {
  text-decoration: none;
}

header h1 {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #FFF;
  letter-spacing: 5px;
  background: url(#顔アイコン#) no-repeat center 15px #abe4f5;
  background-size: 45px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  position: relative;
  top: -60px;
  margin: 0 auto;
}

header h1 span {
  top: 2px;
}

header h1 strong {
  font-family: 'Sacramento', cursive;
  font-weight: normal;
  position: relative;
  top: 88px;
  left: -5px;
  font-size: 70px;
  letter-spacing: 0;
}

h2,h3,header ul li a {
  font-weight: 700;
}

.main a,header ul li a {
  letter-spacing: 1.5px;
  text-decoration: none;
}

header ul {
  max-width: 400px;
  width: 80%;
  margin: -50px auto 0;
  padding: 0 1em;
  background-color: #333;
}

header ul::before {
  left: 0;
  border-color: transparent transparent transparent #abe4f5;
}

header ul::after {
  right: 0;
  border-color: transparent #abe4f5 transparent transparent;
}

aside a,h2 {
  border-bottom: 1px solid #EFEFEF;
}

header ul li {
  display: inline;
}

header ul li a {
  font-family: 'Open Sans',sans-serif;
  font-size: 11px;
  color: #FFF;
  margin: 0 5px;
}

header ul li::after {
  font-family: FontAwesome;
  color: #FFF;
  font-size: 10px;
}

.wrapper {
  background: #FFF;
}

.main {
  max-width: 530px;
  margin: 0 auto;
  padding: 70px 0 30px;
}

.main a {
  color: #45c0e6;
  margin: 0 3px;
}

#memo .main {
  max-width: 740px;
}

h2 {
  margin: 0 auto 30px;
  font-family: Montserrat,sans-serif;
  font-size: 20px;
  letter-spacing: 4px;
  color: #888;
  padding: 38px 0 8px;
  background: url(#リボン素材#) center top no-repeat;
  background-size: 32px;
}

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

h3 {
  margin: 40px 0 5px;
}

h3::before {
  border-radius: 5px;
  font-weight: 400;
  display: inline-block;
  font-family: FontAwesome;
  font-size: 16px;
  color: #45c0e6;
  margin-right: 5px;
}

h4 {
  font-weight: 700;
  margin: 30px 0 3px;
}

aside .category a::before,aside ul li::before,h4::before {
  content: '\f105';
  font-family: FontAwesome;
  margin-right: 8px;
}

h4::before {
  font-weight: 400;
  margin-right: 5px;
}

h5 {
  padding-left: 30px;
  color: #333;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 8px;
}

h5::before {
  font-family: FontAwesome;
  font-weight: 400;
  content: "\f121";
  background: #45c0e6;
  color: #fff;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  top: 50%;
  transform: translateY(-50%);
}

#memo .box::after {
  display: block;
  content: '●●●';
  letter-spacing: 5px;
  color: #DFDFDF;
  margin: 60px 0;
}

#memo .box:last-child::after {
  display: none;
}

#memo .list {
  width: 480px;
  margin-right: 60px;
  float: left;
}

#memo .list p {
  line-height: 26px;
}

#memo .list h3 {
  margin-top: 0;
}

#memo .more {
  text-align: right;
}

#memo .more a {
  cursor: pointer;
  position: relative;
  padding: 2px 22px;
  border-radius: 3px;
  background: #abe4f5;
  color: #FFF;
  margin-left: -33px;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 12px;
}

aside {
  width: 200px;
  float: left;
}

aside .sub {
  margin-bottom: 40px;
}

aside dl.profile dd,aside dl.profile dt {
  float: none;
  margin: 0;
  text-align: center;
  overflow: visible;
}

aside dl.profile dd {
  text-align: left;
  font-size: 12px;
}

aside h2 {
  margin-bottom: 20px;
}

aside .category a::before {
  color: #45c0e6;
}

aside a {
  color: #A59999!important;
  text-decoration: none;
}

aside .category a {
  display: block;
  line-height: 27px;
}

aside a:hover {
  color: #45c0e6;
  border-bottom: 1px solid #FCB6C8;
}

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

.pager li {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  border-radius: 50%;
  background: #45c0e6;
  border: 1px solid #45c0e6;
  margin: 0 10px;
}

.pager a {
  color: #FFF;
}

#memo textarea {
  font-size: 11px;
  display: block;
  width: 100%;
  border: none;
  background: #F4F4F4;
  height: 90px;
  padding: 10px;
  color: #999;
  margin-bottom: 30px;
  letter-spacing: 0;
  line-height: 16px;
  border-radius: 4px;
  font-family: "Roboto Mono","ヒラギノ角ゴ Pro","メイリオ",monospace;
}

@media screen and (max-width:800px) {
  #memo .main {
    width: 580px;
  }

#memo .list {
    width: 350px;
    margin-right: 60px;
  }

#memo aside {
    width: 170px;
  }
}

@media screen and (max-width:600px) {
  #memo .main {
    width: 80%;
  }

#memo .list,#memo aside {
    width: 100%;
    float: none;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

100% {
    opacity: 1;
  }
}

.ranking {
  margin: -55px 0 55px;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  z-index: 10;
}

.ranking a {
  color: #333;
  letter-spacing: 1px;
  font-weight: bold;
  padding: 0 3px;
  text-decoration: underline;
}
</style>