余白の役割を理解する

役割1：情報を整理する

情報をグループごとにまとめ、他のグループとの間に余白を入れることで別グループだと
認識させることができます。

◆サイポンでグループ分けをするには…
サイポンでは、コンテナやセクションを別にすることでグループ分けが可能です。

余白を自動にすると、パーツ同士の距離が一番近く、セクションの余白が一番広くなります。
パーツ、コンテナ、セクションの内容を意識して作成すると読みやすいサイトができます。

役割2：印象を操作する

◆余白を多くとると、ゆったりと上品に見せることができます
セクションだけでなく、コンテナやパーツ、背景をいれた場合などはパディングに余白をいれると
よりゆったりした印象になります。

◆サイト幅の違いを使い分ける
サイポンのサイト幅は、768pxと1200pxがあります。
サイト幅を大きくすると、コンテンツの内容も大きくなります。

文字数が多い場合は文章が読みやすいように内容を狭くするのがおすすめです。
「サイト幅768px」もしくは「サイト幅1200px、セクションの左右余白128px」で作成すると
見た目が整います。

テンプレートから新規サイトを作成

1. サイポンにログイン。
2. 「＋新規サイト作成」をクリック。
3. 作成したいサイトの種類を選択。
   「白紙のみ」を選択した場合、表示された確認画面で「OK」を
   クリックしてください。
   

   

   

4. テンプレートを選択。
5. 「このテンプレートを使用する」をクリック。
6. 「OK」をクリック。

   

7. 以上が、テンプレートから新規サイトを作成する手順です。
   このあとは、「STEP2 サイトの初期設定」へお進みください。

タブを変更する

ファビコンを変更する

ファビコンとは、ブラウザでページを開いたとき、タブに表示されるアイコンです。

サイト名を変更する

サイト名はブラウザのタブに、「ページ名/サイト名」の順番で表示されます。

1. サイト一覧画面で「このサイトを開く」をクリック。
2. 「サイト設定」をクリック。
3. サイト名を変更。
4. 「保存する」をクリック。
   
5. 以上が、サイト名を変更する手順です。

 

ページ名を変更する

ページ名はブラウザのタブに、「ページ名/サイト名」の順番で表示されます。

1. サイト一覧画面で「このサイトを開く」をクリック。
   
2. ページ一覧で「編集する」をクリック。
   
   
3. 「ページ一覧」をクリック。
   
4. 「設定」をクリック。
   
5. ページ名を変更。
   
   
6. 「OK」をクリック。
   
7. 以上が、ページ名を変更する手順です。

URLを変更する

ドメインを変更する

ドメインは、URLの以下の場所に記載されます。

ドメインを取得する場合は下記を参照してください。
取得しなくてもサイポンはお使いいただけます。
※ドメインの取得は有料です。

新しくドメインを取得する場合 → 「専用ドメインの利用」

既に持っているドメインを使う場合 → 「ドメイン接続」

 

サイトURLを変更する

サイトURLは、URLの以下の場所に記載されます。

1. サイト一覧画面で「このサイトを開く」をクリック。
2. 「サイト設定」をクリック。
3. サイト設定画面で、任意のURLを入力。
4. 「保存する」をクリック。
   
5. 以上が、サイトURLを変更する手順です。

ページURLを変更する

ページURLは、URLの以下の場所に記載されます。

1. サイト一覧画面で「このサイトを開く」をクリック。
   
2. ページ一覧で「編集する」をクリック。
   
   
3. 「ページ一覧」をクリック。
   
4. 「設定」をクリック。
   
5. ページURLを変更。
   
6. 「OK」をクリック。
   
7. 以上が、ページURLを変更する手順です。
   このあとは、「STEP3 サイトを公開する」へお進みください。

サイトの公開をする

1. サイト一覧画面で「このサイトを開く」をクリック。
   
2. ページ一覧で「編集する」をクリック。
   
   
3. 「公開する」をクリック。
4. 表示されたURLをクリックし、公開画面を確認。
   
5. 以上が、サイトを公開する手順です。
   このあとは、「STEP4 サイトを編集する」へお進みください。

テキストを変更する

1. サイト一覧画面で「このサイトを開く」をクリック。
   
2. ページ一覧で「編集する」をクリック。
   
   
3. 編集パネルでテキストパーツをダブルクリック。
   
   
4. 変更したい文字列を選択し、そのまま文字を入力する。
   
   ・テキストは全部消してしまうと、設定されているフォントのスタイルが解除されてしまう場合があります。
   ・キーボードのCtrl+Aでテキストを全選択できます。
5. 以上が、テキストを変更する手順です。

画像を変更する

自分の画像をアップロードする

1. サイト一覧画面で「このサイトを開く」をクリック。
   
2. ページ一覧で「編集する」をクリック。
   
   
3. 編集パネルで変更したい画像パーツをクリック。
   
   
4. 「画像」をクリック。
   
5. 「ファイル」を選択。
   
6. 画像をアップロード。
   
7. 「OK」をクリック。
   
8. 以上が、画像を変更する手順です。

用意されたフリー素材を使用する

1. サイト一覧画面で「このサイトを開く」をクリック。
   
2. ページ一覧で「編集する」をクリック。
   
   
3. 編集パネルで変更したい画像パーツをクリック。
   
4. 「画像」をクリック。
   
5. 「フリー素材」を選択
   
6. 「写真」をクリック。
   
   「イラスト」「シルエット」についても、このあとの操作は同様です。
7. カテゴリを選択し、キーワードを入力。
   
8. 「探す」をクリック。
9. 検索結果からお好みの画像をクリック。
   
   確定する前であれば、他の画像をクリックすることで変更が可能です。
10. 「OK」をクリックして確定。
11. 以上が、用意されたフリー素材を使用する手順です。

コンテナを複製する

1. サイト一覧画面で「このサイトを開く」をクリック。
   
2. ページ一覧で「編集する」をクリック。
   
   
3. 編集パネルで複製したいコンテナを選択。
   
   
4. コンテナの「複製」アイコンをクリック。
   
   
5. 以上が、コンテナを複製する手順です。

ボタンや画像、コンテナにリンクを付ける

ボタンや画像、コンテナは同じ方法でリンクをつけることができます。
ここでは、ボタンを例にとってご説明いたします。

操作説明は、コンテナ表示 となる「通常モード」で説明しております。
初期設定では、コンテナ非表示 となる「シンプルモード」ですのでご注意ください。
→　「モードの切り替え」

URLを設定する場合

URL設定には、URLの他に「電話番号」や「メールアドレス」も設定できます。

1. サイト一覧画面で「このサイトを開く」をクリック。
   
2. ページ一覧で「編集する」をクリック。
   
   
3. 編集パネルでボタンをクリック。
   リンク設定するものを選択してください。
4. 「リンク」をクリック。
   
   画像パーツの場合は、「クリック」をクリック後、「リンク」をクリックしてください。

   

   

5. 「URL」をクリック。
   
6. 「URL」を選択。
   「電話番号」や「メールアドレス」の設定方法はURLと同様です。
7. リンク先を入力。
   
8. 新しいウィンドウで開く場合はチェック。
   
   新しいウィンドウとは
   新たに別のウィンドウを開いて表示します。他のサイトを設置する時に使用します。
9. 「OK」をクリック。
   
10. 以上が、URLをリンク設定する手順です。

サイト内リンクを設定する場合

ファイルを設定する場合

サイトを更新する

サイトが公開されていても更新をしないと編集は反映されません。
サイト更新の右上に赤い「！」が表示されている場合は、編集内容が公開画面に
反映されていない部分があります。

ドメインの種類

ドメインとは、URLの以下の場所に記載されるものです。
サイトの信頼性を上げたりやSEOを強くする役割があります。

＜メリット＞
・サイポンから設定ができるので簡単
・WEBメールが使える
・店舗名などにすることで信頼感がアップする
・ドメインに”saipon”が入らない
・SEO的にも強くなる
・他者の影響を受けない

＜デメリット＞
・年間料金がかかる

＜メリット＞
・すでに持っているドメインを使うことができる
・ドメインに”saipon”が入らない
・SEO的にも強くなる
・他者の影響を受けない

＜デメリット＞
・外部サービスでドメインを持っている必要がある
・基本的にサポート対象外
・サイポン外でも設定が必要なため複雑で面倒
・設置費用がかかる

ドメインの使用方法

共有ドメインを使うには

特別な設定は不要です。

専用ドメインを使うには

1. ドメインを取得する
   取得方法はこちら
   → 専用ドメインの利用「専用ドメインの取得手順」
2. 該当サイトにドメインをセットする
   → 専用ドメインの利用「専用ドメインの設定手順」
3. 以上が、専用ドメインの使用手順です。

所有ドメインをサイポンで使うには

1. ドメイン会社のサイトからAレコード設定
   お客様ご自身で、ドメインを取得した会社の管理画面でDNSレコード設定をしてください。
   → 「所有ドメインのAレコード設定」
2. 所有ドメインの登録
   サイポンの登録画面でドメインを入力。
   → 所有ドメインの利用「所有ドメインの登録手順」
3. 所有ドメインの設定
   サイポンのサイト設定で、所有ドメインを選択。
   → 所有ドメインの利用「所有ドメインの設定手順」
4. 以上が、所有ドメインをサイポンで使うための流れです。
   DNSレコード設定がよく分からない場合は、専用ドメインの取得を推奨しています。
   → 「専用ドメインの利用」

ドメインの転送設定

サイト一覧画面

サイト管理画面

編集画面

システムパネル

操作パネル