このドキュメントは、Framerを学ぶ日本国内のユーザーが、日本語資料の不足で直面する困難を解消するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用する皆様に少しでもお役に立てれば幸いです。

アコーディオンコンポーネントは、よくある質問（FAQ）やステップバイステップのガイドページでよく使われます。このガイドを通じて、アコーディオンコンポーネントの回答フィールド内にリンクを追加し、プロジェクトに活用してみてください。

アコーディオンコンポーネントをアップデートする

1. 既存の Answerフィールドを削除する

アコーディオンコンポーネントにリンクを追加する前に、まず既存のAnswer変数を削除する必要があります。

• アコーディオンコンポーネント内でVariablesをクリックする

• Answerフィールドを右クリックし、Removeを選択する

注意: Removeオプションはドロップダウンメニュー内にあります。

2. Formatted Textフィールドを追加する

次に、リンクを含むことができるFormatted Textフィールドを新しく追加します。

• 削除したフィールドの場所にFormatted Textを追加し、名前を‘Answer’に指定する

3. Answer変数を再設定する

新しく作成したFormatted Textを実際の‘Answer’変数に接続します。

• 左のパネルでAnswerレイヤーを選択する

• 右のパネルのContentの隣にある+アイコンをクリックする

• Set Variableで‘Answer’を選択する

アコーディオンコンポーネントを編集する

4. アコーディオンにリンクを追加する

これでコンポーネントが新しいフィールドと変数に接続され、回答内容内でリンクの挿入が可能になります。

• 右のパネルで‘Answer’をクリックし、Formatted Textエディタを開く

• ここでリンクを追加したり、テキストに様々な書式を適用して自由に活用する

上記の手順を従ってもリンクが表示されないか編集できない場合は、Framerのお問い合わせページを通じてサポートチームに問い合わせることができます。

この記事はFramer公式ブログの‘How to add links inside the accordion component’の翻訳・アレンジ版です。