【ノーコード】入力完了ページの編集例

このページでは、実際にエディタを使用して「入力完了ページ」を作成する手順について
解説いたします。
作成イメージ画像
<標準ページ>
<エディタで作成したページ(作成例)>

ノーコード編集のフォームエディタ起動方法

「入力完了ページ」の「ノーコード編集」にチェックを入れ、「編集する」をクリック
してください。その後、次の「見出し / テキストの非表示」へお進みください。
エディタの開き方についてはこちらをご参照ください → 「フォームエディタの起動方法

見出し / テキストの非表示

初期状態の「見出し」「テキスト」は非表示にして、1からページを作成します。
  1. 既存のセクションをクリック。
  2. 「表示」をクリック。
  3. 「見出しを非表示」「テキストを非表示」にチェック。
  4. 「OK」をクリックして確定。
  5. 以上が、見出し / テキストの非表示手順です。
    引き続き、次の「必要なセクションの追加」へお進みください。

必要なセクションの追加

  1. 既存のセクションを選択し、下側の「セクションを追加」をクリック。
  2. 「シンプル」をクリック。
  3. 追加する見出しセクションをクリック。
  4. 「追加」をクリックで、セクションが追加されます。
  5. 同様に必要なセクションを追加。
    一番下に追加したセクションは、「見出しコンテナ」と「よこコンテナ」の
    2つのコンテナで構成されています。
  6. 以上が、必要なセクションの追加手順です。
    最後に「テキスト編集と微調整」で完成します。

テキスト編集と微調整

  1. 「見出しコンテナ」の下に「小見出しコンテナ」を追加。

    ・コンテナ(黒枠)を選択すると「コンテナを追加」ボタンが表示されます。
    ・パーツ(青枠)を選択し、左側の矢印クリックからもコンテナを選択できます。
    ・見出しの左右につけるアイコンが、「見出し」の場合と「小見出し」の場合とでは
     大きさが違います。
     ここでは、より小さなアイコンをつけるために「小見出し」を追加しています。
     アイコンをつけないなどの場合は、そのまま「見出しコンテナ」をご利用できます。

     <”見出し”に小さめアイコンを設置した例>
     <”小見出し”に小さめアイコンを設置した例>

  2. テキストを入力。
    テキストをダブルクリックすると「書式パネル」が表示され、編集が可能になります。
    書式パネルについてはこちらをご参照ください → 「書式パネル
  3. 「書式パネル」でフォントサイズや行揃えなどを調整。
    ※1 「フォントサイズ:2L」「行揃え:真ん中」
    ※2 「文字色:赤」「行揃え:真ん中」
    ※3 文字装飾:太字」「「:」より右側のフォントサイズ:L」
    ※4 「文字色:赤」
    ※5 「フォントの種類:スキップ」「フォントサイズ:2L」
    「文字色:黒(右側ピンク)」「行揃え:真ん中」
    ※6 「フォントサイズ:2L」「文字色:黒」
    編集方法はこちら → 「書式パネル
  4. 左右にアイコンを追加。
    アイコンについてはこちら → 「アイコンの設定
    こちらの例では「小見出しパーツ」を使用しています。
    「見出しパーツ」を使用すると、アイコンの大きさが変わりますのでご注意ください。
  5. 不要なパーツを削除。
    ※1 見出しパーツ 「コンテナ」を選択すると「削除」アイコンが表示されます。
  6. 見出しコンテナの背景色を変更。
    見出しコンテナについてはこちら → 「見出しコンテナの設定
  7. 画像を追加。
    画像の追加について → 「画像を設定するには
  8. 枠線 / 影の設定。
    ※1 注意事項 コンテナに枠線をつけるには → 「セクション・コンテナの枠線設定
    ※2 影付きの囲み
      (コンテナ)
    コンテナに影をつけるには → 「影の設定
    コンテナに角丸をつけるには → 「角丸の設定方法
    ※3 画像 画像に枠線をつけるには → 「その他パーツの枠線設定
  9. 余白の調整。
    ※1 見出し ・コンテナ余白設定のマージンで、上側の余白を調整します。
    ・コンテナ余白設定のパディングで、上下の余白を調整します。
    ※2 件名等 パーツを選択し、左側のハンドルをドラッグして調整します。
    ※3 注意事項 ・コンテナ余白設定のパディングで枠線内側を調整します。
     パディングについてはこちら → 「パディングの設定
    ・コンテナ余白設定の「拡大 / 縮小」で左右を調整します。
     「拡大 / 縮小」についてはこちら → 「余白の設定画面
    ※4 ダウンロード期間
      見出し
    「※5」の位置を決めてから、パーツを下へ移動して「※5」の
    枠内へおさめます。
    移動についてはこちら → 「コンテナやパーツの移動
    ※5 影付きの囲み
      (コンテナ)
    ・コンテナ余白設定のパディングで、「※4」の見出しが入る分の
     余白をコンテナ内の上側に作ります。
    ・コンテナを上へ移動します。
    ※6 画像 画像パーツ余白設定の「拡大 / 縮小」で調整します。
    その他余白設定についての詳細はこちら → 「余白の設定
  10. 以上で、入力完了ページのデザイン編集は完了です。「完了」をクリックしてください。
    「フォームテンプレ保存」で、作成したデザインをテンプレとして保存できます。
  11. 保存が完了しました。
  12. 以上が、入力完了ページの編集例となります。
検索ワード / #入力完了ページデザイン変更 #本登録完了画面デザイン変更更 #入力完了ページカスタマイズ #本登録完了画面カスタマイズ #入力完了ページ編集 #本登録完了画面編集