Editor」の内容を元に作成しています。引用元:https://university.webflow.com/lesson/intro-to-the-editor動的コンテンツの追加、編集、削除を含む、サイト更新作業全般を簡単に操作できるエディター機能がWebflowには備わっています。この投稿では、エディター画面へのアクセス方法から、静的コンテンツの編集方法、動的コンテンツの編集方法まで、詳細に解説します。‍ウェブサイトを構築・デザインするデザイナー画面が開発者用の機能とするならば、エディター画面(Editor)はコンテンツの編集と管理のみを行う、クライアント用(Webに詳しくない方向け)の機能ということができます。シンプルなインターフェイスのエディターでは、公開されたウェブサイトを管理するためのツールがいくつも用意されています。これはプロジェクトの所有者だけでなく、第三者をコラボレーターとして招待することができます。変更の表示と公開フォーム履歴へのアクセスエディター向けの要素設定クライアント向けのエディター解説はこちらからご覧ください。エディターへのアクセス方法Webflowのエディター画面は、公開されたWebサイトで使用可能になります。Webflowのエディター画面は、公開されたWebサイトを直接操作する形で、サイト内のコンテンツを編集したり、エディターパネルからページやコンテンツの管理を行うことができます。‍Webflowの画面からエディターにアクセスする方法Webflowの画面からエディターにアクセスする方法は3通りあります。公開されているサイトからエディターにアクセスする方法コラボレーターとして招待されたユーザーは、ブラウザのアドレスバーで自分のウェブサイトのURLの最後に「/?edit」を追加することで、自分のウェブサイトのエディターにアクセスできます(例:yourwebsite.com/?edit)。一度ログインすれば、Editorモードで自分のウェブサイトにアクセスすることができます。site」ボタンが表示され、これをクリックするとエディターモードに遷移できます。エディターを使用するには、ブラウザでサードパーティからのクッキーを受け入れるように設定する必要があることをコラボレーターには伝えておいてください。‍エディター画面がサポートされているブラウザWebflowは、Chromeの最新版またはSafariのエバーグリーンリリースに加え、様々なアップデートサイクルに対応した2つのバージョンでエディタを公式にサポートしています。すべてのブラウザの使用を非公式にサポートしています。(たとえば、フィルターはEdgeでは部分的にサポートされています)。詳細については、次を参照してください。サポートを正式に終了しました。サポートされていない一部の機能は、そのブラウザーで正しく機能しない場合があります。サポートの詳細をご覧ください。サポートしていません。この決定の詳細については、こちらをご覧ください。‍エディター画面と公開されているサイト画面を切り替える方法エディター画面から公開されているサイトの画面を開き、サイトを閲覧することができます。site」ボタンをクリックします。site」をクリックすると、公開されているサイトの画面を開くことができます。‍エディター画面ログインエラー時のトラブルシューティングエディターにログインしようとしたときに、エラーメッセージが表示された場合、次のいずれかの修正を試してみてください。お使いのブラウザがCookieを受け入れているかどうかを確認し、受け入れていない場合は有効にしますエディターからログアウトし、ブラウザーのキャッシュをクリアして再度ログインしますシークレットモードでエディターにログインしてみます別のブラウザーでログインしてみますエディターに新しいコラボレーターの招待状を送り、シークレットウィンドウを使って新しいアカウントを作成するように依頼しますどの方法でもうまくいかない場合は、Webflowのサポートにご連絡くださいエディターの共同編集についてデザイナー画面とは異なり、エディター画面では複数人で同時に編集することが可能です。同じ箇所を2人以上で変更した場合、最後に編集した内容が反映されます。‍エディターツールバーの構造エディターにアクセスすると、エディターツールバー(灰色のバー)が画面下に表示され、メイン画面には実際のウェブサイトと変わらない画面が表示されます。このツールバーから、ページ設定、動的コンテンツ、フォーム、エディターアカウントを管理するための様々なエディターパネルにアクセスすることができます。エディターで行った変更を確認したり、公開したりすることもできます。エディター・ツールバーには、以下のタブとアイコンがあります。このメニューからは、ダッシュボード、プロジェクト設定、デザイナーに移動できます。このボタンはデフォルトではWebflowのロゴを使用していますが、Proプランではこのロゴをお客様独自のロゴやクライアントのロゴに変更することができます。「Pages」パネルを開き、サイトの静的ページと動的ページのすべてを一覧表示します。ここから、編集したいページを表示したり、ページの設定を管理したりすることができます。コレクションパネルには、すべてのコレクションリストが格納されています。任意のコレクションをクリックすると、ツールバーに新しいタブが表示され、そのコレクション内のすべてのアイテムのリストが表示されます。ここでは、任意のアイテムを編集したり、新しいアイテムを作成したりできます。フォームパネルを開くと、サイト上で送信されたフォームを確認したりCSVダウンロードしたりできます。アカウント設定パネルを開くと、コラボレーターのアカウント情報を編集したり、プロフィール画像をアップロードすることができます。ヘルプとサポートパネルを開くと、エディタの使用に関するよくある質問を確認することができます。エディターからログアウトできます。エディタモードからライブサイトモードに切り替わり、サイト訪問者が見るのと同じようにサイトを見ることができます。すべての変更は、エディターに自動的に保存されます。左下の「Saving...」と「Saved」のステータスがこれを示しています。Change(未公開の変更)」の数が表示されます。Change」をクリックすると、未公開の変更箇所やコレクションアイテムが表示され、どのコラボレーターが変更したかも確認することができます。エディターで行った全ての変更を公開することができます。‍ページ上での編集ページの編集作業は、エディターを使って直感的に行うことができます。さまざまな要素にカーソルを合わせると、編集可能な要素の右上に編集アイコンが表示されます。このアイコンをクリックすると、要素ごとに指定の編集ができます。一言メモ一部のスタイルと、カスタムコードで組み込んだ要素はエディター画面に表示されない場合があります。これは、エディター画面の仕様です。編集可能なテキスト要素にカーソルを合わせると、テキスト要素の周りに薄いグレーのアウトラインが表示され、右上に鉛筆のアイコンが表示されます。ボックス内をクリックすると、テキストを編集することができます。単語やフレーズを選択し、表示されるフローティングツールバーから書式設定を選択することで、書式を設定することができます。リッチテキスト要素では、メディアの追加、リストの作成、スタイル設定、テキストのさらなる書式設定など、さまざまなことが可能です。画像の差し替えサイトに掲載している画像の入れ替えも可能です。置き換えたい画像の上にカーソルを置き、画像アイコンをクリックするだけです。あなたのコンピューターから新しい画像を選択し、アップロードすることができます。一言メモ画像に施される設定は、差し替え前の画像に設定した内容を踏襲するため注意が必要です。横長の画像を入れ替える場合、元画像に近い縦横比の画像の方が綺麗に表示される場合が多いです。‍ボタンの編集ボタン要素を編集するには、ボタンにカーソルを合わせ、右上に表示される設定アイコンをクリックします。設定には2つのオプションがあります。Graph画像などのSEOにおける重要なページ設定を管理することができます。静的ページのパスワード保護設定や、コレクションページのRSSフィード設定も管理することができます。検索バーからページ名で検索を掛けることもできます。‍ページ自体をクリックすると、該当するページが開き、ページ上のコンテンツが編集できるようになります。動的コンテンツを含むWebサイトを構築している場合、エディターの「Collections」タブにアクセスできます(WordPressにおける投稿機能のようなものです)。コレクションパネルには、すべてのCMSコレクションが表示されます。コレクションをクリックすると、コレクション名と同じタイトルの新しいタブが開きます。このタブには、そのコレクション内のすべてのコレクションアイテムが含まれます。既存の項目をクリックして編集したり、「+New」ボタンをクリックして新しく投稿したいアイテムの情報を登録することができます。内容の入力やフィールドの更新が終わったら、次の操作ができます。Save:作成しているアイテムが新規の場合は作成、既存の場合は保存ができます。このアイテムは別の操作でサイトを公開した際に、一緒に公開されます。Publish:サイト全体の公開とは別に、このアイテムだけを公開することができます。Draft:いわゆる下書き保存です。登録内容は保存されますが、公開はされません。Cancel:これまで登録した内容を破棄します。Schedule:公開するタイミングを指定できます。‍アイテム名の右側にあるアイコンをクリックすると、そのアイテムのコレクションページを表示することができます。これにより、パネルが折りたたまれ、現在閲覧しているアイテムのページがブラウザ上に表示されます。これによって、プレビューしながら編集することができます。「←」ボタンをクリックするとアイテム一覧に戻ります。‍コンテンツの管理方法コレクションパネルでは、すべてのコレクションアイテムとそのステータスを確認することができます。複数のアイテムの削除、アーカイブ、ステータスの変更を一度に行うことができます。開いたタブは「✕」ボタンで閉じることができます。編集をすべて行った後は、「Publish」ボタンをクリックすることで、編集内容を公開できます。‍サイトで編集を確認するエディターでの作業中は、エディターパネルがWebサイトの大部分を覆います。Site」ボタンをクリックします。‍このビューでは、通常と同じようにWebサイトを閲覧し、任意のページに変更を加えたり、確認したりすることができます。公開(「Publish」)エディターで行った変更は、編集したコレクションアイテムを個別に公開するか、「Publish」ボタンを押してすべての変更を公開するまで、実際のサイトには表示されません。青い「Publish」ボタンを1回クリックすると、ここまで行った変更内容がリストで表示されます。一言メモエディターで公開すると、ステージングドメイン(テスト環境)とカスタムドメイン(本番環境)の両方にサイトが公開されます。公開する環境を指定したい場合はデザイナー画面もしくはプロジェクトセッティングスから公開を行ってください。‍フォーム履歴へのアクセスWebサイトにフォームを実装している場合、エディターには「Forms」タブがあります。ここでは、サイト閲覧者が送信したフォームの基本的な情報を見ることができます。フォームの全情報をCSVダウンロードしてみることもできます。‍エディター向けの要素設定デフォルトでは、エディターにアクセスできる人であればだれでも、どの要素に対しても編集作業ができます。一方で、デザイナー画面で任意の要素をエディターでは編集できないようにすることができます。あなたとサイトの共同作業者はエディタを使用して本番サイトのすべてのコンテンツを編集できますが、必要に応じて要素を編集不可能にすることができます。Command+Shift+L(Macの場合)、Control+Shift+L(Windowsの場合)で切り替えることもできます。CMSの要素は編集制限を掛けられません。一言メモWebflowのメンバーシップ機能はエディターでは管理できません。‍まとめいかがでしょうか。当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。今後とも宜しくお願い致します。‍Webflowとはなにか?についてはこちらで解説しています。合わせてご覧ください。‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。