Wix Studio エディタ:折りたたみ可能テキストを追加・カスタマイズする
読了時間:4分
折りたたみ可能テキストは、表示したい情報がたくさんある場合に最適です。テキストの一部は非表示になっており、訪問者は展開ボタンをクリックするか、本文へのリンクをクリックすることでテキスト全体を表示させることができます。
![ボタンをクリックしてページ上の折りたたみ可能テキストを展開するライブサイトの例](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/19/7c34f5ba-6783-4f79-8b3a-4c993a47be67/92bc1749-a662-4ea0-b107-43a250cd0042.gif)
この記事では、折りたたみ可能テキストの操作方法について説明します:
折りたたみ可能テキストを追加する
ニーズに応じて、異なるスタイルの折りたたみ可能テキストをページに追加することができます。プリセットされた折りたたみ可能テキストには、現在のページでテキストを展開させるボタンを備えたものと、テキスト本文があるページに訪問者をリダイレクトさせるリンクを備えたものがあります。
折りたたみ可能テキストを追加する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「テキスト」をクリックします。
- 「折りたたみ可能テキスト」をクリックします。
- 選択したテキストボックスをページ上にドラッグします。
![「要素を追加」パネルの「テキスト」タブのスクリーンショット。折りたたみ可能テキストが表示されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/20/6b6ab21d-fb71-4d86-bb47-7443dff4de4d/5f4e6d9d-a02b-4015-8530-b8ca2b842510.png)
折りたたみ可能テキストのレイアウトを調整する
テキスト本文を訪問者にどのように表示させるかを選択します。現在のページで全文を展開できるようにするか、全文が記載されたページに訪問者をリダイレクトさせるようにするかを選択することができます。
また、訪問者がクリックする前に表示されるテキストの行数、ボタンの配置、およびテキストとボタンの間隔を設定することもできます。
テキストのレイアウトを調整する方法:
- 折りたたみ可能テキストボックスをクリックします。
- 「レイアウト」アイコン
をクリックします。
- 次のオプションを使用してレイアウトをカスタマイズします:
- テキストの表示方法を選択:テキスト全体の表示方法を選択します:
- 折りたたまれている:訪問者にはテキストプレビューが表示され、本文全体を読むにはボタンまたはリンクをクリックする必要があります。
- すべて表示:テキスト全体が折りたたまれずにページに表示されます。
- 表示される行数:訪問者がボタンをクリックして残りのテキストを表示する前に表示させておくテキストの行数を選択します。
- 整列ボタン:訪問者が続きを読むためにクリックするボタンの配置を、左、右、または中央に揃えます。
- テキストとボタンの間隔:テキストとボタンの間隔を調整します。
- テキストの表示方法を選択:テキスト全体の表示方法を選択します:
![折りたたみ可能テキストのレイアウトパネルと利用可能なオプションのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/20/2e2fc5e0-ab92-4d52-b6b6-4f7fb686a1ee/c5a440d5-15db-4d9b-ad12-500b95671f89.png)
折りたたみ可能テキストを編集する
折りたたみ可能テキストボックスを追加したら、「テキストを変更」をクリックして本文全体(最大 120,000文字)を入力します。また、訪問者が続きを読むためのボタンやリンクのテキストを編集することもできます。
テキストを入力・編集する方法:
- 折りたたみ可能テキストボックスをクリックします。
- 「テキストを変更」をクリックします。
- 「テキストを変更」下に全文を入力するかペーストします。
- ボタンの動作を決定します:
- 展開:ボタンをクリックすると、現在のページのテキストボックスが展開され、テキスト全体が表示されます。
- リンク:ボタンをクリックすると、訪問者は全文を含む別のページにリダイレクトされます。「ボタンのリンク先」下でリンク先を選択します。
- ボタンに表示するテキストを入力します。
![折りたたみ可能テキストボックスで「テキストを変更」をクリックすると表示されるパネルとオプションのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/20/59f3fbda-3c7a-4eef-ac2e-922953894552/908dafc9-01fa-4950-8f55-632ee635d9bf.png)
折りたたみ可能テキストをデザインする
ページの雰囲気に合わせて折りたたみ可能テキストをデザインします。ボックスの見た目(背景色など)を調整したり、テキストの書式を設定したり、全文を表示させるボタンやリンクをカスタマイズすることができます。
折りたたみ可能テキストをデザインする方法:
- 折りたたみ可能テキストボックスをクリックします。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「デザイン」までスクロールダウンします。
- 「何をデザインしたいですか?」下でオプションを選択します :
- テキスト:テキストを含むボックス(例:背景色、枠線、影など)と実際のテキスト(フォント、サイズなど)をカスタマイズします。
- ボタン:訪問者が全文を見るためにクリックするリンクまたはボタンをデザインします。「通常時」「ホバー」「無効」の 3種類の状態について調整することができます。
注意:
現在、折りたたみ可能テキストではテキストの拡大縮小オプションは利用できません。
![要素設定パネルで折りたたみ可能テキストで利用可能なデザインオプションを示したスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/07/20/7f1c74be-d1d2-4083-bf8e-357c9d6baff8/3b70a575-eec9-415b-8f95-8517a536289d.png)