Content Editor入門:テキスト・画像・リンクを安全に更新する
Content Editor入門:テキスト・画像・リンクを安全に更新する
Content editor roleは、Webflowサイトの見た目を確認しながら、文章・画像・リンクなどのコンテンツを更新するための役割です。サイトの構造やデザインを変更せずに作業できるため、日常的な更新はContent editor roleで行うのが安全です。
従来のLegacy Editorは2026年8月4日から利用できなくなる予定です。この章では、公開版として最新のContent editor roleを前提に説明します。 実画面例: 実際のサイト画面を見ながら、対象の文章・画像・リンクを確認して更新します。
作業全体の流れ
- Content editor roleでWebflowを開きます。
- 更新したいテキストを編集します。
- 必要に応じて画像を差し替えます。
- ボタンや文章のリンク先を確認・変更します。
- 変更内容を確認します。
- 問題がなければPublishします。
画像差し込み枠
この章は、実際の画面キャプチャーが多いほど初心者に伝わりやすくなります。後でBOOSTのWebflow画面を使って、以下の位置に画像を差し込んでください。実際の顧客名、メールアドレス、非公開URL、フォーム送信内容は写さないでください。
| No. | 対象ページ | 撮影する画面 | 強調する箇所 |
|---|---|---|---|
| B-01 | Content Editor入門 | Dashboardで対象サイトのカードが見えている状態 | サイトカード、Editorまたは編集入口 |
| B-02 | Content Editor入門 | 対象サイトを開いた直後の画面 | 画面上部のバー、編集可能エリア |
| B-03 | Content Editor入門 | 編集できるテキストにカーソルを合わせた状態 | 青い枠、編集アイコン |
| B-04 | Content Editor入門 | テキストをクリックして編集状態になった画面 | 入力カーソル、編集対象の文章 |
| B-05 | Content Editor入門 | 画像にカーソルを合わせた状態 | 画像編集アイコン、選択中の画像 |
| B-06 | Content Editor入門 | 画像アップロードまたは選択画面 | Upload、Replace、Choose Imageのボタン |
| B-07 | Content Editor入門 | ボタンやテキストリンクを選択した状態 | リンク設定アイコン、対象リンク |
| B-08 | Content Editor入門 | リンクURLの入力欄が開いた状態 | URL欄、新しいタブ設定 |
| B-09 | Content Editor入門 | Publish前にページ全体を確認している状態 | 修正済みのテキスト、画像、リンク |
| B-10 | Content Editor入門 | Publishボタンまたは公開確認画面 | Publish、公開対象ドメイン |
| B-11 | Content Editorを開く | ?update 付きURLで編集画面を開いた状態 | URL末尾の ?update、ログイン後の編集画面 |
| B-12 | Content Editorを開く | 編集権限がない、または編集アイコンが出ない例 | Editor入口が出ない状態、確認すべき場所 |
| B-13 | テキスト編集 | 短い見出しを編集している画面 | 変更前後が分かる見出し |
| B-14 | テキスト編集 | 長い本文を編集している画面 | 改行位置、貼り付け後の本文 |
| B-15 | 太字設定 | テキスト選択後にツールバーが出ている画面 | Boldボタン、選択範囲 |
| B-16 | リンク設定 | 外部リンクを入力している画面 | URL欄、Open in new tab |
| B-17 | 画像差し替え | 差し替え前の画像と編集アイコン | 対象画像だけを選ぶこと |
| B-18 | 画像差し替え | 差し替え後の表示確認画面 | 画像の縦横比、切れ、ぼやけ |
| B-19 | 破棄・戻す | 保存せず閉じる、または変更破棄の確認画面 | Discard、Cancelなどの選択肢 |
| B-20 | 公開前チェック | 公開サイトを別タブで確認している画面 | 公開URL、変更後の表示 |
Webflowを開く
WebflowにログインしてDashboardから対象サイトを開く方法と、サイトURLの末尾に ?update を付けて直接開く方法があります。サイトごとに権限や案内URLが異なる場合があるため、初回は制作担当者から共有された方法を優先してください。
詳しい手順は No.9 Content editor roleでWebflowを開く方法 を確認してください。
テキストを編集する
- 編集したい文章にマウスを合わせます。
- 編集アイコン、または編集可能なテキスト部分をクリックします。
- 文章を直接入力・削除します。
- 長い文章は、先にGoogle Docsやメモ帳で作ってから貼り付けると安全です。
詳しい手順は No.10 サイトの文字を書き換える方法 を確認してください。
画像を差し替える
- 差し替えたい画像にマウスを合わせます。
- 画像編集アイコンをクリックします。
- 新しい画像ファイルを選択またはドラッグしてアップロードします。
- 公開前に、画像が粗くないか、縦横比が崩れていないか確認します。
画像がアップロードできない場合は 画像アップロードのトラブル も確認してください。
リンクを編集する
ボタンや文章リンクのリンク先を変更する場合は、リンク設定画面でURLを確認します。外部サイトへ飛ばすリンクは、必要に応じて新しいタブで開く設定にします。
リンク作成は No.12 文章にリンクを設定する方法、リンク先変更は No.14 リンク先URLを変更する方法 を確認してください。
Publish前に確認する
- 文章に誤字脱字がない
- 元の意味と違う文章になっていない
- 画像が正しく表示されている
- ボタンやリンクをクリックしたときの遷移先が正しい
- スマートフォン表示で文字や画像が崩れていない
- 変更してはいけない共通パーツを触っていない
詳しい確認項目は Editor公開前チェックリスト を使ってください。
Publishする
編集内容は、Publishするまで一般の閲覧者には反映されません。内容を確認したら、Publish権限がある担当者が公開します。公開後は実際のWebサイトを開き、変更が反映されているか確認してください。
詳しい手順は No.15 変更を保存してサイトに反映させる方法 を確認してください。
よくあるつまずき
| 症状 | 確認すること |
|---|---|
| 編集アイコンが出ない | ログイン状態、Content editor role、編集不可エリアを確認する |
| Publishしたのに反映されない | ブラウザのキャッシュを削除、または強制再読み込みする |
| 画像が大きすぎる | 画像サイズを調整してからアップロードする |
| リンク先が違う | URLの入力ミス、外部リンク設定、新しいタブ設定を確認する |
理解度チェック
- Content editor roleでの作業として適切なものはどれですか?
- A. サイト全体のレイアウトを作り直す
- B. 既存の文章、画像、リンクを更新する
- C. DNS設定を変更する
答えを見る
正解: B
Content editor roleは、完成済みページのコンテンツ更新に向いています。構造変更やドメイン設定は担当者に確認してください。
- 外部サイトへのリンクを設定するとき、確認した方がよいことはどれですか?
- A. URLが正しいか、新しいタブで開く必要があるか
- B. リンク文字の色だけ
- C. 画像サイズだけ
答えを見る
正解: A
外部リンクはURLの入力ミスが起きやすいため、クリックして遷移先を確認します。必要に応じて新しいタブで開く設定も確認します。
- 変更内容が一般公開サイトに反映されるタイミングとして正しいものはどれですか?
- A. 文字を入力した瞬間
- B. Previewで見た瞬間
- C. Publishが完了した後
答えを見る
正解: C
編集内容はPublishするまで一般の閲覧者には反映されません。Publish後は公開サイトで確認します。
次に進む
具体的な操作を順番に確認する場合は No.9 Content editor roleでWebflowを開く方法 から進んでください。