ヘルプ
Nobori に戻る

作る

セクションと部品

ページはセクションを縦に並べて作ります。セクションの中に、文字・ボタン・フォームなどの部品を置きます。

セクションを足す

  1. キャンバスで、足したい場所の前か後ろのセクションを選びます。
  2. 上の帯の「前に追加」か「後ろに追加」を押します。
  3. 「定番のセクション」から選びます。今あるセクションを写すときは「選んだセクションを複製」を選びます。
  4. 「追加する」を押します。

定番のセクションは「よくある質問」「行動喚起（CTA）」「フォーム」です。

差し替える・隠す・消す

  • 差し替え: 選んだセクションを、別のセクションに入れ替えます。
  • 複製: 選んだセクションの写しを後ろに足します。
  • 非表示: 公開したページに出さなくします。「表示する」で戻します。
  • 削除: セクションを消します。
  • 並べ替え（ドラッグ）: 左の「構成」で行をドラッグすると、セクション・要素を並べ替え、箱の中へ入れ・箱から出せます。線の出た所に入ります（箱を線で囲んだときは、その箱の中の最後）。入れられない所では、構成の上に理由が出ます。
  • 並べ替え（ボタンとキー）: 帯の「上へ」「下へ」か ⌥↑↓ で、隣と入れ替えます。箱の端では箱の外へ出ます。
  • 箱の中へ入れる: 構成で要素を選び、行の「…」の「上の『（箱の名前）』の中へ入れる（最後）」か「下の『（箱の名前）』の中へ入れる（先頭）」を押します。

部品を足す

  1. キャンバスで、足したい場所の前の要素を選びます。
  2. 左の「部品」を開きます。
  3. 「テキスト」「ボタン」「箱」「フォーム」「HTML」から押します。選んでいる要素の後ろに足します。

間違えて足したら ⌘Z で戻します。

HTML のセクション

「追加元」で「HTML」を選ぶと、自分の HTML をセクションにできます。64KB までです。HTML とページのコードは編集者も書けます。訪問者に出るのは、管理者が公開するときにコードの変更を確かめてからです。

中の文字と画像は、コードを開かずにキャンバスで直せます。HTML の要素を選び、帯の「中を直す」を押します（選んで Enter でも入れます）。文字はダブルクリックか Enter で打ち直し、Enter で確定します。画像は押すと、ドライブの画像に入れ替えられます。Esc か「直し終える」で終わります。「文字と画像だけ」のモードでも使えます。

キャンバスで直せるのは、タグの間の文字と、ドライブの画像を /assets/… で使っている <img> だけです。表の中で並びが変わる文字・外の URL の画像・CSS の背景の画像は、「コードを編集」で直します。直した文字と画像も HTML の変更なので、公開するときに管理者がコードの差分で確かめます。

「コードを編集」の広い画面では、左のコードを直すと右のプレビューにすぐ出ます。プレビューにはドライブの画像とサイトの書体・色も出ます。コードは HTML・CSS・JS で色分けして見せます。

要素とセクションに名前を付ける

右のパネルの「名前」に、管理用の呼び名（例「料金の表」「ヘッダー」）を付けられます。構成・パンくず・キャンバスの札に出ます。公開したページには出ません。

空にすると、中身から作った名前に戻ります。AI に「料金の表を直して」と頼むときに、その名前で呼べます。

区切り線

左「部品」の「区切り線」を押すと、選んでいる要素の後ろに細い線を足します。右のパネルで太さ（高さ）・色・幅・外側の余白を直せます。

太さは 8px までです。もっと太い帯や、枠線・角丸を付けたいときは、右のパネルの「箱として直す」から箱の欄で直します。

アイコン

左「部品」の「アイコン」を押し、一覧から図を 1 つ選んで「置く」を押します。右のパネルで図を変える・色・大きさを直せます。

置いたときは「飾り（読み上げない）」です。「電話 03-…」のように横の文字で意味が分かるときはそのままにします。文字の無い所に置くときは「意味がある」にして、代替テキストに何を表すかを書きます。

アイコンはボタンの中と、流れる帯の中には置けません。

共通のセクション（ヘッダー・フッターを全ページで同じにする）

  1. 作る: 構成でヘッダーなどのセクションを選び、左の「共通」で「選んでいるセクションを共通にする」を押して名前を付けます。このページはそのまま共通のセクションを使います。
  2. 使う: ほかのページで、左「部品」の「共通のセクション」から押します。選んでいるセクションの後ろに入ります。
  3. 直す: 共通のセクションを選び、右のパネルの「共通のセクションを開いて直す」（か左「共通」の「開いて直す」）で、共通のセクションだけを開いて直します。ページの上では直せません。
  4. 戻る: 上の帯の「ページに戻る」で元のページに戻ります。元に戻すは、開いて直す画面の中だけ効きます。

共通のセクションを直すと、使っている全部のページが次の公開で一緒に変わります。公開はサイトでまとめて行います。前の公開に戻すと、その時点の中身で出ます。

このページだけ変えたいときは、右のパネルの「このページだけ切り離す」を押します。中身はそのまま残り、普通のセクションになります。

使っていない共通のセクションは、左「共通」の「消す」で消せます。使っているページがあるときは、各ページで切り離すか、そのセクションを消してから消します。

今までページごとにヘッダーを写していたときは、1 ページで共通にしてから、ほかのページでは写したヘッダーを先に消してから共通のセクションを足します（同じ要素を含むので、先に足すことはできません）。

公開前チェックの「見つからない共通のセクションを使っています」は、消した共通のセクションを指しています。そのセクションを選び「このセクションを外す」を押すか、別の共通のセクションを入れます。「共通のセクションが、このページと合いません」は、ページの要素と共通のセクションの中が重なっているか、スマホで固定するボタンが 2 つになっています。このページの重なっている所を消すか、切り離します。

箱の並べ方（逆の順・分け合う比・最小の高さ・留める・はみ出しを隠す）

「逆の順に並べる」は見た目の順だけを逆にします。読み上げとキーボードの順は、構成の順のままです。ボタンやフォームが入る並びでは、見た目とキーボードの順がずれないよう、構成の順を入れ替えるほうがよいです。折り返す箱・タブと開閉の箱では使えません。

「分け合う比」は、横に並べた箱の中で幅が「親いっぱい」の要素どうしの、残りの幅の分け方です（1〜12）。

「最小の高さ」は px か画面の高さの % で決めます。中身が多いときは、この高さより伸びます。固定ヘッダーのセクションでは使えません。キャンバスでは枠の高さで描きます。公開のプレビューで確かめてください。

  • 「スクロールしても留める」は PC の幅だけで、横に並べた箱の中の箱に使えます（モバイルでは留めません）。
  • 画面より低い箱で使います。留めている間は、高さの「親いっぱい」は効きません。
  • 外側の箱がはみ出しを隠している（角丸を含む）と留まりません。そのときは右のパネルに理由が出ます。

「はみ出しを隠す」は、負の外側の余白で外に出した中身を、箱の縁で切ります。角丸の箱は自動で隠します。

複数を選んでまとめて変える

  • キャンバス: Shift を押しながらクリックすると、選んだ要素に足す・外すことができます。
  • 構成: Shift+クリックで範囲を選び、⌘+クリック（Windows は Ctrl+クリック）で 1 つずつ足す・外します。
  • キーボード（構成）: ↑↓ で 1 つを選び、Shift+↑↓ で範囲を広げ、⌘+↑↓（Windows は Ctrl+↑↓）で選ばずに移り、Space で足す・外します。Esc で選択を外します。

右のパネルには、選んだ要素に共通の欄が出ます。値が違う欄は「混在」と出ます。そこに値を入れると、選んだ全部がその値にそろいます。「元に戻す」を 1 回押すと、まとめて戻ります。

同じ種類（テキストだけ・ボタンだけなど）を選ぶと、その種類の欄も出ます。種類が違うと、サイズ・外側の余白・前に出す・非表示・動きだけです。

セクションとその中の要素、箱とその中の要素、訪問者で入れ替える版が違う要素は、一緒に選べません。後から選んだ方を残します。一度に選べるのは 100 個までです。

消す・複製・並べ替え・文字の中身やリンク先の変更は、1 つずつ行います。

この記事で説明している画面の文

〇〇 には名前や数が入ります。