目次
それでは、簡単なコンテンツ作りに入りましょう。今回は右側に画像。左側にテキストコンテンツという単純なコンテンツを作成していきます。
動画解説
1.画像コンテンツを入れてみる
※クリックすると画像が大きくなります。
画面右下に【<>】というボタンがありますので、これを左に押したり右に押したりして【イメージ】というメニューを探してみましょう。
【イメージ】というメニューが見つかったら、配置したい場所にドラック＆ドロップで動かしてみます。
【イメージ】というメニューが見つかったら、配置したい場所にドラック＆ドロップで動かしてみます。
※クリックすると画像が大きくなります。
すると、モジュールの中の色が変化して「イメージが指定されていません。設定ボタンを押してイメージをアップロードして下さい」というメッセージが出てきます。
また、そのモジュールにカーソルを合わせると今度は上部に小さなメニューが出て来ます。
（左部に出てくるサブメニューとは意味合いが違うのでご注意下さい）
また、そのモジュールにカーソルを合わせると今度は上部に小さなメニューが出て来ます。
（左部に出てくるサブメニューとは意味合いが違うのでご注意下さい）
【左から順に】
①設定ボタン
②コピーボタン
③上下左右レイアウト位置変更ボタン
④モジュールを削除
という意味合いになりますので、念のため覚えておきましょう。
今回は画像の設定ボタンですので、最左部分の設定ボタンをクリックします。
※クリックすると画像が大きくなります。
ページ最下部に機能が豊富なスタイルメニューが出てきますので、イメージをアップロードをクリックします。
すると、イメージのアップロード画面が立ち上がりますのでドラック＆ドロップで画像をアップロードして最後に画面右下の青いボタン「Confirm」をクリックします。
すると、イメージのアップロード画面が立ち上がりますのでドラック＆ドロップで画像をアップロードして最後に画面右下の青いボタン「Confirm」をクリックします。
※クリックすると画像が大きくなります。
これでページに画像が挿入されました。必ず最後に「変更を公開」を押して変更を確定させて下さい。
先ほどの設定ボタンで余白（マージン・パディング）や、イメージ自体のサイズ変更・ボーダーを付ける・背景色を変えるなど様々な機能が付いているのですが後にまとめてご説明致します。
先ほどの設定ボタンで余白（マージン・パディング）や、イメージ自体のサイズ変更・ボーダーを付ける・背景色を変えるなど様々な機能が付いているのですが後にまとめてご説明致します。
2.テキストコンテンツを入れてみる
※クリックすると画像が大きくなります。
次はテキストコンテンツを入れ込む方法です。画像と同じようにみ画面の最下部左の「< >」ボタンで【テキスト】を見つけ出し、入れ込みをしたいモジュールにドラック＆ドロップで持っていきます。
※クリックすると画像が大きくなります。
テキストコンテンツを入れ込んだモジュールにカーソルを合わせると「コンテンツを編集」というメニューが出てきますのでクリックします。
すると、見慣れたコンテンツエディタが出てきますのでテキストを打ち込みます。ここではテキストの色の変更や背景色の変更なども出来ます。最後に決定ボタンを押すと編集が終了します。
すると、見慣れたコンテンツエディタが出てきますのでテキストを打ち込みます。ここではテキストの色の変更や背景色の変更なども出来ます。最後に決定ボタンを押すと編集が終了します。
※クリックすると画像が大きくなります。
これだけだと背景が少し寂しいので、背景色を付けてみましょう。コンテンツ欄の設定ボタンをクリック後、下部メニューのスタイリングをクリックします。
背景色という編集画面項目があるので、クリックしてカラーピッカーで調整します。最後に【✔】ボタンをクリックして確定します。
背景色という編集画面項目があるので、クリックしてカラーピッカーで調整します。最後に【✔】ボタンをクリックして確定します。
※クリックすると画像が大きくなります。
さらに背景色を付けた事により、テキストの上下左右の余白（Padding)を開けてみましょう。
ページ最下部のスライダーで背景色のあたりからイチ番右にスライドさせます。すると、垂直方向の余白と水平方向の余白という項目が出てきますのでスライダーを少し右に持って行ってそれぞれ少し開けてみましょう。
ページ最下部のスライダーで背景色のあたりからイチ番右にスライドさせます。すると、垂直方向の余白と水平方向の余白という項目が出てきますのでスライダーを少し右に持って行ってそれぞれ少し開けてみましょう。
※クリックすると画像が大きくなります。
これで綺麗に余白が空きましたね。最後に必ず「変更を公開」を押して変更を保存しましょう。