ECサイト用パーツ

特集・コンテンツ一覧

タブレット表示 スマホ表示

ルール・連絡事項

トリミング画像をバナーに変えて利用も利用できる（料金はプラス）

パーツ設置費用

6000円

費用メモ

1点あたり　1,000円
※バナーに変更　1点あたり　5,000円

CSS

.special__edition__type2 {
  margin: 0 -25px;
}

.special__edition__type2 article {
  margin: 0 25px 50px;
  width: -webkit-calc(100% / 3 - 50px);
  width: calc(100% / 3 - 50px);
}

.special__edition__type2 article a:hover {
  opacity: .65;
}

.special__edition__type2 article h3 {
  font-size: 18px;
  margin: 15px 0 10px;
}
.special__edition__type2 article p {
  font-size: 14px;
  line-height: 1.8;
}

@media screen and (max-width: 800px){
	.special__edition__type2{
		margin: 0;
	}
	.special__edition__type2 article {
		margin: 0 2vw 10vw;
		-webkit-width: calc(100% / 2 - 4vw);
		width: calc(100% / 2 - 4vw);
	}

}
@media screen and (max-width: 540px){
	.special__edition__type2 article {
		margin: 0 2vw 10vw;
		width: calc(100% / 2 - 4vw);
	}
	.special__edition__type2 article h3 {
		font-size: 4vw;
	}
	.special__edition__type2 article p {
		font-size: 3vw;
	}
}

HTML

<section class="special__edition__type2">
  <div class="flexBox">
    <article>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image3.jpg"></a>
      </figure>
      <h3><a href="">タイトルタイトルタイトル</a></h3>
      <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </article>
    <article>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image3.jpg"></a>
      </figure>
      <h3><a href="">タイトルタイトルタイトル</a></h3>
      <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </article>
    <article>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image3.jpg"></a>
      </figure>
      <h3><a href="">タイトルタイトルタイトル</a></h3>
      <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </article>
    <article>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image3.jpg"></a>
      </figure>
      <h3><a href="">タイトルタイトルタイトル</a></h3>
      <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </article>
    <article>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image3.jpg"></a>
      </figure>
      <h3><a href="">タイトルタイトルタイトル</a></h3>
      <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </article>
    <article>
      <figure>
        <a href=""><img src="/wp/wp-content/uploads/2021/02/thumb-dammy-image3.jpg"></a>
      </figure>
      <h3><a href="">タイトルタイトルタイトル</a></h3>
      <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </article>
  </div>
</section>

関連パーツ

特集・コンテンツ一覧

特集・コンテンツ一覧