top of page

Wixの編集方法(ボタン)

今回はボタンの使い方を説明していきます。

ボタンもカスタマイズでいろいろなことができるので、

ホームページでよく使われる下記の2点ができるオーソドックスなボタンを作ってみることにします。

・押すと別のページに飛ぶ(まだ別のページを作っていないのでYahooへのリンクを設定)

・ボタンの上にマウスを置くと、色が変わる


Wixのエディターを開いて、左側のプラスボタンからボタンを選択します。



テキストだけのボタンだけでなく、アイコンボタン、画像ボタン等も選択できます。



今回は、おすすめボタンの最初のものを追加してみます。

ボタンが追加され、その上にメニューが表示されます。

メニューの内容は下記の通りです。

・テキスト・アイコンの変更

・レイアウト

・デザイン

・アニメーション

・リンク



まずは、テキスト・アイコンの変更から、テキストの変更と、テキストの横にアイコンを付けることができるので設定してみます。

「表示する内容を選択」というところから、「テキストとアイコン」を選択して、アイコンを選ぶことができます。

アイコンも様々な種類があり、お好みのものを選びましょう。



「リンク先」を押すと、リンク用のメニューが出てきます。

ページ:このwebサイトのあるページを設定

ウェブアドレス:URLを設定

セクションまたはアンカー:セクションはページの中のひとまとまりの部分、アンカーは好きな場所に設定でき、その場所に移動することができる

その他、メールを送信できたり、電話をかけたりすることも可能です。



今回はYahooのURLを設定して、

リンク先ページの表示方法を「新しいタブ」にしました。

設定が完了すると、このようになっていると思います。



続いては、マウスをボタンの上に置いたときに色が変わる設定をしていきます。

デザインを選択して、下に出てくるデザインをカスタマイズを選択してください。

すると、通常時とホバー時というタブが表示されると思います。

ホバー時というのが、マウスを乗せた時になります。



ホバー時に、ボタンの色だけでなく、テキストのスタイルや角の丸みなども変更できます。

さて、これで変更は完了したので、右上のプレビューで実際の動きを確認しましょう!

クリックをするとYahooへ飛ぶことも確認できると思います。





bottom of page