テンプレートを使わずにサイポンでホームページを作ってみよう！2020年2月版
サイポンでは豊富なテンプレートが用意されていて、テンプレートから選択するだけでホームページの土台が完成されます。しかし「他のホームページと被りたくない」「より強烈なオリジナリティを出したい」という希望もあると思います。
ここではサイポンでテンプレートを使用せず、白紙のページからホームページ制作をする方法を解説します。
サイポンは日々アップデートが行われているため、ちょっと前の解説ページでも操作方法が異なる場合があります。できるだけ最新版の解説ページを参考にした方が良いでしょう。
ここではサイポンでテンプレートを使用せず、白紙のページからホームページ制作をする方法を解説します。
サイポンは日々アップデートが行われているため、ちょっと前の解説ページでも操作方法が異なる場合があります。できるだけ最新版の解説ページを参考にした方が良いでしょう。
サイトの作成
「+新規サイト作成」ボタンを押します。
テンプレート一覧画面になりますが、そこでテンプレートを選択せず
「+サイト作成（白紙）」ボタンを選択します。
「+サイト作成（白紙）」ボタンを選択します。
つまり「白紙」というテンプレートで作成することになります。「OK」をクリック！
ページの編集
空ページ - 白紙 の編集画面になります。
ページの編集方法には色々な手順が用意されていますが、ここでは素直にページ中央にある「ブロックを追加」を押すのがオススメです。
ページの編集方法には色々な手順が用意されていますが、ここでは素直にページ中央にある「ブロックを追加」を押すのがオススメです。
ここでも様々なブロックのテンプレートが用意されています。
基本ブロックについてはマウスオーバーでプレビューが見られます。
ここでは、まず基本ブロック「横割り」を選択します。
見出しの内容を編集し、書式を設定します。
一般的にはWホームページのフォントは明朝体よりゴシック体の方がスクリーンでの可読性が良いとされています。特別なこだわりがなければゴシックや丸ゴシックを選ぶと良いでしょう。
テキストのや背景のスタイルは自由に設定できます。操作パネルのボタンを色々選んでみて、好きな見出しのデザインを設定してみましょう。
一般的にはWホームページのフォントは明朝体よりゴシック体の方がスクリーンでの可読性が良いとされています。特別なこだわりがなければゴシックや丸ゴシックを選ぶと良いでしょう。
テキストのや背景のスタイルは自由に設定できます。操作パネルのボタンを色々選んでみて、好きな見出しのデザインを設定してみましょう。
見出しの背景にパターンを選択する場合は、あまりかけ離れていない二色を選択する方がオシャレになります。
ブロックとコンテナの理解
サイポンでページを編集する際は「ブロック」と「コンテナ」の概念が重要になります。ここを理解すればページの作成速度が飛躍的に高まります。
ブロックの中には必ずコンテナが入ります。
コンテナには「横割り」と「縦割り」の二種類があります。
コンテナには「横割り」と「縦割り」の二種類があります。
ブロックとは？コンテナとは？
ブロックとは一番大きな箱のイメージです。
ブロックの中にはコンテナが入り、コンテナの中にパーツが入ります。
先述のとおり「ブロックを追加」を選択すると、基本ブロックや基本パーツの他、様々なブロックテンプレートも選択できます。
実は基本パーツを選択した場合「縦割り」のブロックを作成したことになっています。
見出し(大見出し)だけは横幅100％のみです。後からコンテナとして追加することはできません。ブロック追加の時だけ作成できます。
ブロックの中に横割りと縦割りのコンテナを混在させることは手順を踏めば可能です。
ブロックの中にはコンテナが入り、コンテナの中にパーツが入ります。
先述のとおり「ブロックを追加」を選択すると、基本ブロックや基本パーツの他、様々なブロックテンプレートも選択できます。
実は基本パーツを選択した場合「縦割り」のブロックを作成したことになっています。
見出し(大見出し)だけは横幅100％のみです。後からコンテナとして追加することはできません。ブロック追加の時だけ作成できます。
ブロックの中に横割りと縦割りのコンテナを混在させることは手順を踏めば可能です。
横割りのコンテナを複製で増やしたあと、コンテナの割り方を「縦割り」に変更することで一つのブロックのなかに横割りと縦割りのコンテナを混在させることが可能になります。
割り方はコンテナを選択してレイアウトモードの「内容」から変更できます。
パーツの追加はレイアウトモードの「レイアウト」から行うと良いでしょう。
さらにコンテナの幅を縮めて、コンテナを横並びにすることも可能です。
コンテナの幅を調整するには、コンテナを選択してレイアウトモードから「幅」を開きます。
コンテナの幅を調整するには、コンテナを選択してレイアウトモードから「幅」を開きます。
ブロックとコンテナを自在に操れるようになることがサイポンのレイアウトデザインの近道と言えます。
じっくり習得してみましょう。
じっくり習得してみましょう。
ブロックとコンテナの順番を変更する
ブロックやコンテナの移動は「レイアウト」モードで行います。
レイアウトモードでページの背景をクリックするとブロックの順序を編集できるようになります。
左側の三本線をドラッグ＆ドロップすると順番を自由に変更できます。
レイアウトモードでページの背景をクリックするとブロックの順序を編集できるようになります。
左側の三本線をドラッグ＆ドロップすると順番を自由に変更できます。
レイアウトモードでブロックを選択すると、「レイアウト」の箇所でコンテナの順序を変更できます。
見出しエリア(大見出し)だけは順序の変更ができません。表示or非表示の切替のみ可能です。
見出しエリア(大見出し)だけは順序の変更ができません。表示or非表示の切替のみ可能です。
ブロックとコンテナの編集ワンポイント
「見出し(小見出しを除く)」だけは特別なパーツです。
現在、「基本ブロック」の大見出しコンテナだけは削除できない仕様です（レイアウトモードで非表示にはできます）。また、大見出しコンテナは後からブロックに追加することは出来ません。
本文や小見出し、画像などのコンテナは削除できます。
このページの様に「見出し」と「基本ブロック」を繰り返す場合、先に見出し付き基本ブロックを複製で全て作成しておくと、見出しの書式や背景の設定をやり直さなくて済むのでポンポン進みます。
「見出し」だけのブロックを複製すると、そのブロックにコンテナを追加できなくなるので注意が必要です。
現在、「基本ブロック」の大見出しコンテナだけは削除できない仕様です（レイアウトモードで非表示にはできます）。また、大見出しコンテナは後からブロックに追加することは出来ません。
本文や小見出し、画像などのコンテナは削除できます。
このページの様に「見出し」と「基本ブロック」を繰り返す場合、先に見出し付き基本ブロックを複製で全て作成しておくと、見出しの書式や背景の設定をやり直さなくて済むのでポンポン進みます。
「見出し」だけのブロックを複製すると、そのブロックにコンテナを追加できなくなるので注意が必要です。
まとめ
サイポンの使い方の使い方の理解を深め、必要になった際に素早くホームページやLPを作れるようにしておくことで、スピード感のある仕事が可能になります。
ぜひサイポンを使って気軽に色々なサイトを作ってみてください。
ぜひサイポンを使って気軽に色々なサイトを作ってみてください。