Wix Studio エディタ:ソーシャルバーを追加・カスタマイズする
読了時間:4分
ソーシャルバーを使用して、訪問者にクライアントの SNS アカウントを探索するよう促します。ソーシャルバーには、追加したいプラットフォームのアイコンが表示され、該当するアカウントにリンクされます。アイコンのデザインを選択し、サイズと間隔を調整することもできます。
この記事では、以下の項目について説明します:
サイトにソーシャルバーを追加する
ページにソーシャルバーを追加し、訪問者の目にとまる位置に配置しましょう。たとえば、ソーシャルバーをサイトのヘッダーに表示して、全ページの最上部に表示させることができます。
ソーシャルバーを追加する方法:
- エディタ左側で「要素を追加」
をクリックします。
- 「埋め込み・SNS」をクリックします。
- 「ソーシャルバー」をクリックします。
- ソーシャルバーをページ上の希望の位置にドラッグします。
![ソーシャルバーパネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/3154a899-02a3-4ed8-9d6a-3f1ddf4004ea/078c9efc-3422-4cc2-94c6-6075c4de70c0.jpg)
ソーシャルバーをカスタマイズする
ソーシャルバーにはデフォルトのアイコンが付属していますが、クライアントのニーズに合わせて完全にカスタマイズすることができます。アイコンの置き換え、新しいアイコンの追加、関連するソーシャルリンクの設定が可能です。不要なアイコンは削除することもできます。
ソーシャルバーをカスタマイズする方法:
- エディタでソーシャルバーをクリックします。
- 「ソーシャルリンクを設定」をクリックします。
- ソーシャルバーのカスタマイズ方法を選択します:
新しいアイコンを追加する
アイコンを変更する
SNS リンクを追加・変更する
アイコンを削除する
ソーシャルバーのレイアウトをカスタマイズする
ソーシャルバーのレイアウトと外観をカスタマイズします。アイコンのサイズを変更したり、アイコン間の間隔を調整したり、横・縦表示を選択します。
レイアウトをカスタマイズする方法:
- エディタでソーシャルバーをクリックします。
- 「レイアウト」アイコン
をクリックします。
- 以下のオプションを使用してレイアウトをカスタマイズします:
- アイコンサイズ:SNS アイコンのサイズを設定します。
- 間隔:SNS アイコン間の間隔を設定します。
- レイアウト:アイコンの方向を選択します。
![ソーシャルバーのレイアウトパネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/56c6c575-9bad-454a-8da1-c37ec714d8f7/b44202d8-6cea-4fd4-8cf1-1dd4e18303f0.jpg)
アイコンを反転または回転させる場合:![要素設定パネルの「調整」ドロップダウンのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/562863ee-a0d6-4156-9ac7-c4ab6e0b0054/92e88ee6-1463-4fab-8937-dad724bf079c.jpg)
- エディタでソーシャルバーをクリックします。
- エディタ右上で「要素設定パネルを開く」矢印アイコン
をクリックします。(要素設定パネルはすでに開いている場合もあります)
- 「調整」をクリックし「回転」横で希望の角度(例:180度)を入力します。
![要素設定パネルの「調整」ドロップダウンのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/09/14/562863ee-a0d6-4156-9ac7-c4ab6e0b0054/92e88ee6-1463-4fab-8937-dad724bf079c.jpg)