Wix エディタ:折りたたみ可能テキストをデザインする
読了時間:3分
折りたたみ可能テキストを追加・設定したら、サイトに合わせてデザインや設定をカスタマイズしてみましょう。サイトの見た目や配置、およびブランドに合わせて、フォント、書式設定、間隔を調整することができます。
この記事では、下記の項目について説明します:
テキストのデザインをカスタマイズする
折りたたみ可能テキストを設定したら、書式、配置、フォントなどのデザインをカスタマイズできます。
テキストのデザインをカスタマイズする方法:
- テキストボックスをクリックします。
- 「デザインを変更」をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- ドロップダウンメニューから「テキスト」を選択し、以下のオプションを使用してカスタマイズします:
- スタイル:ドロップダウンメニューからテキストスタイルを選択して、特定のフォントとサイズをテキストに適用します。
- フォント:ドロップダウンメニューからテキストのフォントを選択します。
- 文字サイズ:必要に応じてテキストを小さくしたり大きくしたりします。
- 書式設定:太字や斜体などの設定を適用して、テキストをさらにカスタマイズします。文字色、ハイライトの色、アウトラインの色を選択することもできます。
- 配置:テキストの配置とテキストの方向を変更します。
- 文字と行の間隔:文字と行の間隔を狭くしたり広くしたりします。
- 影:影を追加してテキストに 3D 効果を与えます。影のさまざまな部分をカスタマイズして、テキストを目立たせることができます。
![折りたたみ可能テキストのデザインパネル。カーソルがフォントドロップダウンメニューにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/10/12/527e298b-067e-4ca7-8504-44d639340843/50e6b64b-0aba-456a-9f22-faf051934e31.png)
展開ボタン / リンクボタンのデザインをカスタマイズする
「展開・折りたたみ」レイアウトを選択した場合は、展開ボタンと折りたたみボタンをデザインすることができます。「リンクをクリック」レイアウトを選択した場合は、リンクボタンを変更して好みの見た目にすることもできます。
以下の 3種類の状態をカスタマイズすることができます:
- 通常時:操作される前のボタンの表示方法。
- ホバー:マウスオーバーされた際のボタンの表示方法。
- 無効:無効にした際のボタンの表示方法。
これらの状態ごとにボタンを個別に調整するか、「その他の状態にデザインを適用」アイコン
をクリックして、すべての状態に同じ見た目を適用します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/08/4b736432-d412-4b75-b6ee-cafad8e71624/2b6da865-c7e2-4230-bff0-31584f140d88.png)
テキストボックスのボタンをカスタマイズする方法:
- テキストボックスをクリックします。
- 「デザインを変更」をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- ドロップダウンメニューから「ボタン」を選択します。
- 「通常時」、「ホバー」、「無効」のいずれかのタブをクリックし、以下の設定を使用して各状態のデザインをカスタマイズします:
- スタイル:ドロップダウンメニューからテキストスタイルを選択して、特定のフォントとサイズをボタンに適用します。
- フォント:ドロップダウンメニューからテキストのフォントを選択します。
- 文字サイズ:必要に応じてボタンのテキストを小さくしたり大きくしたりします。
- 書式設定:ボタンのテキストに太字や斜体などの設定を適用して、ボタンをさらにカスタマイズします。文字色、ハイライトの色、アウトラインの色を選択することもできます。
- 配置:テキストの配置とテキストの方向を変更します。
- 文字と行の間隔:文字と行の間隔を狭くしたり広くしたりします。
- 影:影を追加してボタンに 3D 効果を与えます。影のさまざまな部分をカスタマイズして、ボタンを目立たせることができます。
![折りたたみ可能テキストのデザインパネル。カーソルが文字サイズスライダーにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/10/12/8f166181-a754-4ac6-a624-6ae89bd4dc58/7e9fd6ea-7816-41c7-a433-0b550d8fc637.png)
お役に立ちましたか?
|