ameba ownd アメーバオウンド CSS

質問

アメーバオウンドにてアコーディオンを使ったサイトを作りたいのですが、どうしても反映されません。

他のサイトのテンプレをそのまま貼り付けるだけ、でも反映されず…
だれか助けていただけないでしょうか？

ちなみにその一例が下記になります。

【HTML】
<div class="qa-list mts">
<dl class="qa">
<dt>ここに質問が入ります</dt>
<dd>
<p>ここに回答が入ります</p>
</dd>
</dl>
<dl class="qa">
<dt>ここに質問が入ります</dt>
<dd>
<p>ここに回答が入ります</p>
</dd>
</dl>
<dl class="qa">
<dt>ここに質問が入ります</dt>
<dd>
<p>ここに回答が入ります</p>
</dd>
</dl>
</div>

【ＣＳＳ】
.qa-list dl {
position: relative;
margin: 30px 0 0;
cursor: pointer;
border: 1px solid #DDD;
}
.qa-list dl:first-child {
margin-top: 0;
}
.qa-list dl::after {
position: absolute;
top: 27px;
right: 26px;
display: block;
width: 7px;
height: 7px;
margin: auto;
content: '';
transform: rotate(135deg);
border-top: 2px solid #000;
border-right: 2px solid #000;
}
.qa-list .open::after {
transform: rotate(-45deg);
}
.qa-list dl dt {
position: relative;
margin: 0;
padding: 20px 20px 20px 60px;
font-weight: bold;
background: #DDD;
}
.qa-list dl dt::before {
font-size: 22px;
line-height: 1;
position: absolute;
top: 20px;
left: 20px;
display: block;
content: 'Q.';
color: #3285bf;
}
.qa-list dl dd::before {
font-size: 22px;
line-height: 1;
position: absolute;
left: 20px;
display: block;
content: 'A.';
font-weight: bold;
color: #3285bf;
}
.qa-list dl dd {
position: relative;
margin: 0;
padding: 20px 20px 20px 60px;
}
.qa-list dl dd p {
margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
margin-top: 0;
}

@media screen and (max-width: 767px) {
.qa-list dl {
margin: 10px 0 0;
}
.qa-list dl:after {
top: 20px;
right: 20px;
width: 7px;
height: 7px;
}
.qa-list dl dt {
padding: 16px 16px 16px 50px;
font-size: 14px;
}
.qa-list dl dt::before {
font-size: 14px;
top: 20px;
left: 20px;
}
.qa-list dl dd::before {
font-size: 14px;
left: 20px;
margin-top: 5px;
}
.qa-list dl dd {
margin: 0;
padding: 16px 16px 16px 50px;
font-size: 14px;
}
.qa-list dl dd p {
margin: 30px 0 0;
}
.qa-list dl dd p:first-child{
margin-top: 0;
}
}

ご指摘いただけると幸いです。
よろしくお願い致します。

回答No.1

4017B

とりあえずこんな感じで動くと思いますが…コレでダメだったら、その質問者が使っているブログサービス側に何か問題がありそうですね。

<style>
.my-accordion {
min-width: 500px;
min-height: 32px;
}
.my-acd-hidden{
display: none;
}
.my-acd-btn {
display: block;
margin: 5px 0; padding: 10px;
background: #069;
cursor: pointer;
position: relative;
}
.my-acd-btn:hover,
.my-acd-hidden:checked + .my-acd-btn
{
color: #fff;
}
.my-acd-btn::before,
.my-acd-btn::after
{
content: '';
width: 20px;
height: 3px;
background: #000;
position: absolute;
top: 50%;
right: 0.5em;
transform: translateY(-50%);
}
.my-acd-btn::after {
transform: translateY(-50%) rotate(90deg);
transition: 0.5s
}
.my-acd-hidden:checked + .my-acd-btn:after {
transform: translateY(-50%) rotate(0);
}
.my-acd-inner {
display: block;
height: 0;
overflow: hidden;
padding: 0;
opacity: 0;
transition: 0.5s;
}
.my-acd-hidden:checked + .my-acd-btn + .my-acd-inner {
height: auto;
opacity: 1;
padding: 0.5em 0.75em;
margin-top: -5px;
background: #5ae;
}
</style>

<div class="my-accordion">
<from>
<input id="my-acd-btn1" class="my-acd-hidden" type="checkbox">
<label for="my-acd-btn1" class="my-acd-btn">MENU 01</label>
<label for="my-acd-btn1" class="my-acd-inner">sub menu 1</label>
</input>
<input id="my-acd-btn2" class="my-acd-hidden"type="checkbox">
<label for="my-acd-btn2" class="my-acd-btn">MENU 02</label>
<label for="my-acd-btn2" class="my-acd-inner">sub menu 2</label>
</input>
<input id="my-acd-btn3" class="my-acd-hidden" type="checkbox">
<label for="my-acd-btn3" class="my-acd-btn">MENU 03</label>
<label for="my-acd-btn3" class="my-acd-inner">sub menu 3</label>
</input>
</from>
</div>

P.S.
文章のみだと実際にどの様なビジュアルを想定しているのかが分かりませんので、とりあえず汎用性の高そうな感じでサンプル記述してみました。この記述例だと、1回クリックするとメニューが開き放しになる様になっています。主にwebページ内の主要コンテンツの中途に挿入される形での使用を想定しますので、webページ最上部などに配置して各カテゴリなどへのリンク(ナビゲータメニュー)として使う場合は、少し使い難いと思います。