Wix ボタンの使い方からできることまで解説！【初心者限定の優しい解説】

Wixではよく使うボタンですが、白紙からサイトを作成してみるとボタンの追加や、編集の仕方が分からずサイトの作成を断念したことがある人もいることでしょう…

ボタンの編集の仕方を理解することでデザインの幅が広がったり、思い通りのボタンが作れるのでサイト制作も楽しくなります！

この記事ではWix初心者の方でも読み進めながらボタンの作成ができるようにしているので編集画面を見ながらぜひトライしてみて下さい。ではさっそくボタンの使い方を解説していきます！

ボタンの追加

まずはボタンを追加し、作り方を覚えましょう！
サイト編集　→　画面から画面左にあるツールバー　→　「＋」の追加ボタン　→　ボタン　をクリック。

そうすると何やらたくさんのボタンが出てきましたが、基本的にはは「おすすめボタン」を使用すれば問題ないです。
使いたいボタンを選択し、クリックするとボタンがサイト編集画面に現れます。

ボタンの編集

ボタンを追加すると画像のような編集アイコンたちが現れます。
「テキストアイコンの変更」の他に下記が左から順にあります。

• レイアウト
• デザインを変更
• アニメーション
• リンクを追加
• ヘルプ
• データに接続

アニメーションやヘルプ、データ接続は基本的にはイジりません。
次に各編集アイコンの使い方を見ていきましょう！

テキストアイコンの変更

テキストアイコンの変更をクリックすると画像のような編集項目が3つでます。それぞれ解説します。

ボタンは何を表示しますか？

こちらは選択形式になっており、テキストとアイコン・アイコンのみ・テキストのみ・何も表示しないの4つから選べます。
テキストとアイコンを選ぶとアイコンも表示できます。

アイコンの変更をしたければ「アイコンを選択」の画像をクリックし、自分のフォルダからアップロードするかWix画像・動画素材から検索して使用できます。

表示するテキスト

ここにボタンに設定するテキストを入れます。

リンク先

ここにボタンをクリックしたときのURLを設定します。

レイアウト

レイアウトでは主にテキスト・アイコンの位置、配置、テキストボックスとアイコンの余白の設定をします。

テキスト・アイコンの位置

アイコンの位置を上下左右のどこに指定するかを設定します。

配置

テキスト、アイコンを左寄せ、中央寄せ、右寄せ、両端寄せに設定できます。

テキストボックスとアイコンの余白

こちらの数値を変えることでテキストとアイコンの間の余白を調整できます。

デザインを変更

デザインを変更　→　デザインをカスタマイズ　をクリックすると画像のような編集項目が出ます。
レイアウトは先程解説した内容になります。その他の編集項目は下記でそれぞれ解説していきます。

背景の塗りつぶし

ボタンの背景色を設定します。
色を変更したい場合は塗りつぶしをカスタマイズするをクリックし、選択。
使いたい色がない場合は色の追加をクリックし、6桁のカラーコードを入力する。
カラーコードはこちらを参考にすると良いと思います。

テキスト

ボタンのテキストを編集します。
フォントの種類、サイズ、色などのデザインを変更できます。

枠線

ボタンの枠線を設定できます。
色は塗りつぶしから、枠線の太さは数値を変更すると調整できます。

角

ボタンの角を丸くできます。
数値を変更することで角丸の度合いを変更できます。

影

ボタンに影をつけれます。
「影を編集する」から影の角度や大きさなどを変更できます。

アイコン

ボタンのアイコンを編集できます。
アイコンサイズや色、角度、表示、非表示などを変更できます。

以上がボタンの基本的な編集の仕方になります。
これらの編集の仕方を使いこなせるようになるとデザインの幅が格段に広がります！

ボタンにホバー(マウスオン)した時のデザインの作り方

ボタンの編集とセットで覚えたいのはボタンにホバー(マウスオン)したときのデザインの作り方です。
よく使う例だけご紹介します。

ホバー時にボタンを透過

ボタンの編集で解説したデザインを変更の編集を開きます。
通常時の右にあるホバーをクリックし編集します。

背景の塗りつぶしをクリック　→　100%　の数値を70%などに変更。
すると下記ボタンのようにホバー時にボタンが透過する使用に変更できます。

ホバー時にボタン反転

先程と同様に、デザインを変更の編集を開きます。
通常時の右にあるホバーをクリックし編集します。

画像のように背景の塗りつぶしの色が黒、テキストとアイコンの色が白の場合は
ホバー時の背景の塗りつぶしの色は白、テキストとアイコンの色は黒にすると
下記ボタンのようにホバー時、きれいに色が反転します。

以上がボタンにホバー(マウスオン)した時のデザインの仕方の解説になります。
ボタンにホバー(マウスオン)した時のデザインは色々な方法がまだまだあるので実際にWixでパーツをイジりながら試して見てください！

まとめ

今回はWixのボタンの使い方を解説しました。
ここまで解説した内容を実践することで、簡単なボタンならすぐに作ることができるようになっています！
また、こちらの記事ではWix内のボタンで簡単に作れるデザインを紹介しているので、ぜひ合わせて読んでみて下さい。