BETTY

info

コンテンツページのテンプレートです。
contents-1、contents-2は縦並びのリストをflexで二列表示、contents-3は横並びのリスト。
<span class"border">で文字を囲むとこのように下線がつきます。
menu背景のcssはfirefoxだけ非対応です。
ヘッダー画像はUnsplash様からお借りしています。
アイコン画像はICOON MONO様からお借りしています。
ハートの画像は当サイト作成のものですのでsource codeからお持ち帰りください。

source code

contents-1

画像付きリスト

説明など

テキストタイトル

説明など

テキストタイトル

説明など

テキストタイトル

画像クリックでリストが展開します。
<h4 data-text="ジャンル">は適宜変更してください(削除も可)。
画像は横230px縦60pxで切り取られます。

contents-2

キャラクター名

contents-3

キャラクター名

ここのリストを縦並びに変更したい場合は<ul class="list_inline">を<ul class="list_block">に変更してください。

source

使用画像

code

HEAD

}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.contents {
  flex: 1 0 50%;
  min-width: 230px;
}
.contents:nth-child(odd) {
  padding-right: 15px;
}
@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
details[open] .list_block {
  animation: fade 0.5s ease-in-out;
}
/* Chrome、Safari以外 */
summary {
  display: inline-block;
  position: relative;
  margin-bottom: 20px;
  cursor: pointer;
}
summary img {
  display: block;
  height: 60px;
  width: 230px;
  object-fit: cover;
}
summary span {
  font-size: .9em;
  color: rgba(0, 0, 0, 0.70);
  background: rgba(255, 255, 255, 0.65);
  width: 100%;
  position: absolute;
  top: calc(50% - 1em);
  left: 0;
  text-align: center;
  line-height: 2;
}
summary::-webkit-details-marker {
  display: none;
}
.list_inline, .list_block {
  padding-bottom: 25px;
  line-height: 2.5;
  list-style: none;
}
.list_inline li {
  padding-right: 5px;
  display: inline;
}
.list_inline li:not(:last-child):after {
  content: "/";
  padding-left: 10px;
}
.list_block li p {
  font-size: .9em;
  display: block;
  padding-left: 25px;
  margin-bottom: 5px;
}
.border {
  background: linear-gradient(rgba(0, 0, 0, 0.00) 60%, rgba(255, 213, 201, 0.40) 40%);
  z-index: -1;
}
.footer {
  padding: 10px 0;
  text-align: center;
}
.footer li {
  list-style: none;
}
.footer li a {
  padding: 0 5px;
}
/*--source code--*/
input[type="text"], input[type="submit"], input[type="reset"], textarea, button {
  font-family: inherit;
  font-size: 100%;
  height: initial;
  width: 100%;
  margin-bottom: 15px;
  color: #B1B7B8;
  padding: 5px;
  border: 1px solid;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  font-weight: normal;
  box-shadow: none;
}
input::placeholder, textarea::placeholder {
  font-size: .9em;
  color: rgba(89, 73, 66, 0.40);
}
input:focus, textarea:focus {
  outline: none;
}

@media screen and (max-width:820px) {
body {
    font-size: 1.6em;
 }
  header {
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  article {
    height: calc(87vh - 70px);
  }
  article::before, article::after {
    width: 50px;
    height: 150px;
    transform: initial;
    z-index: 1;
  }
  article::before {
    right: calc(50% - 25px);
    top: calc(0% + 20px);
  }
  article::after {
    display: none;
  }
  h1 {
    padding-left: initial;
    font-size: 2.5em;
    z-index: 2;
  }
  h2 {
    width: 120px;
    height: 120px;
  }
  h2 span {
    font-size: .7em;
  }
  .menu-container {
    padding-right: initial;
  }
  .menu {
    justify-content: space-around;
  }
  .menu li:not(:last-child) {
    padding-right: initial;
  }
  main {
    padding: 80px 25px 0;
  }
  section {
    gap: 30px;
  }
  section::after {
    left: 60px;
  }
}
@media screen and (max-width:700px) {
  body {
    overflow-x: hidden;
  }
  article::before {
    height: 110px;
  }
  h2 {
    justify-content: center;
    border-radius: initial;
    width: 100vw;
    height: 70px;
  }
  h3 {
    margin: 15px 0 15px 10px;
  }
  .menu {
    padding: 10px 0;
  }
  main {
    padding: 80px 20px 0;
  }
  section {
    flex-direction: column;
    align-items: center;
    max-height: 100%;
  }
  section::after {
    display: none;
  }
  .contents {
    width: 100%
  }
  details[open] {
    padding-bottom: 25px;
  }
  .list_inline, .list_block {
    padding: initial;
  }
}
@media screen and (max-width:414px) {
  body {
    font-size: 1.3em;
  }
  header {
    top: 20px;
  }
}
@media (orientation: landscape) and (max-width: 926px) {
  article::before, article::after {
    display: none;
  }
}
</style>

HTML

<article>
  <header><img src="画像のURL" alt="" />
    <h1>betty</h1>
  </header>
</article>
<div class="menu-container js-menu">
  <ul class="menu">
    <li><a href="#info">info</a></li>
    <li><a href="#contents-1">contents-1</a></li>
    <li><a href="#contents-2">contents-2</a></li>
    <li><a href="#contents-3">contents-3</a></li>
  </ul>
</div>
<main>
  <section>
    <h2 id="info"><span>info</span></h2>
    <div class="inner">コンテンツページのテンプレートです。 <br>
      contents-1、contents-2は縦並びのリストをflexで二列表示、contents-3は横並びのリスト。<br>
      &lt;span class&quot;border&quot;&gt;で文字を囲むと<span class="border">このように</span>下線がつきます。<br>
      menu背景のcssはfirefoxだけ非対応です。<br>
      <strong>ヘッダー画像</strong>は<a href="https://unsplash.com/photos/uRuF9ABj0NY">Unsplash</a>様からお借りしています。<br>
      <strong>アイコン画像</strong>は<a href="https://icooon-mono.com/10789-soft-felt-hat-icon-2/">ICOON MONO</a>様からお借りしています。<br>
      <strong>ハートの画像</strong>は当サイト作成のものですのでsource codeからお持ち帰りください。 </div>
  </section>
  <section>
    <h2 id="contents-1"><span>contents-1</span></h2>
    <div class="inner">
      <h3>画像付きリスト</h3>
      <div class="flex"> 
        
        <div class="contents">
          <h4 data-text="ジャンル">説明など</h4>
          <details id="details-1">
            <summary><img src="画像のURL" alt="" /> <span>テキストタイトル</span> </summary>
            <ul class="list_block">
              <li><a href="">リンク</a></li>
              <li><a href="">リンク</a></li>
              <li><a href="">リンク</a></li>
            </ul>
          </details>
          <h4 data-text="ジャンル">説明など</h4>
          <details id="details-2">
            <summary><img src="画像のURL" alt="" /> <span>テキストタイトル</span> </summary>
            <ul class="list_block">
              <li><a href="">リンク</a></li>
              <li><a href="">リンク</a></li>
              <li><a href="">リンク</a></li>
            </ul>
          </details>
        </div>
         
        
        <div class="contents">
          <h4 data-text="ジャンル">説明など</h4>
          <details id="details-3">
            <summary><img src="画像のURL" alt="" /> <span>テキストタイトル</span> </summary>
            <ul class="list_block">
              <li><a href="">リンク</a></li>
              <li><a href="">リンク</a></li>
              <li><a href="">リンク</a></li>
            </ul>
          </details>
          画像クリックでリストが展開します。<br>
          <span class="border">&lt;h4 data-text="ジャンル"&gt;</span>は適宜変更してください(削除も可)。<br>
          画像は横230px縦60pxで切り取られます。 </div>
         
      </div>
    </div>
  </section>
  <section>
    <h2 id="contents-2"><span>contents-2</span></h2>
    <div class="inner">
      <h3>キャラクター名</h3>
      <div class="flex"> 
        
        <div class="contents">
          <ul class="list_block">
            <li data-text="ジャンル"><a href="">テキストタイトル</a>
              <p>あらすじなども書けます</p>
            </li>
            <li><a href="">テキストタイトル</a></li>
            <li><a href="">テキストタイトル</a></li>
          </ul>
        </div>
         
        
        <div class="contents">
          <ul class="list_block">
            <li><a href="">テキストタイトル</a></li>
            <li><a href="">テキストタイトル</a></li>
            <li><a href="">テキストタイトル</a></li>
          </ul>
        </div>
         
      </div>
    </div>
  </section>
  <section>
    <h2 id="contents-3"><span>contents-3</span></h2>
    <div class="inner">
      <h3>キャラクター名</h3>
      <ul class="list_inline">
        <li><a href="#">テキストタイトル</a></li>
        <li><a href="#">テキストタイトル</a></li>
        <li><a href="#">テキストタイトル</a></li>
        <li><a href="#">テキストタイトル</a></li>
      </ul>
      <h3>キャラクター名</h3>
      <ul class="list_inline">
        <li><a href="#">テキストタイトル</a></li>
        <li><a href="#">テキストタイトル</a></li>
        <li><a href="#">テキストタイトル</a></li>
        <li><a href="#">テキストタイトル</a></li>
      </ul>
      <br>
      ここのリストを縦並びに変更したい場合は<span class="border">&lt;ul class=&quot;list_inline&quot;&gt;</span>を<span class="border">&lt;ul class=&quot;list_block&quot;&gt;</span>に変更してください。 </div>
  </section>
</main>
<ul class="footer">
  <li>Template by<a href="https://as.lclla.com/" target="_blank">Luca</a></li>
</ul>
<script>
$(function () {
  $('a[href^="#"]').click(function () {
    var speed = 400;
    var href = $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top - 70;
    $("html, body").animate({
      scrollTop: position
    }, speed, "swing");
    return false;
  });
  $(window).on("scroll", function () {
    const sliderHeight = $("article").height();
    if (sliderHeight - 10 < $(this).scrollTop()) {
      $(".js-menu").addClass("colorchange");
    } else {
      $(".js-menu").removeClass("colorchange");
    }
  });
});
</script>