フレームなしＦＡＱ
ここに質問を記載します。例：このテンプレートは自由に活用して良いですか？
<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>
フレームありＦＡＱ
Ｑここに質問を記載します。例：このテンプレートは自由に活用して良いですか？+
Ａここに回答を記載します。例：自由にご活用いただけます。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>
フレームありＦＡＱ（角丸）
Ｑここに質問を記載します。例：このテンプレートは自由に活用して良いですか？+
Ａここに回答を記載します。例：自由にご活用いただけます。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>
左線フレームのＦＡＱ
Ｑここに質問を記載します。例：このテンプレートは自由に活用して良いですか？+
Ａここに回答を記載します。例：自由にご活用いただけます。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>