ライブテキストエディターは、Webページ上のすべてのテキスト要素をワンクリックで編集可能にします。見出し、段落、ボタンラベル、ナビゲーション項目、またはその他のテキストコンテンツをライブページ上で直接変更できます。編集されたテキストはリアルタイムでレンダリングされ、ページ本来のフォント、色、レイアウトは保持されます。コピーのバリエーションのテスト、モックアップの作成、カスタムコンテンツでのスクリーンショット撮影に最適です。
「この見出しを別の言葉にするとどう見えるだろう」や「クライアント名をプレースホルダーテキストの代わりに入れたスクリーンショットが欲しい」と思ったことは何度ありますか？通常これはコードの編集、ビルドの再実行、または画像エディターでのテキストのオーバーレイを意味します。ライブテキストエディターはこれらすべてを不要にします。ページ上の任意のテキストをクリックするだけで入力を開始できます。テキストはcontentEditableを使用してインプレースで編集可能になるため、要素の元のCSSスタイリングがすべて保持されます：font family、font size、font weight、色、letter-spacing、line-height、text-transform、およびその他すべてのテキストプロパティ。タイプするにつれてレイアウトがリアルタイムで更新されます。新しいテキストが長い場合、要素は自然に拡張します。1回のセッションで好きなだけテキスト要素を編集できます。編集カウンターが変更した要素数を追跡し、「すべて元に戻す」ですべてを即座に復元します。すべての変更はビジュアルのみで、ページを更新するとリセットされます。
ページ上の任意のテキスト要素（見出し、段落、span、ボタンラベル、リンクテキスト、リスト項目、テーブルセル）をクリックすると、即座に編集可能になります。点滅カーソルが表示され、入力を開始できます。選択モードや余分なクリックは不要です。
編集されたテキストは元のすべてのCSSプロパティを保持します：font-family、font-size、font-weight、色、line-height、letter-spacing、text-transform、およびレイアウトプロパティ。テキストはページに本来属しているように見え、粗雑なオーバーレイのようには見えません。
長いまたは短いテキストを入力すると、要素は自然にリサイズされ、周囲のレイアウトは実際のコンテンツと同様にリフローします。テキストの長さの違いがレイアウトにどう影響するかを正確に確認できます。
1回のセッションで好きなだけテキスト要素を編集できます。見出しを変更し、次にサブタイトル、ボタンラベル、フッターテキストを変更できます。各編集はページを更新するまで保持されます。
編集した要素数を示す小さなカウンターが表示されます。「すべて元に戻す」でワンクリックにより、すべての編集済み要素が元のテキストコンテンツに復元されます。個々の変更は「変更前：元のテキスト」ヒントで追跡されます。
すべての編集はブラウザの DOM にのみ存在し、サーバーに保存されることはありません。ページを更新するとすべてのテキスト要素が元のコンテンツに戻ります。本番サイトを含む任意のWebサイトで安全に使用できます。
ライブページでさまざまな見出しのバリエーションを試して、どの言葉が最も効果的かを確認します。「Get Started Free」対「Start Your Free Trial」対「Create Your Account」— 実際のページデザインでレンダリングされた各バージョンを確認します。
プレゼンテーション中にプレースホルダーテキスト（「Lorem ipsum」）をクライアントの実際のコンテンツに置き換えます。実際のデザインでレンダリングされた会社名、製品説明、CTAコピーを見せることができ、静的なモックアップよりはるかに説得力があります。
ドキュメント、ブログ投稿、またはプレゼンテーションスライド用に特定のテキストを表示したスクリーンショットが必要ですか？テキストを直接編集し、スクリーンショットツールを使用してカスタムコンテンツのきれいな画像をキャプチャします。
製品名が15文字ではなく40文字の場合どうなりますか？または説明が1行ではなく3行の場合は？長いテキストを入力してレイアウトがどう処理するかを確認し、実際のコンテンツが問題を引き起こす前にオーバーフローのバグを発見します。
翻訳されたテキストを要素に貼り付けて、デザインがさまざまな言語をどう処理するかを確認します。ドイツ語のテキストは英語より30%長いことがよくありますが、レイアウトはまだ機能しますか？ボタンのテキストはまだ収まりますか？
DevSuite Proのフローティングドックを開き、ライブテキストエディターのアイコンをクリックします。ツールが起動し、ページ上のすべてのテキスト要素が編集のためにクリック可能になります。
見出し、段落、ボタンラベル、またはその他のテキストコンテンツをクリックします。テキスト内にカーソルが表示され、要素の上に「編集中」バッジが表示されます。
入力を開始してテキストを置き換えるか変更します。新しいコンテンツは元のスタイリングを保持したままリアルタイムでレンダリングされます。レイアウトは新しいテキストの長さに自然に適応します。
現在の要素の外側をクリックして編集を完了し、別のテキスト要素をクリックして編集します。編集カウンターがすべての変更を追跡します。
「すべて元に戻す」をクリックしてすべての編集済み要素を復元するか、ページを更新してすべてを完全にリセットします。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。
