賢威のアコーディオン式Q＆Aから「Q」と「A」を非表示にする

賢威では、次のような「アコーディオン式のＱ＆Ａ」が用意されています。

ここには質問文が入ります。: ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

このアコーディオンを、Ｑ＆Ａ以外の用途に使いたいという方もいらっしゃるかと思います。

そんな悩みを解決するCSSです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.2
PHPバージョン：7.4
サーバー：さくらインターネット

アコーディオンから「Ｑ」と「Ａ」を非表示にするCSS

賢威のアコーディオン式Ｑ＆Ａから「Ｑ」と「Ａ」を非表示にするCSSです。

.qa-list dt::before,
.qa-list dd::before {
background: none;
content: '';
}

.accordion-list dt,
.qa-list dd.not-title {
padding-left: 10px;
}

ただ、これをカスタムCSSに記述してしまうと、Ｑ＆Ａとしては使えなくなってしまう為、もう一手間加えました。

特定のクラスを追加すると「Ｑ」と「Ａ」を非表示にするCSS

Ｑ＆Ａとして使わない場合、クラスnot-titleを追加する事で、「Ｑ」と「Ａ」を消すHTMLとCSSです。

<dl class="qa-list accordion-list">
<dt class="accordion-list_btn not-title">ここには質問文が入ります。</dt>
<dd class="accordion-list_cont not-title">ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
</dl>

.qa-list dt.not-title::before,
.qa-list dd.not-title::before {
background: none;
content: '';
}

.accordion-list dt.not-title,
.qa-list dd.not-title {
padding-left: 10px;
}

HTMLは、この部分にクラスnot-titleを追加しています。

クラスnot-titleの場所

背景色と文字色も変更してみる

自分の場合、h2のタイトルと見間違わないように、背景色と文字色も変更したいので、さらにCSSを追加しました。

.qa-list dt.not-title {
color: #05a5ab;
background: #fff;
border: solid 2px #05a5ab;
}

.qa-list dt.not-title:hover {
background: #f3fdfd;
}

これらを適用すると、次のように表示されます。

ここには質問文が入ります。: ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

にゃのらいと

いい感じにゃ。

なお、Ｑ＆Ａとして、使いたい場合は、賢威のマニュアル通り、

<dl class="qa-list accordion-list">
<dt class="accordion-list_btn">ここには質問文が入ります。</dt>
<dd class="accordion-list_cont">ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
</dl>

を記載すれば、Ｑ＆Ａとしても活用できますよ。