書体の変更

書体の変更について解説いたします。

書体を変更するには

  1. 書体を変更したい文字をドラッグで選択。
  2. 「書体」ボタンをクリック。
  3. お好みの書体を選択。
  4. 以上が、書体を変更する手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。
書式が効かない場合はキャッシュクリアしてください。
キャッシュクリア方法:Ctrl+F5
検索ワード / #書体変更 #フォント変更

文字サイズの変更

文字サイズの変更について解説いたします。

文字サイズを変更する

  1. サイズを変更したい文字をドラッグで選択。
  2. 文字を大きくしたい場合は「+」ボタンをクリック。

    「-」ボタンで文字が小さくなります。
  3. 以上が、文字サイズの変更手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。
検索ワード / #文字サイズ変更 #フォントサイズ変更

行揃えの設定

行揃えの設定について解説いたします。

行揃えを設定する

  1. 行揃えをしたい行をクリック。
  2. 「行揃え」ボタンをクリック
  3. 行揃えの種類を選択。

    左揃え、中央揃え、右揃えから選択できます。
  4. 以上が、行揃えの設定手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。
検索ワード / #テキスト左寄せ #テキスト右寄せ

行間・字間の設定

行間・字間の設定について解説いたします。

行間の設定

  1. 行間を変更したい行を選択。

  2. 「行間・字間」ボタンをクリック。 
  3. 行間を広くしたい場合は「+」ボタンをクリック。

    「-」ボタンで行間が狭くなります。
  4. 以上が、行間の設定方法です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

字間の設定

  1. 字間を変更したい文字を選択。

    字間は、文字の後ろ側の間隔で調整されます。そのため中央揃えの場合、一番最後の文字は選択しないほうが、両端をきれいに揃えることができます。
  2. 「行間・字間」ボタンをクリック。

  3. 字間を広くしたい場合は「+」ボタンをクリック。

    「-」ボタンで字間が狭くなります。
  4. 以上が、字間の設定方法です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。
検索ワード / #行間設定 #行間変更 #行間編集 #文字間設定 #文字間変更 #文字間編集

見出し、小見出し、テキストへのリンク設定

見出し、小見出し、テキストへのリンク設定方法について
解説いたします。

見出し、小見出し、テキストは同じ方法でリンクをつけることができます。
ここでは、テキストを例にとってご説明いたします。

ボタンや画像、コンテナへのリンク設定は操作パネルから行います。
設定方法はこちら → 「ボタンや画像、コンテナにリンクを付ける

リンク設定が正常に反映しない場合は、テキストを入力しなおしてリンクの再設定を
してください。

URLを設定する場合

URL設定には、URLの他に「電話番号」や「メールアドレス」も設定できます。
  1. リンクを設定したいテキストをドラッグで選択。

  2. リンクボタンをクリック。 
  3. 「URL」をクリック。

  4. 「URL」を選択。

    「電話番号」や「メールアドレス」の設定方法はURLと同様です。
  5. リンク先を入力。

  6. 新しいウィンドウで開く場合はチェック。

    新しいウィンドウとは
    新たに別のウィンドウを開いて表示します。他のサイトを設置する時に使用します。
  7. 「OK」で確定。
  8. 以上が、URLをリンク設定する手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

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

サイト内リンクとは
サイト内のセクションまたはページにリンクを指定することができます。
  1. リンクを設定したいテキストをドラッグで選択。
  2. リンクボタンをクリック。

  3. 「サイト内」をクリック。
  4. ページを選択。
  5. セクションをクリック。

    ページの先頭にリンクしたい場合は「このページにリンク」をクリックしてください。
  6. 「OK」で確定。
  7. 以上が、サイト内リンクの設定手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

ファイルを設定する場合

ファイル機能のご利用には、ゴールドプラン以上にご契約いただく必要があります。
  1. リンクを設定したいテキストをドラッグで選択。

  2. リンクボタンをクリック。 
  3. 「ファイル」をクリック。

  4. ファイルをドラッグ&ドロップ。

    すでにアップロードされているファイルを使用する場合は、ドロップダウンより該当の
    ファイルを選択してください。
  5. 「OK」で確定。

  6. 以上が、ファイルにリンク設定をする場合の手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

リンクの解除

  1. リンクを解除したいテキストをドラッグで選択。

  2. リンクボタンをクリック。 
  3. 「なし」をクリック。
  4. 「OK」で確定。
  5. 以上が、リンクを解除する手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。
検索ワード / #URLリンク設定 #同じページにリンク設定 #同じページリンク設定 #ページ内リンク設定 #ファイルリンク #リンク解除

書式の保存設定

書式の保存方法について解説いたします。

書式の保存とは

自分で作成した書式を保存しておくことができます。
保存をしておくことで、毎回1から設定する必要がなくなるため、作業時間も短縮されます。

保存できる書式の種類

書式パネルの、「書体」「文字サイズ」「文字色」「行揃え」「行間・字間」「文字装飾」を保存
することができます。
書式パネルについてはこちら → 「書式パネルのページへ

保存できる書式の数

今現在、8つまで保存することができます。
それ以上保存した場合、一番古いものから削除されていきます。

書式を保存するには

  1. 保存したい書式を選択。

    書式パネルでは、選択されている書式を確認することができます。
  2. 「書式を保存」ボタンをクリック。 
  3. 以上が、書式を保存する手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

保存されている書式を反映

  1. 書式を反映したい文字を選択。
  2. 反映したい書式をクリック。
  3. 以上が、保存されている書式を反映させる手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

書式のクリア

  1. 書式をクリアしたい文字を選択。
  2. 「クリア」ボタンをクリック。

    書式をクリアすると「標準」の書式になります。
  3. 以上が、書式をクリアする手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。
検索ワード / #書式保存 #書式クリア

文字装飾の設定

文字に装飾をする方法について解説いたします。

強調の設定

強調設定をする

  1. 強調設定をしたい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. 強調設定ウィンドウをクリック。
  4. お好みの強調を選択。
  5. お好みの色を選択。
    詳細設定についてはこちら → 「色の詳細設定をする
  6. 「OK」で確定。
  7. 以上が、強調設定の手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

強調設定の解除

  1. 強調設定を解除したい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. 強調設定ウィンドウをクリック。
  4. 「なし」をクリック。
  5. 「OK」で確定。
  6. 以上が、強調設定の解除手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

フチの設定

フチの設定をする

  1. フチをつけたい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. フチ設定ウィンドウをクリック。
  4. お好みのフチを選択。
  5. 適当な場所をクリックして設定を確定。
  6. 以上が、文字にフチをつける手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

フチ設定の解除

  1. フチ設定を解除したい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. フチ設定ウィンドウをクリック。
  4. 「フチなし」を選択。
  5. 適当な場所をクリックして設定を確定。
  6. 以上が、フチ設定の解除手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

効果の設定

文字を太字にする

  1. 太字にしたい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. 「B」をクリック。
  4. 適当な場所をクリックして設定を確定。
  5. 以上が、文字を太字にする手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

文字にアンダーラインをつける

  1. アンダーラインをつけたい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. 「U」をクリック。
  4. 適当な場所をクリックして設定を確定。
  5. 以上が、文字にアンダーラインをつける手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

文字に取り消し線をつける

  1. 取り消し線をつけたい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. 「S」をクリック。
  4. 適当な場所をクリックして設定を確定。
  5. 以上が、文字に取り消し線をつける手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

文字に影をつける

  1. 影をつけたい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. 「T」をクリック。
  4. 適当な場所をクリックして設定を確定。
  5. 以上が、文字に影をつける手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。

効果設定の解除

ここでは太字設定の解除方法を例にとってご説明いたします。アンダーライン、取り消し線、
影についても手順は同様です。
  1. 太字を解除したい文字を選択。
  2. 「文字装飾」ボタンをクリック。
  3. 「B」をクリック。

    アンダーラインの場合は「U」、取り消し線の場合は「S」、影の場合は「T」をクリック
    してください。
  4. 適当な場所をクリックして設定を確定。
  5. 以上が、効果の設定を解除する手順です。
    公開サイトへ反映するには「サイト更新」をクリックしてください。
検索ワード / #文字強調なし #文字強調解除 #文字フチあり #文字フチなし #文字太字 #文字アンダーライン #文字取り消し線 #文字影 #文字装飾解除

サイト設定

サイト名やURLなどを変更できる、サイト設定について
解説いたします。

サイト設定の編集

サイトタイトルの変更や公開設定をすることができます。
また、以下のタグを埋め込むことができます。
・Googleアナリティクスのタグ
・Facebookピクセルのタグ
・ヒートマップ用のタグ

タグの埋め込みは、サイト設定の以下項目に埋め込みが可能です。
・headタグ内へ埋め込み
・bodyタグ開始直後に埋め込み
入力画面へはこちら → 「必要事項を入力

  1. 「このサイトを開く」をクリック。

  2. 「サイト設定」をクリック。
  3. 必要事項を入力。

    ※1 タイトル 詳細はこちら → 「サイト名を変更する
    ※2 URL変更 詳細はこちら → 「サイトURLを変更する
    ※3 公開設定 サイトの公開、非公開の設定ができます。
    先に公開をしたほうがいい理由とは? → 「STEP3 サイトを公開する
    ※4 ファビコン 詳細はこちら → 「ファビコンを変更する
    ※5 headタグ内へ埋め込み

    GoogleアナリティクスやFacebookピクセル、
    ヒートマップ用のタグを埋め込むことができます。

    ※6 bodyタグ開始直後に埋め込み GoogleアナリティクスやFacebookピクセル、
    ヒートマップ用のタグを埋め込むことができます。
  4. 「保存する」をクリック。
  5. 以上が、サイト設定についての手順です。

ページをキレイに作成するには?

ページをキレイに作成する方法について解説いたします。

キレイに作成するには、まずはサイポンのサイト構成を知っておく必要があります。

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

サイポンの構成

パーツ 基本的に画像や文字など、パーツを組み合わせてデザインします。
コンテナ 配置したパーツは、コンテナでレイアウトすることができます。
セクション 複数のコンテナを組み合わせて、1内容1セクションで表現します。
ページ セクションを集めるとページが作れます。
サイト ページを組み合わせてサイトを公開できます。

パーツとは

基本的に画像や文字など、パーツを組み合わせてデザインします。それぞれが違う機能をもっており、用途によって使い分けます。

◆基本パーツの種類

1つのセクションの中に1つのみ存在する「見出しパーツ」と、いくつでも自由に追加ができる「小見出し」「テキスト」「ボタン」「区切り線」「画像」「地図」「動画」「余白」があります。

コンテナとは

配置したパーツは、コンテナでレイアウトすることができます。
コンテナには、見出しコンテナとコンテンツコンテナの2種類があります。

 

見出しコンテナ

原則、1つのセクションにつき最上部に1つだけ表示できます、内側背景をなくした場合背景が全幅になります。

 

コンテンツコンテナ

たてコンテナとよこコンテナの2種類のレイアウトがあります。あとからでもレイアウトの変更は可能です。

セクションとは

複数のコンテナを組み合わせて、1内容1セクションで表現します。

ページとは

セクションを集めるとページが作れます。ブラウザで表示されている1画面のことです。

サイトとは

ページを組み合わせてサイトを公開できます。

検索ワード / #サイポン構成 #サイポン作り

スマホでの見えをキレイにするには

スマホでキレイに見せるための方法について解説いたします。

パソコン表示でサイトが完成したら、スマホ表示に切り替えて見た目を整えましょう。

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

編集パネルの表示の切り替え

システムパネルの「表示の切り替え」をスマホ表示にすることで、編集パネルをスマートフォン
サイズに切り替えることができます。
表示をもとに戻す場合は、表示の切り替えでPC表示ボタンをクリックします。

スマホ表示切り替え

スマホ表示への切り替え方法

スマホ表示で見やすくするために、レスポンシブか固定に表示設定を切り替えることができます。
→ 「スマホ表示の切り替え方法
 

レスポンシブ設定

レスポンシブ設定とは
レスポンシブとは、スマホ表示で見たときに自動で見やすいよう調整してくれる機能です。
デフォルトはレスポンシブ設定です。

余白設定は反映されません
レスポンシブ設定で余白設定をした場合、スマホ表示では余白設定の内容が反映されません。
 

固定設定

固定設定とは
パソコン表示とスマホ表示のどちらで見ても同じ見た目にすることができる機能です。

画像と同じように文字も伸縮するため、テキストが読みにくくなる可能性があります。

スマホの余白設定

レスポンシブ設定の場合、スマホ表示のときのみ反映される余白を設定することができます。
設定を行うことができるのはセクションのみです。
設定方法はこちら → 「スマホの余白設定

スマホ表示の余白(縦)

縦の余白が「広い」に設定の場合、セクション、コンテナ、パーツそれぞれの上下に余白が
つきます。

デフォルトは「広い」です。
 

スマホ表示の余白(横)

横の余白を広くした場合、セクションの左右に余白がつきます。

デフォルトは「狭い」です。

コンテナの表示設定

レスポンシブ設定の場合、PC表示とスマホ表示でコンテナを別の配置に変えることができます。

たてコンテナ

たてコンテナが横に2列や3列並んでいる場合、通常スマホで見たときもそのままの状態で表示
されますが、縦1列の表示にすることも可能です。
→ 「たてコンテナの表示設定
 

よこコンテナ

パーツ一覧の「優先」エリアが左右比率で50%以上の場合、スマホ表示では自動で
1列になります。
→ 「自動で一列表示になる場合

優先エリアは以下の方法で確認することができます。
・スマホ表示にした場合、上に表示される。
・パーツ一覧で「優先」と表示されている。

  • 自動で1列表示になる場合
    優先エリアが50%以上のため1列表示になる。
  • 自動で1列表示にならない場合
    優先エリアが50%以下のため1列表示にならない。
    ※自動で1列表示にならない「よこコンテナ」を、1列表示にしたい場合は
     以下マニュアルをご参照ください。
     → 「よこコンテナの表示設定

 

スマホで1列表示にしない場合は、テキストを回り込み設定にすると綺麗になります。
なお、回り込み設定をした場合、優先エリアに対して優先ではないエリアが下に回り込みます。

ブラウザが「safari」の場合、小見出しパーツは回り込みができませんのでご注意ください。

表示・非表示

セクション、コンテナ、パーツでは、表示非表示アイコンをクリックするごとに
「PC/スマホ表示」「PCのみ表示」「スマホのみ表示」「非表示」の順番で切り替わります。
表示・非表示の設定方法はこちら → 「表示・非表示の設定

「PC/スマホ表示」に設定した場合
「PCのみ表示」に設定した場合

表示非表示で設定した表示結果は、システムパネルでPC表示、スマホ表示に切り替えることで
編集パネルでも確認することができます。

QRコードで公開画面の確認

操作パネルに表示されているQRコードをホバーすると出てくるQRコードを読み取ることにより、スマホで公開画面を確認することができます。
スマホで公開画面の見え方を確認したい場合、URLを入力する必要がないため便利です。
確認方法はこちら → 「スマホで公開画面を確認
検索ワード / #スマホ見え方 #スマホ見せ方