小ここは主に××を扱う○○サイトです。
当サイト内の作品の著作権はすべて管理人ナナシにあります。荒らし・晒し・転載はご遠慮ください。

更新履歴

xxxx.xx.xx xxxxxxxxxxxx

当サイトのテンプレートは、【改行しない設定推奨】です。

CSS（共通）

「HEAD・HTML詳細」の「HEAD内」にコピー&ペーストしてください。

<style>
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
@import url(https://fonts.googleapis.com/earlyaccess/sawarabimincho.css);
@font-face {
  font-family: YuGothicM;
  src: local("Yu Gothic Medium");
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans Japanese', -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}

a {
  color: #aaa;
}

#wrapper {
  width: 85%;
  margin: 0 auto;
  padding: 0 0 60px 0;
}
@media all and (min-width: 769px ) and (max-width: 1024px) {
  #wrapper {
    width: 80%;
  }
}
@media all and (min-width: 1025px ) {
  #wrapper {
    width: 1000px;
  }
}

hr {
  border: 0;
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

#header {
  margin: 0 0 60px 0;
}

.sitename {
  position: relative;
  line-height: 1.4;
  padding:0.25em 1em;
  display: inline-block;
  font-size: 24px;
  top:0;
  letter-spacing: 2px;
}
.sitename a {
  color: #000;
  text-decoration: none;
}
.sitename a:hover {
  text-decoration: underline;
}
.sitename::before,
.sitename::after {
  position: absolute;
  top: 0;
  content: "";
  width: 8px;
  height: 100%;
  display: inline-block;
}
.sitename::before {
  border-left: solid 1px #000;
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
  left: 0;
}
.sitename::after {
  border-top: solid 1px #000;
  border-right: solid 1px #000;
  border-bottom: solid 1px #000;
  right: 0;
}

#header nav {}
#header nav ul  {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#header nav ul li  {
  display: inline-block;
}
#header nav ul li a {
  padding: 0 5px;
}

.ttl-contents {
}
.ttl-contents span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid #bbb;
  letter-spacing: 0px;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 0 -1px;
}

.story {
  padding: 20px 0;
}

.ttl-story {
  margin: 0;
  font-size: 24px;
}

.description-story {
  font-family: "Sawarabi Mincho", Georgia, 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
  font-size: 18px;
  line-height: 1.2;
}
.description-story p {
  margin: 0;
  color: #aaa;
}

.ttl-chapter {
  margin: 20px 0 0 0;
  padding: 0;
  position: relative;
  font-size: 18px;
  background-color: #fff;
}
.ttl-chapter::after {
  content: '';
  position: relative;
  display: inline-block;
  width: 200px;
  margin: 5px 0 0 0;
  height: 1px;
  background-color: black;
  vertical-align: top;
}
@media all and (min-width: 769px ) {
  .ttl-chapter::after {
    margin: 15px 0 0 5px;
  }
}

.ul-story {
  margin: 0 0 20px 0;
  padding: 0;
  list-style-type: none;
}
.ul-story li a {
  display: block;
  width: 100%;
  padding: 5px 0;
  text-decoration: underline;
}
@media all and (min-width: 769px ) {
  .ul-story li a {
    display: inline-block;
    width: auto;
  }
}

.ul-story-horizontal {
  margin: 0 0 20px 0;
  padding: 0;
  list-style-type: none;
}
.ul-story-horizontal li {
  display: inline-block;
}
.ul-story-horizontal li a {
  padding: 5px;
}

.author {
font-size: 10px;
color: #aaa;
}
</style>

HTML - トップページ

「全体レイアウト」にコピー&ペーストしてください。

<div id="wrapper">
  <header id="header">
    <h1 class="sitename"><a href="/hitsujicottage/page/2/">Your Site Name</a></h1>
    <nav>
      <ul>
        <li><a href="/hitsujicottage/page/4/">ABOUT</a></li>
        <li><a href="/hitsujicottage/page/3/">MAIN</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <p>小ここは主に××を扱う○○サイトです。<br>
        当サイト内の作品の著作権はすべて管理人ナナシにあります。荒らし・晒し・転載はご遠慮ください。 </p>
    </article>

    <article>
      <h1 class="ttl-contents"><span>更</span><span>新</span><span>履</span><span>歴</span></h1>
      <p>xxxx.xx.xx xxxxxxxxxxxx</p>
    </article>
  </main>
</div>

HTML - ABOUT

「全体レイアウト」にコピー&ペーストしてください。

<div id="wrapper">
  <header id="header">
    <h1 class="sitename"><a href="/hitsujicottage/page/2/">Your Site Name</a></h1>
    <nav>
      <ul>
        <li><a href="/hitsujicottage/page/4/">ABOUT</a></li>
        <li><a href="/hitsujicottage/page/3/">MAIN</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1 class="ttl-contents"><span>A</span><span>B</span><span>O</span><span>U</span><span>T</span></h1>
      <p>小ここは主に××を扱う○○サイトです。<br>
        当サイト内の作品の著作権はすべて管理人ナナシにあります。荒らし・晒し・転載はご遠慮ください。 </p>
    </article>

    <article>
      <h1 class="ttl-contents"><span>M</span><span>A</span><span>S</span><span>T</span><span>E</span><span>R</span></h1>
      <p>ナナシ<br>
        xxと○○が好きです。</p>
      <p>[ <a href="">mail</a> | <a href="">res</a> ] </p>
      <p class="author">Template by <a href="https://hitsujicottage.com" target="_blank"">HITSUJI COTTAGE</a></p>
    </article>
  </main>
</div>

HTML - MAIN

「全体レイアウト」にコピー&ペーストしてください。

<div id="wrapper">
  <header id="header">
    <h1 class="sitename"><a href="/hitsujicottage/page/2/">Your Site Name</a></h1>
    <nav>
      <ul>
        <li><a href="/hitsujicottage/page/4/">ABOUT</a></li>
        <li><a href="/hitsujicottage/page/3/">MAIN</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h1 class="ttl-contents"><span>メ</span><span>イ</span><span>ン</span></h1>
      <section class="story">
        <aside class="description-story">
          <p style="color:#aaa;">小説の説明文とか。デフォルトカラーはグレーです。</p>
        </aside>
        <h1 class="ttl-story">小説1のタイトル</h1>
        <h2 class="ttl-chapter">章のタイトルとか</h2>
        <ul class="ul-story">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
          <li><a href="#">11</a></li>
          <li><a href="#">12</a></li>
          <li><a href="#">13</a></li>
          <li><a href="#">14</a></li>
          <li><a href="#">15</a></li>
          <li><a href="#">16</a></li>
          <li><a href="#">17</a></li>
          <li><a href="#">18</a></li>
          <li><a href="#">19</a></li>
          <li><a href="#">20</a></li>
        </ul>
        <h2 class="ttl-chapter">章のタイトルとか</h2>
        <ul class="ul-story-horizontal">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
          <li><a href="#">11</a></li>
          <li><a href="#">12</a></li>
          <li><a href="#">13</a></li>
          <li><a href="#">14</a></li>
          <li><a href="#">15</a></li>
          <li><a href="#">16</a></li>
          <li><a href="#">17</a></li>
          <li><a href="#">18</a></li>
          <li><a href="#">19</a></li>
          <li><a href="#">20</a></li>
        </ul>
      </section>

      <hr>

      <section class="story">
        <aside class="description-story">
          <p style="color:#aaa;">小説の説明文とか。デフォルトカラーはグレーです。</p>
        </aside>
        <h1 class="ttl-story">小説2のタイトル</h1>
        <h2 class="ttl-chapter">長めの章のタイトルテストです</h2>
        <ul class="ul-story-horizontal">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
          <li><a href="#">7</a></li>
          <li><a href="#">8</a></li>
          <li><a href="#">9</a></li>
          <li><a href="#">10</a></li>
          <li><a href="#">11</a></li>
          <li><a href="#">12</a></li>
          <li><a href="#">13</a></li>
          <li><a href="#">14</a></li>
          <li><a href="#">15</a></li>
          <li><a href="#">16</a></li>
          <li><a href="#">17</a></li>
          <li><a href="#">18</a></li>
          <li><a href="#">19</a></li>
          <li><a href="#">20</a></li>
        </ul>
      </section>
    </article>
  </main>
</div>

このページは「ヒツジコテージ」が作成したテンプレートのデモページです。

「#エロ」のBL小説を読む
BL小説 BLove

- ナノ -