Wix エディタ:折りたたみ可能テキストを追加・設定する

読了時間:4分
折りたたみ可能テキストは、表示したい情報がたくさんある場合に最適です。テキストの一部は非表示になっており、訪問者は展開ボタンをクリックすることでテキスト全文を表示するか、本文へのリンクをクリックして表示することができます。
Wix ライブサイトでテキストが展開・折りたたまれている GIF です。
ヒント:
折りたたみ可能テキストをストリップ、カラム、またはコンテナに添付し、ボタンで展開することを選択した場合、訪問者がクリックすると、コンテナ / カラム / ストリップ全体がテキストとともに展開されます。

ステップ 1 | 折りたたみ可能テキストを追加する

最初のステップは、折りたたみ可能テキストボックスをサイトに追加することです。さまざまなフォント、行数、その他の設定で、さまざまなスタイルを利用できます。

折りたたみ可能テキストをサイトに追加する方法:

  1. エディタ左側で「パーツを追加 をクリックします。
  2. テキスト」をクリックします。
  3. 段落」をクリックします。
  4. 折りたたみ可能テキスト」までスクロールダウンします。
  5. 選択したテキストボックスをクリックまたはドラッグし、サイトに追加します。
エディタの「パーツを追加」パネル。カーソルが折りたたみ可能テキストのプリセットにマウスオーバーしています。

ステップ 2 | 折りたたみ可能テキストのレイアウトを調整する

ページにテキストボックスを追加したら、訪問者が本文全体を読む方法を選択します。現在のページの全文を開くボタン、または全文に訪問者を誘導するリンクを追加します。
また、訪問者がクリックする前に表示される配置、間隔、行数を設定することもできます。

テキストのレイアウトを調整する方法:

  1. テキストボックスで「レイアウト」アイコン  をクリックします。
  2. オプションを使用してレイアウトをカスタマイズします:
    • テキストの表示方法を選択:テキスト全体の表示方法を選択します:
      • 折りたたまれている:訪問者にはテキストプレビューが表示され、本文全体を読むには展開ボタンまたはリンクをクリックする必要があります。
      • すべて表示:テキスト全体がサイトに表示され、折りたたまれることはありません。
    • 表示される行数:プレビューに表示されるテキストの行数を選択します。
    • 整列ボタン:展開ボタンまたはリンクボタンの配置を設定します。
    • テキストとボタンの間隔:間隔を調整します。
折りたたみ可能テキストのレイアウトパネル。カーソルが整列ボタンにマウスオーバーしています。
注意:
表示されるオプションは、テキストを折りたたむか、すべて表示するかによって異なります。

ステップ 3 | テキストを入力して設定する

折りたたみ可能テキストボックスの外観と動作をカスタマイズしたら、全文を入力します。
展開ボタンと折りたたみボタンのテキストを編集するか、訪問者が続きを読む読むようにリンクを設定します。
ご存知でしたか?
折りたたみ可能テキストボックスには最大 120,000文字まで追加できるので、長い本文を表示するのに最適です。

テキストを編集・設定する方法:

  1. 折りたたみ可能テキストボックスをクリックします。
  2. テキストを編集」をクリックします。
  3. テキストを編集」下のボックスにテキストを入力、または選択したテキストを貼り付けます。
  4. ボタンを押すと?:訪問者が全文を表示する方法を設定し、オプションを使用してカスタマイズします:
    • 展開:訪問者は、展開ボタンをクリックしてテキスト全体を表示できます:
      • 展開ボタンのテキスト:展開ラベルのテキスト(「続きを読む」など)を入力します。
      • 折りたたみボタンのテキスト:折りたたみラベルのテキスト(「折りたたむ」など)を入力します。
    • リンク:訪問者はリンクをクリックして全文を表示することができます:
      • リンクボタンのテキスト:リンクのテキスト(「クリックして続きを読む」など)を入力します。
      • ボタンのリンク先:テキスト全体へのリンク情報を入力します。
  5. (オプション)「SEO・アクセシビリティ」下のドロップダウンメニューからディスクリプションを追加し、テキストの見出しタグを選択して、テキストタイプ(見出し、段落など)を定義します。 テキストの定義についての詳細はこちら
注意:
利用可能なオプションは、「サイト訪問者がテキストをさらに読み込む方法」下で選択した内容によって異なります。
折りたたみ可能テキストno設定パネル。カーソルがテキストフィールドにマウスオーバーしています。

お役に立ちましたか?

|