主要なブロックを活用して、ページを作り込みましょう。
テキスト
文章の入力や、詳しい内容の解説などができます
1
ブロックを追加をクリック
2
カテゴリからテキストを選択
3
使用したいデザインを選択→選択するをクリック
3
編集したいテキストをクリック→テキスト編集パネル内で詳細設定を行う
＊
詳細設定が反映されないとき：
入力したテキストのうち、変更させたいテキストをドラッグ指定（全文を変更させたい場合は全てを選択するをクリック）した状態で変更を加えてください。
テキスト編集パネルの機能
テキスト編集パネルの機能
1
文章を直接入力することができます。
2
太字、斜体、下線、打ち消し線の設定ができます。
3
文字や見出しの大きさを選べます。
4
文字の色と、文字背面の色を変更できます。
5
書体の種類を設定できます。
6
行の寄せ方向（左・中央・右）を設定できます。
7
リンク先を設定できます。
8
入力エリア内の全文字を一括で選択状態にできます。
見出し
ページ内の区切りや、タイトルを強調できます
1
ブロックを追加をクリック
2
使用したいデザインを選択→選択するをクリック
3
編集したいテキストをクリック→テキスト編集パネル内で詳細設定を行う
1
ブロックを追加をクリック
2
カテゴリから見出しを選択
3
使用したいデザインを選択→選択するをクリック
3
編集したいテキストをクリック→テキスト編集パネル内で詳細設定を行う
＊
詳細設定のガイドは 【テキスト】テキスト編集パネルの機能 をご覧ください。
表
項目や価格などを、枠線で整理して見せることがきます
1
ブロックを追加をクリック
2
カテゴリから表を選択
3
使用したいデザインを選択→選択するをクリック
3
編集したいテキストをクリック→テキスト編集パネル内で詳細設定を行う
＊
詳細設定のガイドは 【テキスト】テキスト編集パネルの機能 をご覧ください。
ボタン
リンクの設定や、別ページへの移動ができます
1
ブロックを追加をクリック
2
カテゴリからボタンを選択
3
使用したいデザインを選択→選択するをクリック
4
編集したいボタンをクリック→テキスト編集パネル内で詳細設定を行う
ボタン設定パネルの機能
ボタン設定パネルの機能
1
クリックでテキスト編集パネルが開き、ボタン上に表示したいテキストを設定することができます。
2
このページ内の別ブロックへジャンプする設定をできます。
3
別ページや外部サイトなどのURLを直接貼り付けて、リンク先として設定できます。
4
PDFなどのファイルをリンク先に設定できます。
5
ボタンの背景色と枠線の色を設定できます。
6
テキストに対するボタンの横幅の大きさを選択できます。
このページ内の特定の場所へ移動させたい
このページ内の特定の場所へ移動させたい
1
編集したいボタンをクリック→ボタン設定パネルを開く
2
ページ内リンクの下の、選択してくださいをクリック
3
ページ内ブロック一覧から、リンク先にしたいブロック (自動スクロールの移動先) を選択→変更するをクリック
外部サイトや制作済みの別のページへ移動させたい
外部サイトや制作済みの別のページへ移動させたい
1
編集したいボタンをクリック→ボタン設定パネルを開く
2
直接URLを入力から、リンク入力枠内に、リンク先 (移動先)にしたいURLを貼り付ける
＊
本サービスで制作した他のページのURLは、トップメインメニューからサイト管理をクリックすると確認できます。
3
新しいタブで開かせたい場合は、別タブで開くにチェックを入れる→変更するをクリック
PDF資料や画像ファイルを開かせたい
PDF資料や画像ファイルを開かせたい
1
編集したいボタンをクリック
2
ファイルリンクから、選択してくださいをクリック→ファイル一覧から開かせたいファイルを選択
＊
一覧にファイルを登録するには：
トップメインメニューから、ファイル管理をクリックし、新規作成からファイルをアップロードしてください。 (ファイル名は必ず半角英数字にしてください)
3
変更するをクリック
ヘッダー
ページ最上部に、ロゴやメニューを表示できます
フッター
ページ最下部に、著作権表記や連絡先などをまとめることができます
画像
写真やイラストなどの視覚的な資料を掲載できます
1
ブロックを追加をクリック→カテゴリから画像を選択
2
使用したいデザインを選択→選択するをクリック
3
編集したい画像をクリック→画像設定パネルで詳細設定を行う
画像設定パネルの機能
画像設定パネルの機能
1
表示したい画像のアップロードや選択ができます。
2
画像を当てはめるための土台の比率を、使用している画像の縦横比と同じにします。
＊余白の偏りや、スマホでの画像見切れを防ぎたいときに適しています。
3
画像を当てはめるための土台の形（比率）を指定できます。
4
土台の中で、画像をどのくらいの大きさで表示するかを調整します。
＊枠からはみ出た部分は表示されません。
5
画像の四隅を均等に丸めます。
6
チェックを入れると、画像クリック時に画面が暗転し、中央に拡大表示されます。
7
このページ内の別ブロックへジャンプする設定をできます。
8
別ページや外部サイトなどのURLを直接貼り付けて、リンク先として設定できます。
9
PDFなどのファイルをリンク先に設定できます。
10
チェックを入れると、リンク先のページを新しいブラウザタブで開きます。
11
ボタンの背景色と枠線の色を設定できます。
11
テキストに対するボタンの横幅の大きさを選択できます。
画像を差し替えたいとき
画像を差し替えたいとき
1
差し替えたい画像をクリック→画像設定パネルを開く
2
画像を選択をクリック
3
マイ画像をクリック→画像をアップロードするをクリック (システム画像から素材を選ぶことも可能です)
4
差し込みたい画像を選択→選択するをクリック
＊
アップロードしたマイ画像の削除は、トップメインメニュー内のマイ画像管理から行えます。
動画
映像をページ上で直接再生したいとき
1
ブロックを追加をクリック→カテゴリから動画を選択
2
使用したいデザインを選択→選択するをクリック
3
編集したい動画をクリック→動画設定パネルで詳細設定を行う
動画設定パネルの機能
動画設定パネルの機能
1
表示したい画像のアップロードや選択ができます。
2
入力エリアをクリックすると、テキスト編集パネルを開き、動画上に表示したいテキストを設定することができます。
3
テキストの背景色を設定することができます。
4
・ループ再生：
オンにすると、動画終了後も最初から自動で再生します。
・自動再生：
オンにすると、自動で再生されます。
5
オンにすると、動画の音声を消します。
6
オンにすると、スクロールに合わせて動画を固定する効果をできます。
動画を差し替えたいとき
動画を差し替えたいとき
1
差し替えたい動画をクリック→動画設定パネルを開く
2
画像を選択をクリック
3
マイ動画をクリック→動画をアップロードするをクリック (システム画像から素材を選ぶことも可能です)
4
差し込みたい動画を選択→選択するをクリック
＊
アップロードしたマイ動画の削除は、トップメインメニュー内のマイ動画管理から行えます。
SNS
Instagramなどのアカウントを表示できます
1
ブロックを追加をクリック→カテゴリからSNSを選択
2
使用したいデザインを選択→選択するをクリック
＊表示幅はスマートフォンに最適化されたサイズで固定されており、どのデバイスから見ても中央に整列されます。
3
追加や×をクリックして表示したアイコンやテキストの数を調整する。
4
編集したいアイコンをクリック→画像設定パネル内で詳細設定を行う
5
編集したいテキストをクリック→テキスト編集パネル内で詳細設定を行う
＊アイコンやテキストは１行につき最大６個まで並び、７個目以降は自動で次の行に送られます。
地図
所在地やアクセスの案内を表示できます
1
ブロックを追加をクリック→カテゴリから地図を選択
2
使用したいデザインを選択→選択するをクリック
3
ブラウザでGoogle Mapsを開く→表示したい場所を指定→共有をクリック
4
地図を埋め込むをクリック→HTMLをコピーをクリック
5
ビルドセルフの編集中ページに戻る→iFrame枠内にコピーしたHTMLを貼り付ける
地図を大きく表示したい
地図を大きく表示したい
1
iFrame枠内のwidth="600"をwidth="100%"に書き換える
＊100%に書き換えることで、どの端末で見ても画面の横幅いっぱいに表示されます。
HTML・iFrame
独自のコードを用いて、特殊な装飾や要素を加えることができます
Youtubeを美しくレイアウトしたい
Youtubeを美しくレイアウトしたい
1
下記推奨コードを全てコピーする→iFrame枠内に貼り付ける
2
表示させたい動画のURLを、推奨コード内のxxxxxx部分に貼り替える。
Instagramを表示したい
Instagramを表示したい
1
下記推奨コードを全てコピーする→iFrame枠内に貼り付ける
2
表示させたいアカウントのユーザーネームを、推奨コード内のxxxxxx部分に貼り替える。
Youtubeを美しくレイアウトしたい
Youtubeを美しくレイアウトしたい
1
下記推奨コードを全てコピーする→iFrame枠内に貼り付ける
2
表示させたい動画のURLを、推奨コード内のxxxxxx部分に貼り替える。
Instagramを表示したい
Instagramを表示したい
1
下記推奨コードを全てコピーする→iFrame枠内に貼り付ける
2
表示させたいアカウントのユーザーネームを、推奨コード内のxxxxxx部分に貼り替える。
HTML
HTML
1
ブロックを追加をクリックカテゴリからHTMLを選択
2
HTML枠内に直接コードを入力する
iFrame
iFrame
1
ブロックを追加をクリックカテゴリからiFrameを選択
2
外部サービスから埋め込みコードをコピーし、iFrame枠内に貼り付ける
Google Mapsを表示させたい
Google Mapsを表示させたい
1
ブロックを追加をクリックカテゴリからiFrameを選択
Youtubeを表示させたい
Youtubeを表示させたい
1
ブラウザでYoutubeを開く
2
表示したい動画の共有をクリック→埋め込みコードをコピー
3
iFrame枠内に貼り付ける
Youtubeを美しくレイアウトしたい
Youtubeを美しくレイアウトしたい
1
下記推奨コードを全てコピーする→iFrame枠内に貼り付ける
2
表示させたい動画のURLを、推奨コード内のxxxxxx部分に貼り替える。
Instagramを表示したい
Instagramを表示したい
1
下記推奨コードを全てコピーする→iFrame枠内に貼り付ける
2
表示させたいアカウントのユーザーネームを、推奨コード内のxxxxxx部分に貼り替える。
6）ページを修正して公開する
＜FLOW＞
1）マイページより修正したいページ＞ページ編集
2）修正を行う。
3）ページ編集が終わりましたら保存。
4）サイト管理の該当ページを編集＞再公開するor公開する
＊再公開するor公開するまでサイトに反映されません。