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

※当サイトにはプロモーションが含まれています。

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

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

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

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

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

ワードプレス環境

テーマ:賢威8
WordPressバージョン:5.8.x
PHPバージョン:7.4.x
サーバー:さくらインターネット

※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます。

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

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

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

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

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

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

Q&Aとして使わない場合、クラスnot-titleを追加する事で、「Q」と「A」を消す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;
}

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

ここには質問文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。
にゃのらいとにゃのらいと

いい感じにゃ。

なお、Q&Aとして、使いたい場合は、賢威のマニュアル通り、

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

を記載すれば、Q&Aとしても活用できますよ。

補足:ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

外観 > カスタマイズ
追加CSS」を選択します。
追加CSS

追加したいCSSを記述します(コピペして貼り付けます)。

公開」ボタンを押して保存すれば完了です。

全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

追加CSSを公開

なお、ブラウザにキャッシュが残っていると、前のデザイン(CSS)が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード(ハードリフレッシュ)をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

Windows Mac
Google Chrome 【Ctrl+F5】
【Ctrl+Shif+R】
【Command+Shift+R】
Microsoft Edge 【Ctrl+F5】
【Ctrl+Shif+R】
【Command+Shift+R】
Mozilla Firefox 【Ctrl+F5】
【Ctrl+Shif+R】
【Command+Shift+R】
Safari(Mac) 【Command+Option+R】


強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]
1冊ですべて身につくWordPress入門講座 [ Mana ] 2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザ マナ 発行年月:2022年03月24日 予約締切日:2022年01月26日 ページ数:344p サイズ:単行本 ISBN:9784815609405 Mana(MANA) 日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

今すぐ使えるかんたん WordPress やさしい入門[6.x対応版] [ 桑名
今すぐ使えるかんたん WordPress やさしい入門[6.x対応版] [ 桑名 1,760円(税込)【送料込】

楽天ブックス

桑名 由美 はつみ 技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバン クワナ ユミ ハツミ 発行年月:2023年09月28日 予約締切日:2023年06月02日 ページ数:256p サイズ:単行本 ISBN:9784297136253 桑名由美(クワナユミ) 2023年8月、合同会社ワイズベスト

HTMLサイトをWordPressにする本 [ 久保田 涼子 ]
HTMLサイトをWordPressにする本 [ 久保田 涼子 ] 2,640円(税込)【送料込】

楽天ブックス

久保田 涼子 西原 礼奈 ソシムエイチティーエムエルサイトヲワードプレスニスルホン クボタ リョウコ ニシハラ アヤナ 発行年月:2023年08月29日 予約締切日:2023年06月06日 ページ数:360p サイズ:単行本 ISBN:9784802614214 久保田涼子(クボタリョウコ) 「ワクワクするモノ・時間・場所を生み出す」をテ

ゼロから学ぶ はじめてのWordPress [ 泰道ゆりか ]
ゼロから学ぶ はじめてのWordPress [ 泰道ゆりか ] 1,980円(税込)【送料込】

楽天ブックス

泰道ゆりか SBクリエイティブゼロカラマナブハジメテノワードプレス タイドウユリカ 発行年月:2022年10月12日 予約締切日:2022年07月22日 ページ数:352p サイズ:単行本 ISBN:9784815615222 泰道ゆりか(タイドウユリカ) Webデザイナー/株式会社CORELILY代表取締役。立教大学卒業後、銀行に就職。

たった1日で基本が身に付く! WordPress 超入門 [改訂2版] [ 佐々
たった1日で基本が身に付く! WordPress 超入門 [改訂2版] [ 佐々 1,980円(税込)【送料込】

楽天ブックス

佐々木 恵 リブロワークス 技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハン ササキ メグミ リブロワークス 発行年月:2022年04月14日 予約締切日:2022年01月05日 ページ数:192p サイズ:単行本 ISBN:9784297126957 佐々木恵(ササキメグミ) 2002年より独学でWe

楽天ウェブサービスセンター