CVRが上がるアコーディオンタグの作り方
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の高さも掲載順位に関係があるようなので、こういった方法(正しいかはわかりかねますが、、)も頭の片隅に入れておこうと思います!
この記事が気に入ったらサポートをしてみませんか?