みなさま、こんにちは＾.＾ｖ
今日も前回に続きについて書いていきたいと思います！！
先日、青森に住んでいる友達と久々に連絡をとりました。
向こうではもうストーブを取り出して使っているそうです……
今年の冬はすごく寒くなるような気がします～.～
みなさまも、まだまだ大丈夫と思わずに、事前に寒さ対策していきましょう！
（台湾生まれの私も、日本の冬の寒さは苦手です．．．．．．）
では、今日のブログでは前回の続きから完成までお伝えしていきたいと思います。
前回は下記のような画面まで進んでいます。↓
（Containerの中にGridが入っている状態）
本日は、前回作った1行、3列のGridにそれぞれ、ImageとParagraphの素材を入れていきたいと思います。
✓Imageとは、HPで必要な写真を貼り付けることが出来る素材のことです。
✓Paragraphとは、HPの中で文書を打てるようにする素材のことです。
①ナビゲーターで表示されているGridを一回クリックして、その後、右上のあるナビゲーターの×を押してください。
⇒
すると、作成中のHPの画面に、前回作ったGridが選択されているのがわかります。
②一番左のマスに、「Ctrl」+「E」を押して、検索バーにImageと入力してEnterを押します。すると、下記の画面へと変わります。
（ショートカットキーを使わず、ナビゲーターボダンの上の方にある「+」ボダンから、Imageという素材を見つけて、左ドラックしながらGridに一番左に放り込むのもオーケーです）↓
⇓
この操作によって、一番左のGridにImage（画像）を差し込むことが出来ます。
③では、実際に写真や画像をアップロードしていきましょう。
上の図の赤〇の部分（ギザギザ模様）をクリックしてください。下記の画面へ変わります。
④Chosing Image（黄色□）をクリックしたら下記の画面になります。
⑤右上のピンク□のUploadを押すと、自分のパソコンに保存してある写真や画像をアップロード出来ます。使う予定の画像を選択して、開くボタンを押すと、自動的にアップロードされます。アップロード終了した写真を一回クリックしたら、そのままGridへ反映されます。
⇓
下記の画面が画像入った時の画面となります。↓
大きさの調整をしたときは、ピンクと黄色の□で囲んでいる場所からできます。
横幅の調整がピンク、高さの調整が黄色になります。
ぜひ数字を入力して実際の大きさを見ながら調整してみてください～（ピクセルでの表記）
今回は何も変更せず元の写真の大きさのままで次へ進みます。
⑥次は、Gridの真ん中のマスに写真についての解説分を入れていきたいと思いますので、
Paragraphという素材を使って文書入力出来るようにしていきます。
真ん中のマスを選択して、左下にGridと表記があるかを確認してください。
そのあとは、素材を入れていきたいので、「Ctrl」+「E」を押し、Paragraphと入力して、Enterを押すと、サンプル文章が入ったParagraphの素材が入ったことを確認できます。↓
⇓
⇓
ここで、一度ナビゲーターを開くと、下記の画面が表記されます。↓
（Containerの中にGridがあり、さらにGridの中にImageとParagraphがあるのが見えます）本当は、このような感じでプログラミングを入力していかないとダメなのですが、今回のノーコードなので、素材を放り込むだけでも簡単なＨＰが作れるとのことです。
⑦次にParagraph内の文字を編集しています。
上記の画面のままで、文字を2回連続左クリックすると編集用のカーソルが出てきます。
では、入力したいテキストを入れていきましょう。↓
入力後に、文字の配置や色、大きさを変えたい時は右上のピンクの□（筆みたいの画がある）をクリックして、「Typography」の欄まで下へスクロールしていくと、
ここで、文字の書式、サイズ、色、配置、スタイルなどの変更が出来ます。
今回は、真ん中揃えて、緑色、20サイズ、行間の空白を40 PXに変更していきます。↓
ピンクの□が今回変更して部分になります。
⑧次に同じようにGridの一番右のマスにも文章を入れていきましょう。（練習）⑥との手順は同じです。↓
ではでは、あと最後の一息です！
⑨今の状態だと、HPを公開した時に、Gridな中の要素がすべて一番上に表記されてしまいます……
これを少し下の方に移動していきたいと思います。
まずは、ナビゲーターを開いて、Gridを選択してください、
上の図のオレンジの□で囲んでいる部分がGridの配置を上下左右好きなところへ移動することが出来ます。
今回は、上図のピンクの□（0）をクリックして、140を選択しています。
これで、Gridを自分が移動したいところへ変更することが出来ました。
➉では、最後のステップへ入ります！
画面の左上に「目」のような印があると思いますが、これをクリックして頂くと、実際のWEBで公開されるときと同じ見方が出来ます。ここで、最終確認をしていけます。↓
今回も長くなりましたが、これで、完成となります！
次回のブログでは、写真素材を事前にアップする方法や背景に色を追加する方法などを伝えたいと思います。
ご覧いただきありがとうございます。
今後も宜しくお願いいたします。