Q&Aを設けたいけど、テーマに良い感じの装飾がない...
そんな疑問をすぐにで解決します！
この記事では、コピペだけで使えるおしゃれな Q&Aデザイン集を紹介しています。
記事をよりオシャレにアップグレードしたい方は、ぜひチェックしてみてください。
目次
Q&Aを設置する手順
まず最初に、WordPress 記事にQ&A（よくある質問）を設置するやり方から見ていきましょう。
主な手順は次の4つです！
- WordPressの投稿画面を開く
- 「カスタムHTML」を挿入する
- 本記事のサンプルコードをコピペする
- 「カスタムHTML」をブロックに変換する
図解付きの手順を見たい人は、以下のボタンをタップしてください。
もっと詳しい手順を見る
まずは WordPress の管理画面にログインし、投稿記事や固定ページの編集画面を開きましょう。
編集画面左上の 
ボタンをクリックします。
ブロック一覧が表示されたら、「カスタムHTML」を選んでください。
最後に「カスタムHTML」をブロックに変換し、Q＆Aを可視化します。
「カスタムHTML」を選択した状態で「︙」をクリック。「ブロック変換」を選択してください。
これでブロックの見た目が切り替わり、Q&A の折りたたみメニューが実際に表示されるようになります。
テキストは自由に編集できるので、質問や回答をお好みの内容に変更して活用してください！
アコーディオン形式の Q&A は、初期状態を「開いた状態」か「閉じた状態」かを指定することができます。
■ 指定方法
開いた状態で表示したい時：<details>タグの中に open="open" を書き加えます。
閉じた状態で表示したい時：open="open" は不要です。
Q＆A(よくある質問) デザイン集
ここからは Q&A（アコーディオン形式）のサンプルデザインを紹介していきます。
お好みのデザインを選んで、コードをコピー＆貼り付けるだけで、あなたの記事にもすぐ反映できるので、ぜひ使ってみてくださいね！
では、さっそく見ていきましょう。
フレームなしＱ＆A
ここに質問を記載します。例：このテンプレートは自由に活用して良いですか？
<div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div>
</details>
アイコンQ： アイコンA： 下線：
サンプルデザイン
デザインの知識がなくても大丈夫ですか？
コピペで使ってSEO的に問題ありませんか？
✙ タップしてコードを見る
<details style="border-bottom: solid 1px #ffffff; margin-bottom: 0.5ex;" open="open"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; position: relative;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #9896d6; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">Ｑ</span><span style="color: #7e7e7e; font-weight: bold;">ここに質問(Q)を記載してください。</span></summary><div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div></details>
<details style="border-bottom: solid 1px #ffffff; margin-bottom: 0.5ex;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; position: relative;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #9896d6; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">Ｑ</span><span style="color: #7e7e7e; font-weight: bold;">ここに質問(Q)を記載してください。</span></summary><div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div></details>
サイトに掲載されているHTMLコードはそのまま使っても大丈夫？
CSSやJavaScriptの知識がなくても設置できますか？
✙ タップしてコードを見る
<details style="border-bottom: solid 1px #e6e6e6; margin-bottom: 0.5ex;" open="open"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; position: relative;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #808080; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">Ｑ</span><span style="color: #808080; font-weight: bold;">ここに質問(Q)を記載してください。</span></summary><div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div></details>
<details style="border-bottom: solid 1px #e6e6e6; margin-bottom: 0.5ex;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; position: relative;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #808080; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">Ｑ</span><span style="color: #808080; font-weight: bold;">ここに質問(Q)を記載してください。</span></summary><div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div></details>
このサービスの料金体系どのようになっていますか？
契約期間に縛りはありますか？
✙ タップしてコードを見る
<details style="border-bottom: solid 1px #ffffff; margin-bottom: 0.5ex;" open="open"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; position: relative; background-color: #e0ffe9;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #8ac79c; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">Ｑ</span><span style="color: #808080; font-weight: bold;">ここに質問(Q)を記載してください。</span></summary><div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div></details>
<details style="border-bottom: solid 1px #ffffff; margin-bottom: 0.5ex;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; position: relative; background-color: #e0ffe9;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #8ac79c; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">Ｑ</span><span style="color: #808080; font-weight: bold;">ここに質問(Q)を記載してください。</span></summary><div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div></details>
WordPressでも使えますか？
スマホでも表示崩れしませんか？
✙ タップしてコードを見る
<details style="border-bottom: solid 1px #ffffff; margin-bottom: 0.5ex;" open="open"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; position: relative; background-color: #d3deed8c;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #5f7abf; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">Ｑ</span><span style="color: #5f7abf; font-weight: bold;">ここに質問(Q)を記載してください。</span></summary><div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div></details>
<details style="border-bottom: solid 1px #ffffff; margin-bottom: 0.5ex;"><summary style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; position: relative; background-color: #d3deed8c;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #5f7abf; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold;">Ｑ</span><span style="color: #5f7abf; font-weight: bold;">ここに質問(Q)を記載してください。</span></summary><div style="padding: 10px 15px; display: flex;"><span style="display: flex; justify-content: center; align-items: center; min-width: 24px; max-width: 24px; height: 24px; background: #ff8d8d; color: white; border-radius: 50%; margin-right: 12px; font-size: 14px; margin-top: 1px; font-weight: bold;">Ａ</span><span style="color: black; margin-left: 0px;">ここに回答(A)を記載してください。</span></div></details>
フレームありＱ＆A
Ｑここに質問を記載します。例：このテンプレートは自由に活用して良いですか？+
Ａここに回答を記載します。例：自由にご活用いただけます。FAQテンプレートの他にも、Webページをオシャレにする『装飾デザイン』をいくつも掲載しているので、ぜひ他の記事もチェックしてみてください。
<details style="background: linear-gradient(to right, #f9f9f9, #f9f9f9); margin-bottom: 0.5ex; border: 1px solid #ddd; border-radius: 5px;" open="open"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #ddd;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
背景 α： 背景 β： 枠色： 文字：
サンプルデザイン
Ｑデザインの知識がなくても大丈夫ですか？+
Ａはい。テンプレートはすべて初心者にも扱いやすいように構成されており、文字や色などの変更も直感的に行えます。
Ｑコピペで使ってSEO的に問題ありませんか？+
Ａ基本的に問題ありませんが、テキスト文面まで同一の場合はコピーコンテンツと見なされる可能性があります。内容はカスタマイズしてご利用ください。
✙ タップしてコードを見る
<details style="background: linear-gradient(to right, #ffffff, #ffffff); margin-bottom: 0.5ex; border: 1px solid #c4c4c4; border-radius: 5px;" open="open"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #c4c4c4;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: linear-gradient(to right, #ffffff, #ffffff); margin-bottom: 0.5ex; border: 1px solid #c4c4c4; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #c4c4c4;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
Ｑサイトに掲載されているHTMLコードはそのまま使っても大丈夫？+
Ａはい。掲載されているコードはすべてご自由にお使いいただけます。商用・個人問わず利用可能ですが、再配布や販売はご遠慮ください。
ＱCSSやJavaScriptの知識がなくても設置できますか？+
Ａ掲載しているFAQメニューはHTMLだけで動作するため、CSSやJavaScriptの知識がなくてもコピペで簡単に導入できます。
✙ タップしてコードを見る
<details style="background: linear-gradient(to right, #e5f5ff, #ebf7ff); margin-bottom: 0.5ex; border: 1px solid #ffffff; border-radius: 5px;" open="open"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #216491; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px; border-top: 1px solid #ffffff;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: linear-gradient(to right, #e5f5ff, #ebf7ff); margin-bottom: 0.5ex; border: 1px solid #ffffff; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #216491; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px; border-top: 1px solid #ffffff;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
Ｑこのサービスの料金体系どのようになっていますか？+
Ａプランは基本的に月額制で提供していて、サービス内容に応じてカスタマイズも可能です。詳細な料金については、こちらをご参照ください。
Ｑ契約期間に縛りはありますか？+
Ａ契約期間は最低でも3ヶ月～となっております。その後は月単位での契約更新が可能です。
✙ タップしてコードを見る
<details style="background: linear-gradient(to right, #fffff0, #fffff0); margin-bottom: 0.5ex; border: 1px solid #ddd; border-radius: 5px;" open="open"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px; border-top: 1px solid #ddd;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: linear-gradient(to right, #fffff0, #fffff0); margin-bottom: 0.5ex; border: 1px solid #ddd; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px; border-top: 1px solid #ddd;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
ＱWordPressでも使えますか？+
ＡWordPressの「カスタムHTML」ブロックに貼り付けるだけで動作します。ただし、テーマによってはデザインが異なる場合があります。
Ｑスマホでも表示崩れしませんか？+
Ａ基本的にはレスポンシブ対応の構造になっており、スマートフォンでも問題なく表示されます。ただし、外部CSSと併用する場合は個別の調整が必要になることもあります。
✙ タップしてコードを見る
<details style="background: linear-gradient(to right, #ffffff, #dbf1ff); margin-bottom: 0.5ex; border: 1px solid #ddd; border-radius: 5px;" open="open"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px; border-top: 1px solid #ddd;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: linear-gradient(to right, #ffffff, #dbf1ff); margin-bottom: 0.5ex; border: 1px solid #ddd; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px; border-top: 1px solid #ddd;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
フレームありＱ＆A（角丸）
Ｑここに質問を記載します。例：このテンプレートは自由に活用して良いですか？+
Ａここに回答を記載します。例：自由にご活用いただけます。FAQテンプレートの他にも、Webページをオシャレにする『装飾デザイン』をいくつも掲載しているので、ぜひ他の記事もチェックしてみてください。
<details style="background: #ffffff; border: 1px solid #e6e9ed; border-radius: 15px; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary id="additem02" style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #f5f7fa; position: relative;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary>
<div style="padding: 10px 15px;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
背景 α： 背景 β： 枠色： 文字：
サンプルデザイン
Ｑデザインの知識がなくても大丈夫ですか？+
Ａはい。テンプレートはすべて初心者にも扱いやすいように構成されており、文字や色などの変更も直感的に行えます。
Ｑコピペで使ってSEO的に問題ありませんか？+
Ａ基本的に問題ありませんが、テキスト文面まで同一の場合はコピーコンテンツと見なされる可能性があります。内容はカスタマイズしてご利用ください。
✙ タップしてコードを見る
<details style="background: linear-gradient(to right, #ffffff, #ffffff); margin-bottom: 0.5ex; border: 1px solid #c4c4c4; border-radius: 5px; " open="open"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #c4c4c4;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: linear-gradient(to right, #ffffff, #ffffff); margin-bottom: 0.5ex; border: 1px solid #c4c4c4; border-radius: 5px;"><summary style="padding: 10px 15px; cursor: pointer; position: relative; display: flex; align-items: center;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary>
<div style="padding: 10px 15px; border-top: 1px solid #c4c4c4;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
Ｑサイトに掲載されているHTMLコードはそのまま使っても大丈夫？+
Ａはい。掲載されているコードはすべてご自由にお使いいただけます。商用・個人問わず利用可能ですが、再配布や販売はご遠慮ください。
ＱCSSやJavaScriptの知識がなくても設置できますか？+
Ａ掲載しているFAQメニューはHTMLだけで動作するため、CSSやJavaScriptの知識がなくてもコピペで簡単に導入できます。
✙ タップしてコードを見る
<details style="background: #ffffff; border: 1px solid #e2e3e4; border-radius: 15px; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary id="additem02" style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #80caff; position: relative;"><span style="display: inline-block; color: white; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #ffffff; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: white; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: #ffffff; border: 1px solid #e2e3e4; border-radius: 15px; overflow: hidden; margin-bottom: 0.5ex;"><summary id="additem02" style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #80caff; position: relative;"><span style="display: inline-block; color: white; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #ffffff; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: white; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
Ｑこのサービスの料金体系どのようになっていますか？+
Ａプランは基本的に月額制で提供していて、サービス内容に応じてカスタマイズも可能です。詳細な料金については、こちらをご参照ください。
Ｑ契約期間に縛りはありますか？+
Ａ契約期間は最低でも3ヶ月～となっております。その後は月単位での契約更新が可能です。
✙ タップしてコードを見る
<details style="background: #f9fff0; border: 1px solid #e6e9ed; border-radius: 15px; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary id="additem02" style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #ff6161; position: relative;"><span style="display: inline-block; color: white; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #ffffff; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: white; position: absolute; left: 90%; font-size: 25px;">+</span></summary>
<div style="padding: 10px 15px;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: #f9fff0; border: 1px solid #e6e9ed; border-radius: 15px; overflow: hidden; margin-bottom: 0.5ex;"><summary id="additem02" style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #ff6161; position: relative;"><span style="display: inline-block; color: white; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #ffffff; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: white; position: absolute; left: 90%; font-size: 25px;">+</span></summary>
<div style="padding: 10px 15px;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
ＱWordPressでも使えますか？+
ＡWordPressの「カスタムHTML」ブロックに貼り付けるだけで動作します。ただし、テーマによってはデザインが異なる場合があります。
Ｑスマホでも表示崩れしませんか？+
Ａ基本的にはレスポンシブ対応の構造になっており、スマートフォンでも問題なく表示されます。ただし、外部CSSと併用する場合は個別の調整が必要になることもあります。
✙ タップしてコードを見る
<details style="background: #ffffff; border: 1px solid #c2c2c2; border-radius: 15px; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary id="additem02" style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #a8beff; position: relative;"><span style="display: inline-block; color: white; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #ffffff; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: white; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: #ffffff; border: 1px solid #c2c2c2; border-radius: 15px; overflow: hidden; margin-bottom: 0.5ex;"><summary id="additem02" style="display: flex; align-items: center; padding: 10px 15px; cursor: pointer; background: #a8beff; position: relative;"><span style="display: inline-block; color: white; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #ffffff; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: white; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 10px 15px;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
左線フレームのＱ＆A
Ｑここに質問を記載します。例：このテンプレートは自由に活用して良いですか？+
Ａここに回答を記載します。例：自由にご活用いただけます。FAQテンプレートの他にも、Webページをオシャレにする『装飾デザイン』をいくつも掲載しているので、ぜひ他の記事もチェックしてみてください。
<details style="background: #f7f9fc; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary style="border-left: 4px solid #2daffe; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #2daffe; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #000000; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
背景 α： 左線： 文字：
サンプルデザイン
✙ タップしてコードを見る
<details style="background: #ebedff; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary style="border-left: 4px solid #7a95ff; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #7a95ff; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #828282; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: #ebedff; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;"><summary style="border-left: 4px solid #7a95ff; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #7a95ff; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #828282; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
✙ タップしてコードを見る
<details style="background: #f7f9fc; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary style="border-left: 4px solid #98a2a9; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #98a2a9; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #5d6d7e; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: #f7f9fc; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;"><summary style="border-left: 4px solid #98a2a9; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #98a2a9; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #5d6d7e; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
✙ タップしてコードを見る
<details style="background: #ffffff; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary style="border-left: 4px solid #ff8d8d; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #ff8d8d; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #8282a2; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: #ffffff; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;"><summary style="border-left: 4px solid #ff8d8d; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #ff8d8d; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #8282a2; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;">
<p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
✙ タップしてコードを見る
<details style="background: #f0fff4; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;" open="open"><summary style="border-left: 4px solid #97d3a6; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #97d3a6; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #82b08d; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
<details style="background: #f0fff4; border-radius: 0; overflow: hidden; margin-bottom: 0.5ex;"><summary style="border-left: 4px solid #97d3a6; padding: 10px 15px; cursor: pointer; font-weight: 500; position: relative; display: flex; align-items: center; user-select: none; color: #333;"><span style="display: inline-block; color: #97d3a6; margin-right: 12px; text-align: center; line-height: 25px; font-size: 20px; font-weight: bold;">Ｑ</span><span style="color: #82b08d; margin-left: 0px; font-weight: bold; padding-right: 10%;">ここに質問(Q)を記載してください。</span><span style="margin-right: 10px; color: #5d6d7e; position: absolute; left: 90%; font-size: 25px;">+</span></summary><div style="padding: 15px; background: white;"><p style="margin-bottom: 0;"><span style="color: #ff8d8d; font-size: 20px; font-weight: bold; margin-right: 12px;">Ａ</span>ここに回答(A)を記載してください。</p></div></details>
デザインを登録して「ワンクリック」で使いまわそう！
装飾を使いまわしたい場合に、毎回コードを入力するのって正直めんどうですよね…。
そんなときに便利なのが、WordPressの「非同期パターン」機能。
よく使うデザインパーツを登録すれば、ワンクリックで呼び出せるようになる便利な機能です。
非同期パターンは、たったの３ステップで利用できます。
- ボタンを設置する
- 非同期パターンに登録する
- 登録した Q&A 装飾を呼び出して使う
次のボタンをタップすると、図解つきの詳しいをご覧いただけます。
もっと詳しい手順を見る
設置した装飾のブロックを選択し「︙」をクリックし、「パターンを作成」を選択してください。
続いて表示される「新規パターン作成」画面に、以下を内容を入力したのち「追加」ボタンをクリックします。
- 名称：好きな名前を入力
- カテゴリー：空白
- 同期：OFF
これで Q&A の装飾が非同期パターンに登録されました！
さっそく登録した Q&A装飾を記事内に呼び出してみましょう。
投稿ページ左上の ボタンをクリックします。
「パターン」タブを開き、マイパターンから「STEP２で登録したQ&A装飾」を選択すると、Q&A の装飾ブロックを設置できます。
お疲れさまでした！これで非同期パターンの登録から呼び出しまでの流れは完了です。
一度登録しておけば、次回からはワンクリックでいつでも使えるので、記事作成がグッと効率化しますよ！
この記事の内容は以上となります。
～ 最後に ～
この記事では、テーマやプラグインを使わずに、おしゃれな Q&A（アコーディオンメニュー）を実装する方法をご紹介しました。
コードをコピペするだけで簡単に取り入れられるので、目的に合わせて気軽に取り入れてみてください。
また、このほかにも、見出し・ボックス・ボタンなど、装飾パーツをまとめたデザイン集を公開しています。
気になった方は、ぜひチェックしてみてください！
～ こちらの記事もおすすめ ～
＼シェアしてくれたらうれしいです！／