Wix Blocks:アクションバーを設定する
読了時間:4分
Wix Blocks はすべての Wix Studio ユーザー様にリリースされました。Wix Blocks にアクセスするには、Wix Studio に参加してください。
Wix Blocks の設定タブでは、ウィジェットとそのパーツがサイトにインストールされた際のエディタでの外観と動作を決定できます。
アクションバーについて
サイト制作者がサイトにウィジェットをインストールしてエディタを開くと、他の Wix サイトパーツと同様に、ウィジェットとそのパーツにフローティングアクションバーが表示されます。たとえば、これはウィジェットのボタンのアクションバーで、サイト制作者はボタンに対してさまざまなアクションを実行できます:
![ボタンアクションバー](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/10/fbe91e0c-c702-4219-840d-203e6ec89963/3c550a05-4aac-4c5b-8681-f7eaf217e493.png)
Wix Blocks を使用すると、これらのアクションバーを変更できます。ボタンを追加、削除、または並べ替えることができます。また、ボタンがクリックされたときに開くパネルなどを設定できます。編集オプションは、ウィジェットを選択するか、ウィジェットの要素を選択するか、および選択した要素によって異なります。
アクションバーを編集することで、サイト制作者がサイトにアプリをインポートする際に、アプリをカスタマイズするためのオプションを増やすことができます。また、ウィジェットで変更できる内容を制限することもできます。
UX ガイドライン:
明確で効果的なアクションバーについてのガイドラインはこちらの UX ガイドラインをご覧ください。
アクションバーを編集する
アクションバーを編集する方法:
- 「設定」タブをクリックして、設定モードに入ります。
- ウィジェットで正しいパーツを選択するか、「ウィジェット」パネルからウィジェット全体を選択します。
2通りの方法でアクションバーを変更できます:
- 表示される「アクションバーの編集」から:
![「アクションバーの編集」ウィジェット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/10/fc59151e-0431-4fc6-b50b-580224960fc7/063c38d5-f696-4b9e-8f17-f769bf58a250.png)
- または、右側の「要素設定パネル」の「アクションバー」セクションから(パネルが表示されていない場合は、「要素設定パネル」アイコン
をクリックして展開してください)。
![要素設定パネルでアクションバーを編集](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/10/cf973f41-993a-4253-bc49-d988b2c998a2/1615311f-0cc5-4ab3-96ce-7ba1dcd998f3.png)
アクションボタンを削除・追加する
- アクションバーボタンにマウスオーバーして削除するボタンを確認し、「削除」をクリックしてそのボタンを削除します。
![「アクションバーの編集」の削除ボタン](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/10/70c6a84c-2b5d-40fc-bc8e-2f41ee189043/6228a556-31fe-4aee-9cf2-009fa27b9e80.png)
- 「アクションバーの編集」パネルで「+追加」を選択するか、右側の「要素設定パネル」の「アクションバー」セクションで「アクションボタンの追加」を選択して、削除したボタンを追加します(パネルが表示されない場合は、「要素設定パネル」アイコン
をクリックして展開してください)。
アクションボタンの設定を変更する
- アクションバーボタンにマウスオーバーすると、変更可能な設定があるボタンを確認できます。
- 「アクションボタンの設定」ボタンをクリックします。
![アクションボタンの設定](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/10/937ce2d1-0ab0-42a8-8510-396161ba6c44/b4e5eb8c-151c-4199-9d76-717762c66abd.png)
- アクションボタン設定用に開たいパネルまたはダッシュボードページを選択します。また、新しいカスタムパネルを作成 して、アクションボタンに割り当てることもできます。「カスタムパネルを作成」をクリックすると、「パネル」タブに移動します。
![メインアクションボタンのパネル](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/10/f7e76e71-5c47-4faa-924f-ea5e2d8be033/966366af-9c55-4fb0-8e6f-78d74c91ad61.png)
注意:
- アクションボタンを追加する際は、パネルまたはダッシュボードページを割り当てる必要があります。割り当てない場合、「要素設定パネル」
に警告が表示されます。
- 「設定」タブで行った変更は、すべてのデザインプリセットに影響します。
- 明確で効果的なアクションボタンについての UX ガイドラインをご一読ください。
お役に立ちましたか?
|