ウェブサイトを構築・デザインするデザイナー機能とは異なり、エディター機能では、自分とワークスペースのメンバーのみがコンテンツを編集・管理することができます。シンプルなインターフェイスでウェブサイトの更新が可能になり、また、ゲストエディタアクセスを使えば、デザインを崩すことなく、クライアントを招待して自分のサイトを管理させることができます。このレッスンでは、ゲストエディターがエディタにアクセスする方法と、ログインに関する問題のトラブルシューティング方法について詳しく説明します。

  1. エディターツールバーの構造
  2. ページ上での編集
  3. ページ設定の管理
  4. ダイナミックコンテンツの作成と管理
  5. 変更の表示と公開
  6. フォーム送信へのアクセス
  7. ワークスペースのエディタ設定
The Editor toolbar is highlighted at the bottom of the webpage shown.

1. はじめに…エディターへのアクセス方法

エディターへは、サイトの公開後（webflow.io staging サブドメインまたはカスタムドメイン）にアクセスすることができます。ログイン後にサイト上のコンテンツをページ上で直接編集したり、エディターパネルからページやコンテンツを管理することができます。

各インターフェイスからエディタにアクセスする

ウェブフローのダッシュボード、またはデザイナーでサイトをデザインしている場合、次のいずれかの方法でエディタにアクセスすることができます。

方法1: ダッシュボードのサイトメニューから

左の画像は、サイトのサムネイルにある3つの開示ドットを示しています。右の画像は、拡張されたメニューで、エディター・オプションが強調表示されています。

方法2: サイト設定内の上部ツールバーから

サイト設定の上部ツールバーのエディターボタン。

方法3 :デザイナーのメニュー画面から

Step one on the left, click on the Webflow W icon. Step two on the right, select the Editor button from the dropdown menu.
デザイナー左上のメニューボタン（"W "アイコン）を開き、"Editor "を選択します。

方法4: 本番サイトからエディタにアクセスする

ゲストエディターは、ブラウザのアドレスバーで自分のウェブサイトのURLの最後に/?editを追加することで、自分のウェブサイトのエディターにアクセスできます（例：yourwebsite.com/?editなど）。一度ログインすれば、エディターモードでウェブサイトにアクセスすることができます。

後でサイトに戻ったとき、右下に "Edit site "ボタンが表示され、これをクリックするとエディター・モードに移行することができます。

ゲスト・エディターには、エディターを使用するためには、ブラウザですべてのサードパーティからのCookieを受け入れるように設定する必要があることを伝えておいてください。

The “Edit site” button on the site page.
The Editor toolbar in the Editor.

エディターモードとライブサイトモードの切り替え

エディタを開くと、プレビューモードまたは「ライブサイト」モードでサイトを探索することができます。エディターモードに切り替えるには、ページの右下にある「Edit site」ボタンをクリックします。プレビューモードでサイトを見たいときは、「ライブサイトに戻る」をしてください。

エディタのログインエラーのトラブルシューティング

ワークスペースのメンバー、またはゲストエディタがエディタにログインしようとしたときに、エラーメッセージが表示された場合は、次のいずれかの対処法を試してみてください。

  • ブラウザがCookieを受け入れるかどうかを確認し、受け入れていない場合は有効にする。
  • エディタからログアウトし、ブラウザのキャッシュをクリアしてから再ログインする。
  • シークレットモードでエディタにログインする。
  • 別のブラウザでログインしてみる
  • コンテンツエディターに新しいゲストエディターの招待状を送り、シークレットウィンドウを使用して新しいアカウントを作成するよう依頼する。
  • カスタムコードを削除または無効にする。

どれもうまくいかない場合は、サポートにご連絡ください。


注意：
サイトにカスタムコードがある場合、そのカスタムコードがエディターに影響を与える可能性があります。これは、エディターが公開されたサイトの上にレンダリングされるために起こります。カスタムコードを削除するか、無効にしてみてください。

マルチユーザーコラボレーション

The Editorでは、複数のチームメンバーやゲストエディターが静的コンテンツや動的コンテンツを同時に編集することができます。同じコンテンツを2人が同時に編集した場合、最後に編集した人が勝ちとなりますので、チームメイトやゲストエディターと編集時間を調整することが必要です。また、エディターにはサイトアクティビティログがあり、サイトを公開する前に、誰がどのような編集を行ったか確認することができます。


サイトのデザインを編集する場合は、エディター機能と同様、デザイナー機能でチームメンバーと共同作業を行うことができます。


2. エディタツールバーの構造

エディタにアクセスすると、エディタツールバー（灰色のバー）が画面の下に表示されます。このツールバーから、ページ設定、ダイナミックコンテンツ、フォーム、エディタアカウントを管理するための様々なエディタパネルにアクセスすることができます。また、エディターで行った変更を確認したり、公開することもできます。

The Editor toolbar showing the Pages, Orders, Ecommerce, and Forms tabs, as well as “1 Unpublished change.”

エディタツールバーには、以下のタブとアイコンがあります。

  • メニュー - このメニューを使用して、ダッシュボード、サイト設定、またはデザイナーに移動します。このボタンには 「Webflow 」のロゴが表示されます。
  • ページ - サイトの静的ページと動的コレクション ページを一覧表示するページ パネルを開きま す。ここから、ページを参照したり、クリックしてライブページを表示したり、ページの設定を管理することができます。
  • コレクション - コレクションパネルを開き、すべてのコレクションを一覧表示します。コレクションをクリックすると、ツールバーの新しいタブが開き、そのコレクション内のすべてのアイテムのリストが表示されるコレクションアイテムパネルが開きます。ここでは、アイテムの編集や新しいアイテムの作成が可能です。これはデザイナー機能のCMSパネルに非常によく似ています。
  • Forms - フォームパネルを開き、サイト上で作成されたフォームの送信を確認したり、ダウンロードしたりすることができます。
  • Account Settings (icon) - Account settings panelを開き、ゲストエディターのアカウント情報を編集したり、プロフィール画像をアップロードしたりすることができます。
  • Help & Support (アイコン) - Help and Supportパネルを開き、エディタの使用に関する一般的な質問に対する答えを見つけることができます。
  • Log out（アイコン） - 確認後、エディタからログアウトします。
  • Back to live site（ボタン） - エディターモードからライブサイトモードに切り替わり、サイト訪問者が見るのと同じようにサイトを表示することができます。
  • 保存/Saved - すべての変更は、エディタに自動的に保存されます。エディタでサイトに変更を加えると、「Saving...」または「Saved」のいずれかのステータスが表示されます。
  • 変更履歴 - 左下の公開ボタンの横に、未公開の変更履歴の数が表示されます。変更履歴をクリックすると、未公開の変更があるアイテムやページのリストが表示され、どのゲストエディタまたはワークスペースメンバーがその変更を行ったかを確認することができます。
  • publish公開 (ボタン) - エディタで行ったすべての変更を公開することができます。

3. ページ上での編集

エディターを使って、ページ上ですぐに編集することができます。編集可能な要素にカーソルを合わせると、右上に「鉛筆」または「絵」のアイコンが表示されます。これらの要素を編集するには、アイコンをクリックするだけです。

The “pencil” icon which appears over an editable heading.
The “picture” icon which appears over an editable image.

注：
一部のスタイルとカスタムコードは、公開されたサイトで表示されるはずのものではありません。これは、エディターを使用しているときの画面動作です。

テキストの編集と書式設定

編集可能なテキスト要素にカーソルを合わせると、テキスト要素の周りに薄いグレーの輪郭が表示され、右上に「鉛筆」アイコンが表示されます。ボックス内をクリックすると、テキストを編集することができます。

A paragraph is selected in the Editor and the “pencil” icon is visible.

また、単語やフレーズを選択し、表示される四角く囲まれたフローティングツールバーから書式設定を選択することでも、書式設定を行うことができます。

The formatting toolbar that appears when a word is highlighted in the Editor.

リッチテキスト要素では、メディアの追加、リストの作成、スタイル設定、テキストのさらなる書式設定など、さまざまなことが可能です。

The Rich text formatting toolbar that appears when rich text is selected in the Editor.

画像の差し替え

サイト上で画像を入れ替えることもできます。置き換えたい画像の上にカーソルを置き、「画像」アイコンをクリックするだけです。すると、あなたのコンピューターから新しい画像を選んでアップロードすることができます。

An image of a night sky full of stars has an edit icon on the top-right corner.
注：
デザイナーで要素に作成したビジュアルスタイル（ベタ塗り、ボーダーカラー、シャドウなど）は、エディタで置き換える画像や背景画像に自動的に適用されます。

ボタンの編集

ボタン要素を編集するには、ボタンにカーソルを合わせ、右上に表示される設定の「歯車」アイコンをクリックします。

A blue button with text "Learn more about editing buttons" has a settings icon on the top right.

2つのオプションが表示されます。

  • リンク設定の編集 - ボタンのリンクを更新することができます。
  • テキストを編集する - ボタンのテキストを変更することができます。 You’ll see two options:
The edit button drop down menu includes two options: edit link settings and edit text.

4. ページ設定の管理

エディタのページパネルでは、SEOメタタイトルや説明文、Open Graphタイトルや説明文、Open Graph画像などの重要なページ設定を管理することができます。また、静的ページのパスワード保護設定や、CollectionページのRSSフィード設定も管理することができます。

The Pages tab is highlighted in the Page settings page within the Editor.
エディターでページ設定を管理する

ページの設定にアクセスするには

エディタパネルで「ページ」タブを開く

リスト内のページにカーソルを合わせます。

表示された[設定]ボタンをクリックします

There are six different blog post pages. The settings button for a blog post page is highlighted on the first page titled Ecommerce product photography tips: a beginner’s guide.

また、検索バーを使って、ページ名で検索することも可能です。

The search bar called “search pages…” is highlighted in the pages top bar section. There are five team member pages on this collection.
注：
設定ボタンではなく、ページをクリックすると、ページパネルが閉じられ、該当するページが開きます。

5. ダイナミックコンテンツの作成と管理

サイト内にコレクションがある場合、エディタ内の「コレクション」タブからアクセスできます。コレクション] パネルには、すべてのコレクションが表示されます。コレクションをクリックすると、コレクション名と同じタイトルの新しいタブが開きます。このタブには、そのコレクション内のすべてのコレクション・アイテムが含まれます。

A new tab called Blog Posts has been added to the tabs section in the editors toolbar. This tab is highlighted among the other five tabs.

コンテンツの作成と編集

既存の項目をクリックして編集したり、「新規作成」ボタンをクリックして項目の各項目を入力して新しい項目を作成したりすることができます。

A green “new blog post” button is highlighted on the top right corner of the collection page called Blog posts. There are six pages already created and published on this page.
「新規ブログ投稿」ボタンは、エディター内でハイライト表示されます。

コンテンツの入力やフィールドの更新が終わったら、次のことを選択できます。

  • 公開準備ー新しいアイテムを作成するか、既存のアイテムを保存します。このアイテムは、公開するためにステージングされ、次に公開するときにあなたのサイトで公開されます。
  • すぐに公開ーアイテムをすぐに公開する（次のサイト全体の公開を待たずに）。
  • 下書き保存ーまだ公開する準備ができていない場合は、下書きとして保存します。
  • 破棄ー変更を破棄する場合は、キャンセルします。
A green “create” button is pressed with a dropdown menu including a publish, save as a draft and schedule option. This dropdown menu is highlighted in the collection page “My amazing blog post” settings page.
エディターで個々のアイテムをパブリッシュ(公開)する

アイテム名の右にある「ページ」アイコンをクリックすると、そのアイテムのCollectionページを表示することができます。これにより、パネルが折りたたまれ、現在閲覧しているアイテムのページがブラウザ上に表示されます。もしよろしければ、パネルではなく、そこで編集してください。

The collection page toolbar includes a icon to the right of the page name which is for navigating to the detail page. This icon is highlighted on the top bar.

コレクションアイテムの一覧に戻るには、「戻る」ボタンをクリックします。

The left arrow icon is highlighted on the collection page top bar. Next to it is the collection page name “My amazing blog post.”

6. コンテンツの管理

コレクションパネルでは、すべてのコレクションアイテムとそのステータスを確認することができます。複数のアイテムを同時に削除、下書き、またはアーカイブすることができます。そのためには

  1. [選択]ボタンをクリックします。
  2. 管理するアイテムを選択します。
  3. 上部のツールバーからアクション(削除、下書き、アーカイブ)を選択します。
The select button on the top-right of the Blog posts collection settings page is highlighted between the search bar and green “new blog post” button. There are six published collection pages already published.

エディターでのコレクションアイテムの管理

コレクションタブを閉じるには、タブの右上にある「閉じる」（X）ボタンをクリックします。

The “close” (x) button in the Lessons tab of the Editor toolbar.

変更の確認と公開

これらの変更をすべて行った後、変更を確認し、保存されて公開する準備ができていることを確認してから、[公開] をクリックします。

ライブサイトでの変更内容の確認

エディタで作業している間は、エディタパネルがウェブサイトの大部分を覆っています。エディタパネルを閉じてウェブサイトを表示するには、上部にある「サイトを見る」ボタンをクリックします。

The View Site button is highlighted in its position above the editor tool bar.

このビューでは、通常と同じようにウェブサイトを閲覧し、任意のページに変更を加えたり、閲覧したりすることができます。

公開

エディターで行った変更は、編集した項目を個別に公開するか、「公開」ボタンを押してすべての段階的な変更を公開するまで、本番サイトでは行われません。サイトが実際に公開される前に、すべての変更を公開することを確認する必要があります。緑色の[公開]ボタンがこれを確認します。

The green Published button has been clicked and a notice has appeared saying Publish successful and “You published 1 change to your site.” There is a check mark indicating the changes have been saved next to the Back to live site button.
重要：エディタから公開すると、webflow.ioのステージングドメインとカスタムドメインの両方にサイトが公開されます。これを避けるには、デザイナーまたはサイト設定から公開してください。

7. フォームの投稿にアクセスする

あなたのサイトにフォームがある場合、エディタには「フォーム」タブがあります。ここでは、人々が投稿したフォームの基本的な情報を見ることができますが、最も便利なのは、フォームの完全なデータをダウンロードする場所として使用することです。ダウンロードしたCSVファイル（主要な表計算アプリケーションで動作する形式）では、送信されたすべての情報を確認することができます。


8. ワークスペースのエディタ設定


デフォルトでは、あなた、ワークスペース メンバ、ゲスト エディタはエディタを使用してライブ サイトのすべてのコンテンツを編集できますが、必要に応じて、ゲスト エディタが要素を編集できないようにすることができます。

  1. デザイナーでサイトを開きます。
  2. 編集不可にしたい要素を選択します。
  3. 要素の設定 (D) に移動します。
  4. "共同作業者がこの要素を編集できる "のチェックを外す
Under the editor settings section the Collaborators can edit this element setting is checked.

また、Command + Shift + L (Mac) または Control + Shift + L (Windows) を使用して、選択した要素のゲストエディタを切り替えることができます。

重要：CMS要素は常にエディターで編集可能です。

ゲストエディターの権限

Workspace のサイトが CMS、ビジネス、または E コマースのサイトプランの場合、ゲストエディタを招待してサイト上で共同作業を行うことができます。ゲストエディターは、エディターでサイトを開き、コンテンツを編集し、変更をステージングするだけでなく、CMS コンテンツを追加し、ページ設定を編集することができます。

ゲストエディターには、ワークスペースのメンバーとは異なる公開権限もあります。