テキストを追加するには、左サイドバーにある「T」をキャンバスにドラッグ & ドロップします。 

編集するときは、テキストボックスをダブルクリックして編集します。 

テキストのスタイルを変更するには、変更したいテキストを選択してトップバーの下の「テキスト」タブを使用します。

テキストのスタイルプロパティ

トップバーから設定できるテキストのスタイルプロパティです。

  • 文字間

テキスト間の幅を設定できます。

  • 高さ

テキストの行間を設定できます。

  • サイズ
  • フォント

STUDIOでは、59種類のGoogle Fontsから選べます。

  • 太さ

テキストを太く、細くできます。

  • 配置

左揃え、中央、右揃えの設定ができます。

カラーパレットについては、こちらをご確認ください。

※現状、テキストにはグラデーションやシャドウは適用できません。


STUDIOでは二種類のフォントサービスを使用する事が可能です。

Googleフォント

STUDIOはGoogleが提供しているwebフォントとを使用しています。ウェブサイトの見出しから本文まで、どんなレイアウトデザインにも当てはめられるように59種類ものフォントを用意しています。

※フォントのアップロードは現時点では対応していません

TOPバーのフォントの「+」をクリックするとGoogleフォントパネルが左から出てきます。
好きなフォントを検索するか、カーソルを合わせて好みのフォントを見つけてみましょう。

一度使ったフォントは自動的にTOPバーのフォントパネルに残ります。

モリサワフォント

STUDIOでは株式会社モリサワが提供するWebフォントサービス「TypeSquare」を正式導入し、500種類以上の書体がSTUDIO上での利用可能です。

1.テキストを選び、TOPメニューにあるフォントの+(追加)を選択します。

2.フォントパネルが開くので、右側にあるTypeSquareを選択し、「TypeSquareを使用」をクリックして完了です!

*STUDIO上の言語設定が日本語になっている場合のみ設定可能です。

自由に好きなフォントを選びましょう。

テキストボックスのスタイル変更、ボタンの作成

テキストを編集する以外に、テキストボックスの色やスタイルを変更することができます。

テキストボックスの背景色やスタイルを変更することで、ボタンの作成が可能です。

テキストボックスのスタイルを変更するには:

  1. トップバーから「ボックス」タブに切り替えます。
  2. 好みに合わせて、背景色や枠線を変更します。

ボックスのスタイル変更については、こちらをご確認ください。

マウスオーバーの効果を追加して、ボタンをクリック可能に見せることもできます。詳しくは、こちらをご確認ください。

Did this answer your question?