レッスン内容
エディターへのアクセス
Webflow Editorは、サイトを公開した後（webflow.ioステージングサブドメインまたはカスタムドメイン）にアクセスできます。Editorでは、サイトのコンテンツをページ上で直接編集したり、エディタパネルでページやコンテンツを管理することができます。
Webflow のインターフェイスからEditorにアクセスする
Webflow ダッシュボードまたはDesignerでサイトをデザインしている場合、次のいずれかの方法でEditorにアクセスできます：
- ダッシュボードの［site］メニューから
- サイト設定の上部ツールバーから
- Designerのメニューから
公開中のサイトからEditorにアクセスする
コンテンツエディターは、ブラウザのアドレスバーでウェブサイトのURLの最後に/?editを追加することで、自分のウェブサイトのEditorにアクセスすることができます（例：yourwebsite.com/?edit）。一度ログインすると、エディターモードでウェブサイトにアクセスできます。
サイトに戻ると、右下に "Edit site "ボタンが表示され、これをクリックするとエディターモードに移行できます。
エディターを利用するには、ブラウザでサードパーティからのクッキーを受け入れるように設定する必要があることを、コンテンツ編集者に伝えてください。エディターへのログインエラーのトラブルシューティングについては、こちらをご覧ください。
エディタの必要条件：サポートブラウザ
Webflow は、Chrome、Edge、Firefox、Safari を含むすべての最新ブラウザの最新3バージョンで Designer を正式にサポートしています。
ブラウザのサポートの程度は、使用する機能によって異なります（例:フィルターは Edge で部分的にサポートされます）一部のブラウザでサポートが制限されている機能については、関連記事で詳細をご覧いただけます：
- • CSS transforms 3d - インタラクションで使用されます
- • CSS transitions - インタラクションで使用されます
- • CSS flexbox - Style panel > Layoutで使用します
- • CSS filters - インタラクションで使用されます
- • CSS grid - Style panel > Layoutで使用します
Webflow は Internet Explorer をサポートしていません。Webflow で作成されたサイトは、最新の Web ブラウザでサポートされているすべての業界標準機能を引き続きサポートしますが、Internet Explorer でサイトが正しく機能することは保証できません。Internet Explorer サポート終了の詳細については、こちらをご覧ください。
プロTip：What's My Browserでブラウザとオペレーティングシステムのバージョンを確認できます。
エディター・モードとライブ・サイト・モードの切り替え
Editorを開くと、プレビュー・モードまたは "ライブ・サイト "モードでサイトを探索することができます。Editorモードに切り替えるには、ページ右下の「Edit site」ボタンをクリックします。
プレビュー・モードでサイトを見たい場合は、"Back to live site "をクリックしてください。
Editorのログインエラーのトラブルシューティング
Editorにログインしようとしたときにエラーメッセージが表示される場合は、次のいずれかの対処法をお試しください：
- お使いのブラウザがクッキーを受け入れているか確認し、受け入れていない場合はオンにします。
- エディターからログアウトし、ブラウザのキャッシュをクリアしてから、再度ログインしてください。
- シークレットモードでエディターにログインする。
- 別のブラウザでログインしてみる
- コンテンツエディターに招待状を送り、シークレットウィンドウで新しいアカウントを作成するよう依頼する。
- カスタムコードを削除または無効にしてみる
- どれもうまくいかない場合は、サポートに連絡
注意: サイトにカスタムコードがある場合、カスタムコードがエディターに影響することがあります。これはエディタが公開されているサイトの上にレンダリングされるために起こります。カスタムコードを削除するか、無効にしてみてください。
マルチユーザーコラボレーション
Editorでは、複数のチームメンバーやコンテンツエディターが、静的および動的なサイトコンテンツを同時に編集できます。2人が同時に同じコンテンツを編集した場合、最後に編集した方が優先されるため、チームメイトやコンテンツ・エディターと編集時間を調整する必要があります。エディターにはサイト・アクティビティ・ログも用意されているので、サイトを公開する前に、誰がどのような編集を行ったかを確認することができます。
Editorと同様に、サイトのデザインを編集する場合は、Designerでチームメンバーとコラボレーションできます。Webflow Designer でコラボレーションについては、こちらをご覧ください。
エディターツールバーの構造
Editorにアクセスすると、Editorツールバー（グレーのバー）が画面下部に表示されます。このツールバーを通して、ページ設定、ダイナミックコンテンツ、フォーム、あなたのエディターアカウントを管理するための様々なエディターパネルにアクセスすることができます。また、エディターを通して行った変更を確認し、公開することもできます。
エディターツールバーには以下のタブとアイコンがあります：
メニュー - このメニューを使用して、ダッシュボード、サイト設定、またはデザイナーに移動します。このボタンには Webflow のロゴが表示されます。
ページ - ［ページ］パネルが開き、サイトの静的ページと動的コレクション ページが一覧表示されます。ここから、ページを参照したり、クリックしてライブ ページを表示したり、ページの設定を管理したりできます。
コレクション - すべてのコレクションを一覧表示するコレクションパネルを開きます。コレクションをクリックすると、ツールバーの新しいタブが開き、そのコレクション内の全アイテムのリストであるコレクションアイテムパネルが開きます。ここで、アイテムを編集したり、新しいアイテムを作成したりできます。これはDesignerのCMSパネルとよく似ています。CMSパネルについてはこちらをご覧ください。
Forms - Formsパネルを開き、サイト上で送信されたフォームを確認したりダウンロードしたりできます。
アカウント設定 - アカウント設定パネルを開き、コンテンツエディターアカウント情報の編集やプロフィール画像のアップロードができます。
ヘルプ＆サポート - ヘルプ＆サポートパネルを開きます。
ログアウト - 確認後、エディターからログアウトします。
ライブサイトに戻る - エディターモードからライブサイトモードに切り替えます。
保存/セーブ - すべての変更はエディターに自動的に保存されます。エディターでサイトに変更を加えると、"Saving... "または "Saved "ステータスが表示されます。
変更履歴 - 左下の公開ボタンの横に未公開の変更履歴が表示されます。変更履歴をクリックすると、未公開の変更があるアイテムやページのリストが表示され、どのコンテンツエディターやワークスペースメンバーが変更を行ったかを確認できます。
公開 - エディターで行ったすべての変更を公開できます。
ページ上での編集
Editorを使ってページ上で編集することができます。様々な要素にカーソルを合わせると、編集可能な要素の右上に「鉛筆」アイコンまたは「画像」アイコンが表示されます。これらの要素を編集するには、アイコンをクリックするだけです。
注意: スタイリングやカスタムコードの一部は、公開されたサイトでは表示されません。これはエディタでの通常の動作です。
テキストの編集と書式設定
編集可能なテキスト要素にカーソルを合わせると、テキスト要素の周囲に薄いグレーの輪郭が表示され、右上に「鉛筆」アイコンが表示されます。ボックス内をクリックすると、テキストを編集できます。
単語や語句を選択し、表示されるフローティングツールバーから書式を選択することでも、書式を設定できます。インラインテキストの書式設定についてもっと読む。
Rich text要素では、メディアの追加、リストの作成、スタイルの設定、テキストの書式設定など、さらに多くのことができます。リッチテキスト要素についてさらに詳しく
画像の差し替え
サイト上で画像を入れ替えることもできます。差し替えたい画像にカーソルを合わせ、「Image」アイコンをクリックしてください。これにより、あなたのコンピューターから新しい画像を選択してアップロードすることができます。
注意：デザイナーで要素に作成したビジュアル・スタイル（ベタ塗り、ボーダー・カラー、シャドウなど）は、エディタで置き換えた画像や背景画像に自動的に適用されます。
ボタンの編集
ボタン要素を編集するには、ボタンにカーソルを合わせ、右上に表示される設定の「歯車」アイコンをクリックします。
2つのオプションが表示されます：
リンク設定の編集 - ボタンのリンクを更新できます。テキストを編集する - ボタンのテキストを変更できます。
ページ設定の管理
Editorのページパネルから、SEOメタタイトルと説明、Open Graph TitleとDescriptions、Open Graph Imageなどの重要なページ設定を管理できます。また、静的ページのパスワード保護設定やコレクションページのRSSフィード設定も管理できます。
ページの設定にアクセスするには
- エディターパネルのページタブを開く
- リストのページにカーソルを合わせます。
- 表示される設定ボタンをクリックする
検索バーを使ってページ名で検索することもできます。
注：「Settings」ボタンではなく、ページをクリックすると、「Page」パネルが閉じ、対応するページが開きます。
ダイナミックコンテンツの作成と管理
サイトにコレクションがある場合、Editorでコレクションタブからアクセスできます。コレクションパネルには、すべてのコレクションが表示されます。コレクションをクリックすると、コレクション名と同じタイトルの新しいタブが開きます。このタブには、そのコレクション内のすべてのコレクションアイテムが含まれます。
コンテンツの作成と編集
既存のアイテムをクリックして編集したり、「New」ボタンをクリックして新しいアイテムを作成し、アイテムの様々なフィールドに入力することができます。
コンテンツの入力やフィールドの更新が終わったら、次のことを選択できます：
- 新しいアイテムを作成するか、既存のアイテムを保存します。アイテムはステージングされ、次回公開時にサイト上で公開されます。
- 次のサイト全体の公開を待たずに、すぐにアイテムを公開する。
- まだアイテムを本番サイトに掲載する準備ができていない場合は、下書きとして保存します。
- 変更を取り消す
コレクションアイテムの作成と公開の詳細については、こちらをご覧ください。
アイテム名の右にある「page」アイコンをクリックすると、そのアイテムのCollectionページを表示できます。これにより、パネルが折りたたまれ、現在表示しているアイテムのページがブラウザに表示されます。必要であれば、パネルではなく、そこで編集することができます。
コレクションアイテムのリストに戻るには、[戻る] ボタンをクリックします。
コンテンツの管理Collectionパネルでは、すべてのCollectionアイテムとそのステータスを確認できます。コンテンツの大規模なデータベースを扱う場合、Collectionアイテムの管理は、編集対象を決定する際の救世主となります。次の方法でこれを行うことができます：
- コレクションアイテムのページング
- コレクションフィールドの表示
- コレクションアイテムの検索
- コレクションアイテムのフィルタリング
- コレクションアイテムの並べ替え
- コレクションアイテムの一括編集
コレクションアイテムの管理についてもっと読む。
コレクションタブを閉じるには、タブ右上の「閉じる」（X）ボタンをクリックします。
変更の表示と公開
変更をすべて行った後、それらを表示し、保存され、パブリッシュする準備ができていることを確認してから、Publishをクリックしてください。
ライブサイトでの変更の表示
エディターで作業中は、エディターパネルがウェブサイトの大部分を覆います。エディターパネルを折りたたんでウェブサイトを表示するには、上部にある「View site」ボタンをクリックしてください。
このビューでは、通常と同じようにウェブサイトを閲覧し、任意のページに変更を加えたり表示したりすることができます。
Publishing
エディターで行った変更は、編集した項目を個別に公開するか、Publishボタンを押してすべてのstaged changesを公開するまで、本番サイトには反映されません。サイトが実際に公開される前に、すべての変更を公開するかどうかを確認する必要があります。緑色のPublishボタンで確認できます。
重要：Editorから公開すると、webflow.ioステージングドメインとカスタムドメインの両方に公開されます。これを避けるには、Designerまたはsite settinfsからPublishしてください。
フォームに送信された情報へのアクセス
サイトにフォームがある場合、エディターには「Form」タブがあります。ここでは、フォームから送信された基本的な情報を見ることができますが、フォームデータ全体をダウンロードする場所として最も便利です。ダウンロードしたCSVファイル（主要なスプレッドシートアプリで動作するフォーマット）では、送信されたすべての情報を見ることができます。
要素のEditor設定
デフォルトでは、あなた、ワークスペースのメンバー、コンテンツエディターは、エディターを使ってライブサイトのすべてのコンテンツを編集できますが、必要に応じてコンテンツエディターが編集できないようにすることもできます。
- デザイナーでサイトを開く
- 編集不可にしたい要素を選択する
- エレメントの設定へ (D)
- 「Collaborators can edit this element(共同作業者がこの要素を編集できる)」のチェックを外す
また、Command + Shift + L（Macの場合）またはControl + Shift + L（Windowsの場合）を使用して、選択した要素のコンテンツエディタを切り替えることもできます。
重要：CMSエレメントは常にエディターで編集可能です。
役立つ情報：User Accountsのユーザーと設定を管理する機能はEditorにはありません。代わりに、デザイナーまたはAPIを使用する必要があります。
コンテンツエディターの権限
WorkspaceサイトにCMS、ビジネス、またはEコマースのサイトプランがある場合、コンテンツエディタを招待して、サイト上で共同作業を行うことができます。Editorでサイトを開き、コンテンツを編集し、変更をステージングするだけでなく、コンテンツエディタは CMS コンテンツを追加し、ページ設定を編集できます。
コンテンツ エディターには、ワークスペース メンバーとは異なる公開権限もあります。 コンテンツエディターの公開権限についてはこちらを参照してください。