テキストの作成/編集方法

テキストを作成するステップは下記のとおりです。

1.情報を入れるための、モジュールを作る
2.たくさんあるモジュールから『テキスト』を選ぶ
3.あとは文字を打ち込み、デザイン整えて完了！

前回ご説明した通り、Diviはセクション/列/モジュールでできていて、テキストや画像といった情報はモジュールとして入れていきます。

下のように、黒の＋アイコンをクリックするだけです♬

+マークを選ぶと、下のようにたくさんのモジュール/部品例がでてきます。その中から『テキスト』を選んでください。

『テキスト』を選ぶと、編集画面が出てきます。
『コンテンツ』に情報を入れ、『デザイン』を選ぶだけです♬
まずは『コンテンツ』に文字や背景色/画像などの情報を入れていきます。

ここで『テキスト』を選ぶと、このような画面が出てきます。
ここにテキストを打ち込むだけです。メモ帳などに書いていた文章をコピー＆ペーストすることも可能です。（私のPC/ネットワーク環境はそこまで優れていないので、直接打つと少し反応が遅いため、コピー＆ペーストを多用しています。）

テキスト情報を入れることができました♪
テキストモジュールには背景を付けることができます。背景色をつけたり、写真や動画を入れたりすることができます。

（少し細かな説明、読み飛ばしてもOKです。：これから説明する『デザイン』との差が少し分かりにくですが、背景色や画像/動画などの『情報を入れる』ことから『コンテンツ』の中に背景設定があります。）

ファイルや文字などの情報を入れるのはここで完了です。おつかれさまでした♬

ただ、まだ少し寂しいので、デザインをつけていきます。文字のサイズや色を変えたり、枠を付けたり、必要ならふわっと表示されるようなアニメーションをつけることも簡単にできます。

最初に、文字のデザインを変える方法を紹介します。

下のような画面が出てきます。選択するだけ、バーを動かすだけでテキストデザインが変わります。簡単ですね♪

他にどんなデザインを付けることができるの、簡単に紹介しますね。

このようなデザイン効果を付けることができます。
（あえて連続で動かしていますが、普通は最初の1回だけ効果を使います。）

これは、テキストモジュールに「影付きの枠」をつけ、「アニメーション」を設定しています。設定方法はとても簡単で、アイコンをクリックするだけです。ご紹介しますね。

ボックスシャドウ⇒アニメーションの順番で説明します。

おつかれさまでした♬
ここで覚えたデザインの設定方法は、なんと画像や動画など、他の全ての要素でほぼ同じ操作方法ですので、様々なことができるるようになりますよ。

続いて、画像の入れ方をご説明しますね。

画像の作成/編集方法

テキストの作成/編集方法の考え方と基本的には同じですので、ご安心ください♬

1.情報を入れるための、モジュールを作る
2.たくさんあるモジュールから『画像』を選ぶ
3.あとは好きな画像を選び、デザイン整えて完了！

では、初めていきます。

これで完成です♬

周りの影や、アニメーション等のデザイン設定方法は、テキストと全く同じです。今回は初回しませんが、デザインタブにあるフィルター機能を使うと、画像をセピアにしたりすることもできます。試してみて下さい。

おつかれさまでした♬