Wix Studio Two エディタ：要素設定パネルを操作する

要素設定パネルを使用すると、要素、セクション、ページなどの設定を細かく調整することができます。ブレイクポイント全体で要素がどのように縮小・拡大するかを設定したり、デザインを調整したり、動きを追加したりできるほか、コンテンツをデータソースに接続したりする操作を、すべて 1か所で行うことができます。

「デザイン」タブでは、ブレイクポイントごとに要素の見た目や動作を制御することができます。これは、要素設定パネルを開いた際に最初に表示されるタブで、サイズ、間隔、色、タイポグラフィ、カスタム CSS に至るまで、あらゆる設定がまとめられています。

タブ上部のアイコンをクリックすると、親要素内で選択した要素を配置することができます。これらのアイコンの下には、選択した要素に応じて異なるセクションが表示されます：

• サイズ：要素の幅と高さを設定し、異なる画面でのサイズの変更方法を選択します。
• 要素のデザイン：色、枠線、角、影、タイポグラフィなどの要素の外観を設定します。要素が複数の部分で構成されている場合（例：メニューなど）や、要素にホバー時の状態や無効時の状態が設定されている場合（例：ボタンなど）は、まずスタイルする部分や状態を先に選択してください。
• レイアウト（コンテナとセクション）：親要素内での各要素の配置方法を調整します。グリッドレイアウトを選択したり、パディングを設定したり、オーバーフローコンテンツを処理する方法などを指定したりすることができます。また、「縦の間隔」を「自動」から「手動」に切り替えて、ブレイクポイントごとに要素に異なる間隔を適用することもできます。
• 配置：配置タイプ（例：スティッキー、ピン留めなど）を選択し、マージンやドッキングを設定して、画面サイズが変化しても要素が特定の位置にとどまるようにします。
• 表示：要素の不透明度と回転を設定します。
• カーソル：要素、セクション、またはページにカスタムのカーソルを追加します。
• アンカー：要素に直接リンクできるようにアンカーを追加し、アンカーの URL をコピーします。
• カスタム CSS：選択した要素に独自の CSS を記述します。

「モーション」タブでは、要素やセクションに動きを追加することができます。同じ要素に異なる種類のアニメーションを適用することも可能です。たとえば、要素が読み込まれるとフェードインするようにしたり、訪問者のカーソルに反応するようにしたり、スクロールすると移動するようにしたりすることができます。

モーションの種類を選択します：

• エントランス：要素が読み込まれるとアニメーションが実行されます。たとえば、拡大、フェードイン、チルトなどのアニメーション効果を実行することができます。

• ループ：特定のアクションを必要とすることなく、要素に連続でアニメーションが実行されます。

• スクロール：訪問者がページを上下にスクロールすると、要素でアニメーションが実行されます。

• マウスエフェクト：カーソルが動くと、要素でアニメーションが実行されます。

• クリック：訪問者がクリックすると、要素でアニメーションが実行されます。

• ホバー：訪問者がマウスオーバーすると、要素でアニメーションが実行されます。
  注意：ボタンやメニューなど一部の要素には、ホバー時の状態が組み込まれているため、別のホバー時のアニメーションを追加するオプションは表示されません。ホバー時の状態をカスタマイズするには、「デザイン」タブに移動し、「状態」下の「ホバー」を選択してください。

「設定」タブでは、選択した要素に対して高度な設定を行うことができます。

• データソース：ページ、セクション、またはコンテナをデータソースに接続します。これにより、その内部にある要素が、そのソースのデータ、アクション、機能を利用できるようになります。「＋ソースを接続」をクリックすると、開始することができます。

• プロパティ：選択した要素のコンテンツや動作を編集します。利用可能なオプションは、要素によって異なります。たとえば、ボタンを選択した場合は、テキストやリンクをカスタマイズしたり、ボタンを無効にしたりすることができます。フィールド横の「データに接続」アイコン をクリックすると、手動で値を入力する代わりに、データソースを接続することができます。「AI で設定」をクリックして、Aria にサポートしてもらうことも可能です。

• アクセシビリティ：支援技術を使用するユーザーに対して、要素をアクセシブルなものにします。要素に応じて、用途を設定したり、装飾用としてマークしたり、アクセシブル名を追加したり、スクリーンリーダーが更新情報をどのように読み上げるかを選択したりすることができます。

• 詳細設定：

  • 条件付き表示：データソースからの条件が「true」または「false」だった場合に要素を非表示にします。

  • イベントハンドラ：クリックやマウスオーバーなど、要素にアクションが発生した場合に、関数を実行します。イベントハンドラは、ボタンなどの特定の要素で利用することができます。

詳細については、以下の質問をクリックしてください。