サイトの「よくある質問」を、クリックで開閉するアコーディオンにするコードを作るツールです。 質問と答えを入力すると、JavaScript不要で動くHTML（details/summary）とCSSが出てきます。 FAQ構造化データ（JSON-LD）も一緒に出力できます。 ブラウザで開くだけで動き、入力した内容は外部に送られません。 5項目・スタイル1種で足りる方は、無料版もあります。https://mall-aibou.booth.pm/items/8927279 ━━━━━━━━━━━━━━━━━━━━ ご注意 ━━━━━━━━━━━━━━━━━━━━ 出力するコードは一般的なブラウザで動くように作っていますが、 お使いのサイトのテーマやCSSによっては、見た目が変わることがあります。 公開前に、実際のページで表示を確認してください。 JSON-LDは、FAQ構造化データを付けたいときの下書きです。 検索結果での表示は検索エンジンの方針によるため、表示されることを保証するものではありません。 ━━━━━━━━━━━━━━━━━━━━ この商品で得られるもの ━━━━━━━━━━━━━━━━━━━━ ◆ 質問と答えを、項目数の制限なしで入力 ◆ 項目の追加、削除、並べ替え ◆ スタイル6種（シンプル罫線、カード、左ライン、塗りつぶし、丸み、Q＆Aバッジ） ◆ 差し色の変更（文字色は背景に合わせて自動で白か濃い色になります） ◆ 右側のプレビューで、開閉の様子をすぐに確認 ◆ HTML と CSS のコピー（JavaScript不要） ◆ FAQ構造化データ（JSON-LD）の出力 ◆ スタイル・HTML・JSON-LDをまとめてコピー ━━━━━━━━━━━━━━━━━━━━ 使い方（3ステップ） ━━━━━━━━━━━━━━━━━━━━ 1. accordion-builder.html をダブルクリックして、ブラウザで開く 2. 質問と答えを入力し、スタイルと差し色を選ぶ（右側のプレビューですぐに確認できます） 3. 「HTML」「CSS」「JSON-LD」のタブでコードをコピーして、サイトに貼る ━━━━━━━━━━━━━━━━━━━━ 動作環境 ━━━━━━━━━━━━━━━━━━━━ ・Chrome / Edge / Safari の最新版 ・ネット接続は不要です ・外部のサーバーと通信しません。広告もトラッキングもありません ━━━━━━━━━━━━━━━━━━━━ できないこと ━━━━━━━━━━━━━━━━━━━━ ・サイトへの自動投稿や、WordPressへの直接の反映はできません（コードをコピーして貼ります） ・入力した内容は保存されません。ページを閉じる前に、コードをコピーしてください ・答えの中でリンクや画像を使うことはできません（文章のみです） ■ 使ってよい範囲 　業務・制作にお使いいただけます。クレジット表記は不要です。 　出力したコードは、ご自身やお客様のサイトで自由にお使いいただけます。 　ツールのファイルそのものの再配布・販売はご遠慮ください。 ■ 同梱物 　accordion-builder.html ／ README.txt TOOL BOX