【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の色や背景色を変更する方法

事前準備

このカスタマイズではCSS(スタイルシート)を編集しますので、子テーマでのカスタマイズを推奨します。

子テーマをお使いでない場合は、下記公式サイトから子テーマダウンロードしてWordPressにインストール→有効化してからカスタマイズを行なってください。

JIN【子テーマ】のダウンロード

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: #a69d90; /* Qの文字色 */
 } 

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

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

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

パステルポップ

.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: #a99899; /* Qの文字色 */
 } 

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

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

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

ピュアブルー

.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のウェブサポートを活用してみませんか?

WordPressのお悩みに経験豊富な専門スタッフが対応します。設定方法のご説明から、代行設定まで柔軟に承ります。

ホームページ運営でお困りの際は、ぜひDressingにご相談ください。

PR