サイポン・ホームページの作り方～ブロック追加編～
2020/06/29
サイポン・ホームページの作り方～ブロック追加編～
サイポンでホームページを作ってみよう！
こんにちは！
サイポン認定講師のMaSaKiです☆彡
前回は、サイポンのスゴイ機能として、ホームページ制作編について紹介しました。
↓↓↓
こちら
今回は、サイポン・ホームページの作り方として、ブロック追加編を紹介します！
動画１．サイポン・ホームページの作り方～ブロック追加編～
サイポンを使ってホームページを作るにあたり、
・100種類あるテンプレートを使うにしても多少はカスタマイズしたい
・はじめから自分で作りたい
などのご要望があるかと思います。
・100種類あるテンプレートを使うにしても多少はカスタマイズしたい
・はじめから自分で作りたい
などのご要望があるかと思います。
そんなご要望に応えるため、サイポン・ホームページの作り方と題して、少しずつ、作り方の説明をしていきたいと思っています。
最終的には、ご自身で自由自在にホームページを作れるようになりますので、楽しみにしていてください♪
もちろん、「なるほど～！」と納得して終わりではなく、実際に作業をやってみてくださいね^^
今回は、ブロック追加についての説明となります。
(動画内では、ブロック追加だけではなく、とても大切な「基礎知識」にも触れています。)
最終的には、ご自身で自由自在にホームページを作れるようになりますので、楽しみにしていてください♪
もちろん、「なるほど～！」と納得して終わりではなく、実際に作業をやってみてくださいね^^
今回は、ブロック追加についての説明となります。
(動画内では、ブロック追加だけではなく、とても大切な「基礎知識」にも触れています。)
動画で触れている主な基礎知識
・サイポンのログイン画面 (0:55～)
・サイポンのログイン画面 (0:55～)
・編集画面の3つのパネル名 (1:51～)
・画面サイズの適正化 (2:07～)
・作業の「戻る」と「進む」の方法 (5:06～)
・ホームページの「公開」と「更新」の方法 (6:20～)
これらの方法を知りたい場合は、動画をご覧くださいませ。
それでは、サイポンへログインした後からブロック追加について説明していきます。
まずは、ログイン後の画面で、「+新規サイト作成」をクリックします。
・作業の「戻る」と「進む」の方法 (5:06～)
・ホームページの「公開」と「更新」の方法 (6:20～)
これらの方法を知りたい場合は、動画をご覧くださいませ。
それでは、サイポンへログインした後からブロック追加について説明していきます。
まずは、ログイン後の画面で、「+新規サイト作成」をクリックします。
図１．ログイン後の画面の「+新規サイト作成」
次の画面では、100種類以上あるテンプレートを選択せずに、「+サイト作成 (白紙)」をクリックします。
図２．「+サイト作成 (白紙)」
そして、ポップアップ画面が出てくるので、「OK」をクリックしてください。
図３．「このテンプレートで作成します。」の「OK」
ログイン後の画面に新しく作ったホームページができあがりますので、いよいよ編集に入っていきます。
まずは、新しく作成した白紙のホームページの「このサイトを開く」をクリックします。
次に、ページ一覧に空ページが1つできていますので、「編集する」をクリックします。
※ホームページは複数のページから成り立ちます。今時点では、最初の1ページを編集していくという位置付けになります。
まずは、新しく作成した白紙のホームページの「このサイトを開く」をクリックします。
次に、ページ一覧に空ページが1つできていますので、「編集する」をクリックします。
※ホームページは複数のページから成り立ちます。今時点では、最初の1ページを編集していくという位置付けになります。
図４．白紙ホームページの「このサイトを開く」
図5.空ページの「編集する」
そして、編集パネルの「ブロック追加+」をクリックしてください。
「ブロック追加+」をクリックすると、8つのブロックから選択することができます。
２．テキストブロック
３．ボタンブロック
４．区切り線ブロック
５．画像ブロック
６．地図ブロック
７．動画ブロック
８．余白ブロック
※ページは複数のブロックから成り立ちます。今時点では、ブロックをこれから追加していくという位置付けになります。
「ブロック追加+」をクリックすると、8つのブロックから選択することができます。
8つのブロック
１．見出しブロック２．テキストブロック
３．ボタンブロック
４．区切り線ブロック
５．画像ブロック
６．地図ブロック
７．動画ブロック
８．余白ブロック
※ページは複数のブロックから成り立ちます。今時点では、ブロックをこれから追加していくという位置付けになります。
図6.編集パネルの「ブロックを追加+」
図7.8つのブロック
今回は、練習も兼ねて、上記1～8のブロックを1つずつ追加してみましょう！
ブロックを追加する度に、8つのブロックの選択画面が出てくるので、1～8まで順番に選ぶと効率が良いです。
もし、万が一、ブロック追加を途中で止めてしまったり、順番を間違えてブロック追加を行った場合は、ブロックを追加したい場所の近くのブロックをクリックすることで、追加できますので、ご安心ください^^
ブロックを追加する度に、8つのブロックの選択画面が出てくるので、1～8まで順番に選ぶと効率が良いです。
もし、万が一、ブロック追加を途中で止めてしまったり、順番を間違えてブロック追加を行った場合は、ブロックを追加したい場所の近くのブロックをクリックすることで、追加できますので、ご安心ください^^
図8.ブロックを選んで上か下に「+ブロックを追加」する
また、ブロックは追加するだけでなく、「削除」も「複製」もできます。
図9.ブロックの削除
図10.ブロックの複製
以上、「サイポン・ホームページの作り方～ブロック追加編～」でした。
いかがでしたでしょうか？
ブロック追加、ぜひ、やってみてください♪
もし、作業をしている中で分からない点などございましたら、下記にコメントしていただけると幸いです^^
ブログ記事に取り上げて説明させていただけたらと思っています！
具体的であればあるほど、的を得た説明ができると思います♪
いかがでしたでしょうか？
ブロック追加、ぜひ、やってみてください♪
もし、作業をしている中で分からない点などございましたら、下記にコメントしていただけると幸いです^^
ブログ記事に取り上げて説明させていただけたらと思っています！
具体的であればあるほど、的を得た説明ができると思います♪
