CVRが上がるアコーディオンタグの作り方

2021年1月24日 21:38

1.アコーディオンでCVRが改善した話

ECサイトの作成をしているのでが、その中でも目に見えてCVRが上がったのがこのアコーディオンの導入でした✨商品の説明などをすべて見せているときよりもアコーディオン形式で検討したい方だけ見れる形にするだけでユーザーさんにとっては使いやすいサイト（＝購入したくなる）につながるんですね～～！サイトもすっきりするので、ほしい情報を見つけやすいということのようです！導入するのもとってもカンタンでした😊💕

▼こんな感じです～～

2.body

<body>
<div class="accbox">
<!--ラベル1-->
  <input type="checkbox" id="label1" class="cssacc" />
  <label for="label1">Label1</label>
  <div class="accshow">
    <!--ここに隠す中身-->
		<p>aaaaaaaaaaaaaaaaaaaa</p>
		
  </div>
  <!--//ラベル1-->
<!--ラベル2-->
  <input type="checkbox" id="label2" class="cssacc" />
  <label for="label2">Label2</label>
  <div class="accshow">
    <!--ここに隠す中身-->
		<p>bbbbbbbbbbbbbbbbbbbb</p>
  </div>
  <!--//ラベル2-->
<!--ラベル3-->
  <input type="checkbox" id="label3" class="cssacc" />
  <label for="label3">Label3</label>
  <div class="accshow">
    <!--ここに隠す中身-->
  </div>
  <!--//ラベル3-->

</div>

</body>

アコーディオン部分は3つにしていますが、消したり増やしたりアレンジできます～～

3.css

<style>

	/*ボックス全体*/
.accbox {
  margin: 2em 0;
  padding: 0;
  max-width: 100%;/*最大幅*/
}

/*ラベル*/
.accbox label {
  display: block;
  margin: 1.5px 0;
  padding : 13px 12px;
  color: #fff;
  font-weight: bold;
  background: #ffc1c1;
  cursor :pointer;
  transition: all 0.5s;
}

/*アイコンを表示*/
.accbox label:before {
  content: '\f054';
  font-family: "Font Awesome 5 Free"; 
  padding-right: 8px;
}

/*ラベルホバー時*/
.accbox label:hover {
  background :#ffd6d6;
}

/*チェックは隠す*/
.accbox input {
  display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
  height: auto;
  padding: 5px;
  background: #fff5eb;
  opacity: 1;
}

.accbox .accshow p {
  margin: 15px 10px}

/*アイコンを入れ替える*/
.cssacc:checked + label:before {
  content: '\f078';
}

</style>

▼アイコンはFontAwesomeのfree版を使ってます💕めっちゃ便利～！

4．head内

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

FontAwesomeの読み込みをしてます！

5.まとめ

アコーディオンタグの中にいろいろ隠せるのでSEO対策でいろんなワード盛り込んだ文章を書くのもありなんですね！いろいろ改定があるのでその都度対応していかなければいけないSEO対策ですが、CVRの高さも掲載順位に関係があるようなので、こういった方法（正しいかはわかりかねますが、、）も頭の片隅に入れておこうと思います！

この記事が気に入ったらサポートをしてみませんか？