エディタの概要

エディタは、ストアのページを作る場所です。各ページが訪問者に表示されるのと同じ状態で見えるので、要素を選択し、ドラッグして動かし、設定を入力しながらページを編集できます。ここでの操作は、公開するまで訪問者には表示されません。

エディタを開く

1. サイトダッシュボードを開きます。
2. 左側のメニューの上部にあるサイトを編集をクリックします。

新しく作成したサイトは、デザインを選んだ直後に、自動的にエディタで開きます。詳しくは最初のサイトを作成するをご覧ください。

4つのエリア

エディタは、上部のバーと、その下の3つの列で構成されています。左側にブロックパネル、中央にページ（キャンバス）、右側に設定パネルがあります。

トップバー

トップバーには、左から順に次のコントロールが並んでいます。

• ダッシュボードは、サイトダッシュボードに戻るボタンです。
• 保存の状態は、作業の状況を表します。保存済み・未公開は、変更が下書きに保存されているものの、公開中のストアにはまだ反映されていないことを示します。保存・公開済みは、公開中のストアが画面の内容と同じであることを示します。変更のたびに、しばらく保存中…と表示され、保存に失敗すると保存されていませんと表示されます。
• サイト名のボックスには、ストアの名前が表示されます。クリックすると、サイト名を変更できます。
• ページの選択には、今開いているページの名前（ホームページなど）が表示され、クリックするとページの一覧が開きます。編集したいページを選びます。一覧の下部にあるページを管理をクリックすると、ページ管理が開きます。詳しくはページを追加・管理するをご覧ください。

• デスクトップ、タブレット、モバイルは、デザインする画面サイズを切り替えます。詳しくはスマートフォンとタブレットで見やすいサイトにするをご覧ください。
• 時計のアイコン（バックアップ）で、保存されたバックアップを開きます。詳しくは変更を元に戻して以前のバージョンを復元するをご覧ください。
• 2つの矢印は元に戻すとやり直すです。
• 四角から矢印が出ているアイコン（公開中のサイトを表示）は、公開中のストアを新しいタブで開きます。公開したあとに表示されます。
• プレビューは、リンクもすべて動作する状態でサイト全体を新しいタブに表示します。詳しくは公開前にサイトをプレビューするをご覧ください。
• 公開は、変更を公開中のストアに反映します。詳しくは最初のサイトを公開するをご覧ください。
• 右端のアカウントメニューには、Payly 自体のテーマと言語の設定（ストアには影響しません）に加え、設定、Payly のホーム、ログアウトがあります。

ブロックパネル

左の列の最初にあるのはブロックです。ページに追加できる部品で、基本、メディア、レイアウト、ストア、マーケティング、メニューとフォームのグループに分かれています。ブロックはページにドラッグするか、クリックして現在のセクションの末尾に追加します。詳しくはブロックの追加、移動、サイズ変更をご覧ください。

同じ列を下へスクロールすると構成があります。ヘッダー、現在のページのセクション、フッターの一覧で、セクションを追加ボタンもあります。詳しくはセクションを操作するをご覧ください。

キャンバス

画面の中央がページです。公開中のストアを描画するのと同じコードで表示されるため、見たままが訪問者にも表示されます。ブロックやセクションをクリックすると選択できます。選択したブロックには、青い枠線、サイズ変更のハンドル、複製、回転、削除のボタンが付いた小さなツールバーが表示されます。キャンバス上のリンクは、クリックしても開きません。

設定パネル

右の列には2つのタブがあります。

• 選択中には、選択しているものの設定が表示されます。何も選択していないときは、ページ自体の設定として、ブラウザのタイトル、検索結果の説明、このページをショップページにするスイッチが表示されます。ブロックを選択すると、そのブロックの設定が、全般、タイポグラフィ、サイズと位置、管理などの見出しごとにまとめて表示されます。見出しをクリックすると開きます。ページの設定に戻るには、パネル上部のページ設定をクリックするか、Escキーを押すか、ページの横の灰色の部分をクリックします。
• サイトのデザインには、すべてのページに適用される色、フォント、レイアウトの設定があります。詳しくは色、フォント、レイアウトを設定するをご覧ください。

保存の仕組み

エディタは自動的に保存します。変更の操作をやめてしばらくすると、下書きが保存され、トップバーの状態が保存済み・未公開に戻ります。保存ボタンはありません。

保存された変更は、まだ公開されていません。公開をクリックするまで、訪問者には最後に公開したバージョンが表示されます。

元に戻す、やり直す

元に戻すをクリックすると直前の変更を取り消せ、やり直すをクリックするとそれを再び適用できます。エディタを開いてから行った変更が記録されています。エディタを閉じたり再読み込みしたりすると、この履歴は、保存されたバージョンから新しく始まります。

キーボードショートカット

Mac では、Ctrlの代わりにCmdを使います。

関連記事

• ブロックの追加、移動、サイズ変更
• セクションを操作する
• 色、フォント、レイアウトを設定する
• ページを追加・管理する