STUDIO操作の基本として文字装飾はマスターしておきたいところです。これまで学習した、ボックスモデル、画像操作に加えてこの文字装飾ができるようになれば、STUDIOの基本はほぼOKといってよいでしょう。

文字の色・大きさ・シャドウといった「スタイル設定」、文章としてのレイアウトである「段組み」、そしてリンク・アニメーションなど「動き」をつける方法を学びます。

ここまで学べば、シンプルなWEBサイトであれば、十分に機能するものが作れますよ！

本記事で学ぶ内容
１、STUDIO 文字の装飾方法
２、STUDIO 文字のフォントを変える方法
３、STUDIO 文章の配置（右寄せ・左寄せ…）と文字組み（縦書き・横書き）の指定方法
４、STUDIO 文字にリンクを付ける方法
５、STUDO 文字にアニメーションをつける方法

STUDIO 文字の装飾方法（大きさ・色・シャドウ）

では、まず画面左の「T」アイコンからドラッグ＆ドロップでテキストボックスを挿入します。このようにテキストを選択した状態にすると、スタイルバー（画面上部）に「テキスト」というタブが現れます。

このスタイルバーの「テキスト」タブから**「文字間」「行間」「サイズ」「フォント」「太さ」「イタリック（斜体）」「下線」「色」「シャドウ」**が設定できます。

本章では、WEBサイトを作成する上で必ず必要になる「文字サイズの調整」「文字色の変更」「文字にシャドウをつける」方法をピックアップしてご紹介します。

STUDIO 文字サイズの調整

スタイルバーの**「サイズ」**にカーソルを合わせると、文字サイズの選択肢が現れます。選択肢は10から288ポイントですが、288ポイントより大きな数字も、直接数字を打ち込むことで適用することができます。なお、10.5などの小数点のあるサイズは表せません。

STUDIO 文字色の調整

スタイルバーの左はしの方に、**「色」**と書かれた項目がありますね。これをクリックすると、下図のようなメニューが展開されます。

メニューは５つの項目で構成されています。順に見ていきましょう。

（図中）①は、色を登録する機能です。よく使う色を登録しておくことで、都度カラーコードを入力せずに、色を呼び出すことができます。「＋」をクリックすると、今表示されているカラーコードの色が登録されます。

②はカラーコードです。16進数モードとRGBモードを切り替えることができます。ここに直接、英数文字を入力して色を指定することもできます。

③は透明度の設定です。向かって一番左が透明度0.0（完全に透明）、一番右が透明度1.0（完全に不透明）になります。現在は、「完全に不透明」に設定されています。このバーの中の白丸を動かすことで設定できます。

④で「色相」、つまり赤、緑、黄色、ピンク…などの色を決めます。

⑤のパネルで、先ほど決めた色に対し、「彩度（鮮やかさ）」「明度（明るさ）」を決めます。⑤のパネルを見た時、上下方向が明度（下にいくほど暗くなる）、左右が彩度（右に行くほど鮮やか）です。ここで選択されている色は③のカラーコードに自動で反映されます。

STUDIO 文字にシャドウをつける

「色」の隣の項目に「シャドウ」があります。これをクリックすると、同じようにメニューが展開されます。

メニュー内にはいくつかデフォルトで、よくあるシャドウのパターンが登録されています。ご自分で「X」「Y」「Blur（ぼかし）」を調整して、影の位置やぼかし度を調整することもできます。

また、colorから、シャドウ部分の色を選択できます。

STUDIO 文字のフォントを変える方法

フォントを変えたい文字を選択し、スタイルバーの「フォント」にカーソルを合わせましょう。デフォルトの選択肢が現れます。最初は選択肢が少ないです…が、ここでがっかりしてはいけません!!

「＋」をクリックしてみましょう。

画面右側に、フォントメニューが展開されます。ここから、なんと「Google Fonts」「TypeSquare」にアクセスし、フォントを適用できるのです！

好みのフォントが見つからない場合は、検索窓かキーワードを入れて検索することもできます。また、アイコンからは「明朝体」「ゴシック体」「筆記体」または「手書き風文字」など別に検索することができます。

「styles」をクリックすると、そのフォントが対応しているスタイル（ふと文字、イタリックなど）を展開し、選択できるようになります。

STUDIO 文章の配置・文字組を変更する方法

STUDIOで文章を入力したときに、（Wordファイルの文章ように）**「右揃え」「左揃え」「中央寄せ」**などを変更するにはどうすればよいでしょうか。

そんなときは、配置を変えたいテキストのエリアをクリックして「選択された状態」にし、画面上部スタイルバーの**「テキスト」タブ**から変更を行えます。

「両端揃え」にすると、テキストボックスの幅いっぱいに文章が広がります。ちょっと余白がほしいときは、「テキスト」タブから**「ボックス」タブ**に切り替えてパディングをつけるなどして、うまく調整してみてください！

さらに、**「縦書き」「横書き」といった「文字組み」**を変更したいときは、先ほどの「配置」のとなりのアイコンから指定することができます。

STUDIO 文字にリンクを付ける方法

この章では、STUDIOを使ったWEBサイトで、ページ内リンクおよび外部サイトリンクをつける方法をご紹介します。

STUDIO 内部リンクを設定する

例として、以下のようなWEBサイトを想定します。

まず、リンクから、同じページの別の場所に移動する方法をご説明します。「お問い合わせはこちら」という文字をクリックすると、同ページ下部の「お問い合わせブロック」に飛ぶよう設定してみます。

STEP1 リンク先（今回は黄色で示した「お問い合わせブロック」）にIDをつけます。

今回は２ブロック先のエリアにある「お問い合わせ」という文字にID名（今回は#contantとしています）をつけました。

STEP 2 リンクをつけたい文字（今回は最初のセクションの「お問い合わせはこちら」）にリンクを付けます。

画面右のメニューから「リンク」➔「ページ」を選択します。そして「ページを検索」という窓内をクリックすると、ページ内の各要素のIDが選択肢として現れます。リンクさせたい先（今回はSTEP1で設定した #contact）を選んでクリックしましょう。

ページが複数ある場合、サイト内の他のページをリンク先として設定することもできます。

これで、内部リンクが設定できました。しっかりリンクが機能しているかどうか不安な時は、ライブプレビューから確認してみましょう。

STUDIO 外部サイトのリンクを設定する

外部サイトのURLをリンク先として設定するには、どうすればよいでしょうか。

先ほどと同じように、「お問い合わせはこちら」を選択した状態で、画面右のメニューを展開し、「リンク」の項目を設定します。今回は、「ページ」ではなく**「URL」**を選択してください。

ここに、リンク先のURLをコピペしましょう。

リンクが機能しているか、プレビューで確かめたら、完了です！

STUDO 文字にアニメーションをつける方法

STUDIOのアニメーションは、設定次第でかなり複雑なものを作ることもできますが、今回はシンプルに、マウスをホバーすると文字が大きくなるパターンを解説します。

まず、アニメーションをつけたい文字をクリックして選択された状態にし、スタイルバーの**「モーション」タブ**を開きます。

画面右端の**「条件付きスタイル」から「ホバー」を選択します。「ホバー」が選択された状態で、「モーション」**を設定すると、ホバーしている間はこの動きをしますよという設定ができるのです。

なお、「出現時」を選ぶと、そのページ（またはセクション）を開いたタイミングでアニメーションが開始します。

次に、選択した文字にどんな動きをつけたいかを設定します。

「イージング」「時間」「遅延」は、アニメーションが進行する時間や速度に関する設定です。そして、「移動」「回転」「スケール」「傾き」は、要素がどんな動きをするかを設定するものです。

今回は、ホバー中は文字を大きくするという設定にしたいので、**「条件付きスタイル」が「ホバー」になっている状態で、スケールをX（横）、Y（縦）ともに２（２倍）**と入力します。

そして、「時間」で動作開始から終了までの（時間的な）長さ、「遅延」でアニメーション開始までの遅れ時間、「イージング」で動作速度のパターンを設定します。

「イージング」はなかなかイメージが難しいので、ご自身で設定を変えて色々と試してみるのがおすすめです。

「イージング」について、今回の「文字が大きくなる」という動作を例にもう少し説明を加えます。イージングは、設定時間内での要素の動き（今回は「拡大」という動き）について、「等速で要素が拡大する」か、「最初じわじわ動いた後、急にバンっと大きくなる」または「バンっと大きくなってから、ゆっくりと最終的な大きさに落ち着く」などといった速度の緩急に関するパターンを指定していると理解しましょう。

いかがでしたか？

文字の装飾、動きをマスターすることで、「基礎編」から一歩進んだ、オリジナリティあるWEBサイトが作れるようになったかと思います。

機能をどんどん活用して、思い通りのデザインをSTUDIOで実現しましょう！