【JINカスタマイズ】アコーディオンを使った「よくある質問」の作り方【コピペでOK】

今回は、WordPressテーマJINでアコーディオンを使った「よくある質問」を作る方法をご紹介します。

アコーディオンは、クリックすると開閉するウェブ上の機能のことで、完成すると下記のようになります。

Qの質問部分をクリックするとAの解答部分が表示されます。

アコーディオンを使うと質問一覧をコンパクトにまとめられるので、質問の数が多い場合は特に、活用されてみると良いと思います。

ショートコードを使って簡単に作れますので、よくあるご質問ページの利便性向上にぜひお役立てください。

よくある質問アコーディオンの設定方法

1. ショートコードを貼り付ける

下記のショートコードをコピーして記事に貼り付けます。

[qa-box01 title="ここに質問を入力"]ここに回答を入力[/qa-box01]

2. 質問と回答を入力

ショートコード内の「ここに質問を入力」の部分に質問を、「ここに回答を入力」の部分に回答を入力します。

[qa-box01 title="予約はいつまでにすればいいですか"]ご希望される日の3日前までにご予約ください。[/qa-box01]

回答で改行する場合は、普通にenterで改行してください。下記のようになります。

[qa-box01 title="予約のキャンセルはできますか"]はい、できます。
ご予約日の前日営業日17時までであればキャンセル料はいただいておりません。[/qa-box01]

※質問も同様に改行可能です。

プレビューで確認すると、このようにアコーディオンが表示されています。

質問を増やす場合は、次のブロックにショートコードを貼り付けて上記の手順を繰り返してください。

これでアコーディオンを使ったよくある質問は完成です。

次に、Q・Aの文字色や、回答の背景色を変更する方法もご紹介します。
CSSコードを扱うため中級者向けになりますが、色を変更したい場合は参考にしてください。

Q&Aの色や背景色を変更する方法

1. 追加CSSにコードを貼り付ける

下記のコードをコピーして、外観＞カスタマイズ＞追加CSSに貼り付けます。

.jin-ac-box02-title::before {
    color: #4f5ed2; /* Qの文字色 */
}

.jin-ac-box02-title::after {
    color: #4f5ed2; /* Qの右端色 */
}

.jin-ac-box02-inner::before {
    color: #f1487c; /* Aの文字色 */
}

.jin-ac-box02-inner {
    background: #fff5f4; /* 回答の背景色 */
}

2. カラーコードを変更する

それぞれのカラーコードをお好きな色に変更して[公開]します。
カラーコードはWEB色見本などを参考にしてください。

上の①〜④とアコーディオン表示の対応は下図をご参照ください。

①と②は同じ色にした方が統一感が出て良いと思います。

以下にいくつかデザインサンプルを作成しましたので、よろしければコピペしてそのままお使いください。

よくある質問アコーディオンデザインサンプル

淡い色、ペールトーン中心ですが、サイトに合う色やお好みの色がありましたらコピーしてお使いください。

※イメージは画像のためクリックできません。

ナチュラル

.jin-ac-box02-title::before {
    color: #a7bd74; /* Qの文字色 */
}

.jin-ac-box02-title::after {
    color: #a7bd74; /* Qの閉じる矢印色 */
}

.jin-ac-box02-inner::before {
    color: #e4af9b; /* Aの文字色 */
}

.jin-ac-box02-inner {
    background: #f9f6eb; /* 回答の背景色 */
} 

パステルポップ

.jin-ac-box02-title::before {
    color: #9ed0b7; /* Qの文字色 */
}

.jin-ac-box02-title::after {
    color: #9ed0b7; /* Qの右端色 */
}

.jin-ac-box02-inner::before {
    color: #f09ca6; /* Aの文字色 */
}

.jin-ac-box02-inner {
    background: #fff5f4; /* 回答の背景色 */
}

ピュアブルー

.jin-ac-box02-title::before {
    color: #c0e4f2; /* Qの文字色 */
}

.jin-ac-box02-title::after {
    color: #c0e4f2; /* Qの右端色 */
}

.jin-ac-box02-inner::before {
    color: #d9ced1; /* Aの文字色 */
}

.jin-ac-box02-inner {
    background: #e9f6fa; /* 回答の背景色 */
}

クリーン

.jin-ac-box02-title::before {
    color: #63a6db; /* Qの文字色 */
}

.jin-ac-box02-title::after {
    color: #63a6db; /* Qの矢印色 */
}

.jin-ac-box02-inner::before {
    color: #8ac26a; /* Aの文字色 */
}

.jin-ac-box02-inner {
    background: #f0f7ec; /* 回答の背景色 */
} 

パリジェンヌ

.jin-ac-box02-title::before {
    color: #97c5bf; /* Qの文字色 */
}

.jin-ac-box02-title::after {
    color: #97c5bf; /* Qの右端色 */
}

.jin-ac-box02-inner::before {
    color: #daaab6; /* Aの文字色 */
}

.jin-ac-box02-inner {
    background: #eef5f4; /* 回答の背景色 */
}

さくら

.jin-ac-box02-title::before {
    color: #ee8a97; /* Qの文字色 */
}

.jin-ac-box02-title::after {
    color: #ee8a97; /* Qの矢印色 */
}

.jin-ac-box02-inner::before {
    color: #d3afba; /* Aの文字色 */
}

.jin-ac-box02-inner {
    background: #fef4f4; /* 回答の背景色 */
} 

まとめ

今回は、JINでアコーディオンを使ったよくある質問を作る方法をご紹介しました。

よくある質問を作る際の参考になれば幸いです。

どうしても設定方法が分からない、代わりに設定して欲しいという時は、Dressingのブログお悩み相談をご利用ください。あなたのご質問にチャットでお答えします。

ブログお悩み相談受付中

Dressingでは、ブログ作成中の疑問やお悩みにチャットを使ってお答えしています。

こんなお悩みありませんか？

• WordPressが思ったより難しくて挫折しそう
• 使い方が分からない、なぜか上手くいかない
• 自分のブログはこのままでいいの？

など、お困りの際はお気軽にご相談ください。

今すぐ解決！

相談してみる