ウェブサイトのテキストを編集する方法

4月 9, 2024

—

📖

Web サイト上のテキストをブラウザで直接編集できることをご存知ですか?それは正しい。

Web ページは読み取り専用ですが、実際には、Web サイトの所有者でなくても、ブラウザーでローカルコピーを編集できます。これは、エラーを修正したり、その場で開発者ツールを試したり、ブラウジングエクスペリエンスを向上させる実用的な調整を行ったりするのに便利な方法です。

この記事では、Chrome、Safari、Firefox、Microsoft Edge、Opera を使用して Web ページを編集する方法を説明します。

ウェブサイト上のテキストを編集する方法

最新のブラウザにはすべて開発者ツールが装備されています。

これらは通常、Web ブラウザーの内部開発パネルを開き、表示している内容を編集する機会を提供する一連のツールです。一般に、開発者ツールは、HTML/CSS/JavaScript および DOM のコード編集を提供し、さまざまな観点からコンテンツを分析するのに役立ちます。

テキストを編集する機能は、Web 開発者、コンテンツライター、デジタルマーケティング担当者、その他インターネットの閲覧が好きな人にとって非常に重要です。

Web 開発者は、テキストを編集すると、新しいランディングページの見出しをリアルタイムでテストするのに役立ちます。また、クライアントとアイデアを共有し、クライアントが望むものを選択する機会を与えるのにも役立ちます。これにより時間を節約し、より効率的にコミュニケーションを図ることができます。

また、クライアントと共有するためにスクリーンショットを撮るときに機密データを省略するのにも役立ちます。

コンテンツライターの場合、Web ページ上のテキストを編集すると、最適なスクリプトを選択する前にブレインストーミングを行って複数のスクリプトを作成するのに役立ちます。

デジタルマーケティング担当者は、Web ページ上のテキストを編集できるため、SEO の取り組みを強化するための有益な洞察を得ることができます。競合他社が使用しているキーワードを競合他社が洞察するための秘密兵器として使用できます。

まず、Chrome を使用して Web サイト上のテキストを編集する方法を見てみましょう。

Chrome でウェブサイトのテキストを編集する方法

人々は、そのスピード、シンプルさ、Google アプリとのシームレスな統合のために Chrome に惹かれています。

また、他のブラウザよりも多くのデバイスで利用できます。これには、PC、Mac、Chromebook、iPhone、Android、Windows Phone、および最新の Web ブラウザを実行できるその他のほぼすべてのデバイスが含まれます。

Chrome の人気の理由の 1 つは、一般的な機能に加えて、所有者でなくても Web サイト上のテキストを編集できる「要素の検査」機能にあります。加えた変更は一時的なものですが、これはエラーを修正し、新しいアイデアをその場でテストするのに便利な方法です。

その仕組みは次のとおりです。

Chrome を開き、目的の Web ページに移動します。
画面の右上隅にある省略記号 (3 つの小さな点) をクリックします。
「その他のツール」の横にある前向き矢印をクリックします。
ポップアップウィンドウから「開発者ツール」を選択します。これにより、ブラウザウィンドウの右側に「要素」パネルが開き、ページのソースコードを微調整できます。読みやすくするために、ボックスの角をドラッグしてサイズを大きくすることができます。
この時点で、インスペクターパネルの左上隅にあるカーソルアイコンをクリックします。
ブラウザの「通常」部分で編集したいテキストを強調表示します。これにより、インスペクターパネル内の対応するコードが自動的に強調表示されます。
強調表示されたコードを右クリックし、表示されるポップアップサブメニューから [HTML として編集] を選択します。これによりエディタボックスが開き、テキストを自由に変更できます。
編集後、エディターボックスを終了し、右上隅の「X」ボタンをクリックして要素パネルを閉じます。

さあ！編集された Web ページがブラウザウィンドウに表示されるはずです。

おそらくこのツールの最も優れている点は、何かが変更されたとは誰も思わないほどうまく機能することです。編集した Web ページのスクリーンショットを撮ることもでき、すべてがきれいで本物に見えます。

ただし、すべての変更はローカルに行われるため、ページを更新または再ロードするだけで元に戻すことができます。

Firefox でウェブサイト上のテキストを編集する方法

Firefox を愛用している方に朗報です。数回クリックするだけで、インターネット上のあらゆる Web ページ上のテキストを編集できます。

その方法は次のとおりです。

Firefox を開き、目的の Web ページにアクセスします。
ブラウザの右上隅にある 3 本の水平線をクリックし、表示されたドロップダウンメニューから [その他のツール] を選択します。
「開発者ツール」をクリックします。これにより、ブラウザウィンドウの下部にインスペクタパネルが開き、Web ページのソースコードを表示し、テキストの編集などのさまざまな調整を行うことができます。
インスペクターパネルの左上隅にあるカーソルアイコンをクリックします。
カーソルを使用して、変更するテキストを強調表示します。これは、Web ページの主要部分 (インスペクターパネルのすぐ上) で行います。これにより、インスペクターパネル内の対応するコードが自動的に強調表示されます。
ハイライト表示されたコードを右クリックし、「HTML として編集」を選択します。
必要に応じてテキストの編集を続けます。気に入らないものはハイライト表示して Backspace キーを押すことで削除できます。
必要な変更をすべて行ったら、テキストエディターボックスの外側の任意の場所をクリックし、右上隅の [X] ボタンをクリックしてインスペクターパネルを閉じます。

これらの手順を実行すると、すべての変更が Web ページに表示されるようになります。さらに変更を加えたり、編集内容を修正したりするには、上記の手順に従ってテキストエディターボックスを再度開きます。

Safari で Web サイトのテキストを編集する方法

Chrome や Firefox と同様に、Safari には、インターネット上のあらゆる Web ページのローカルバージョンを変更できるブラウザ開発者ツールが装備されています。

その仕組みは次のとおりです。

ステップ 1: Safari 開発メニューを有効にする

Safari でテキストを編集するには、ブラウザの開発メニューを有効にする必要があります。そうするために：

画面上部の「Safari」メニューをクリックし、「環境設定」を選択します。
ドロップダウンメニューから「詳細」を選択します。
「メニューバーに開発メニューを表示」の横にあるチェックボックスをオンにします。

ステップ 2: 変更したいテキストを見つける

この時点で、対象の Web サイトにアクセスし、テキストを変更したいページを開きます。編集するテキストを強調表示します。

ステップ 3: 要素の検査を開く

ポップアップメニューから「要素の検査」を選択します。「要素の検査」ウィンドウが開くと、多数のコードが表示された新しいウィンドウが表示されるはずです。

ステップ 4: テキストを変更する

これで、強調表示されたテキストを置換テキストで上書きできます。完了したら、「Enter」を押して「要素の検査」ウィンドウを終了します。これで、Web ページに新しいテキストが追加されるはずです。

Edge で Web サイト上のテキストを編集するにはどうすればよいですか?

Windows 10 の組み込みブラウザーである Microsoft Edge は、Internet Explorer よりもはるかに多くの機能を提供します。特に、JavaScript のパフォーマンスが向上し、PC 上でインタラクティブな 2D および 3D グラフィックスのレンダリングを支援する WebGL がサポートされるなど、前世代のエンジンに比べて大幅な改良が加えられています。

最も重要なことは、Edge は Web サイトでのテキスト編集をサポートしていることです。

その仕組みは次のとおりです。

Edge を開き、目的の Web ページにアクセスします。
ブラウザの右上隅にある 3 つの小さな点をクリックします。
表示されたドロップダウンメニューから「その他のツール」を選択します。
ポップアップサブメニューから「開発者ツール」を選択します。これにより、ブラウザの内部開発パネルへのゲートウェイである DevTools が開きます。
DevTools ウィンドウが開いたら、左上隅にあるカーソルアイコンをクリックします。
カーソルを使用して、変更するテキストを強調表示します。ブラウザで強調表示されたものはすべて、DevTools ウィンドウでも自動的に強調表示されます。
強調表示されたコードを右クリックし、表示されたドロップダウンメニューから [HTML として編集] を選択します。
必要に応じてテキストを変更してください。
完了したら、テキストエディターウィンドウの外側の任意の場所をクリックし、右上隅の「X」アイコンをクリックして DevTools ウィンドウを閉じます。

Opera の Web サイト上のテキストを編集するにはどうすればよいですか?

Opera はもともとモバイルデバイスで使用されていましたが、現在では PC と Mac でもブラウザーを利用できるようになりました。

Opera が好みのブラウザであれば、インターネット上の Web サイト上のテキスト編集に関しては後れをとることはありません。その方法は次のとおりです。

以下で強調表示されているテキストをコピーし、ブックマークバーに貼り付けます。 javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0
テキストを編集したい Web ページを開きます。
ブラウザの上部にあるブックマークをクリックします。画面上にカーソルが表示され、そのページ上のすべてのテキストを編集できるようになります。

元のテキストに戻すには、ページを更新するだけです。

ウェブページを自由に閲覧

Chrome、Firefox、Microsoft Edge、Opera、Safari にはすべて、Web サイト上のあらゆる編集に役立つ開発者ツールが装備されています。これは、新しいアイデアをテストし、バグを修正し、読みやすさを向上させるための調整を行うための優れた方法です。

そして最も優れている点は、HTML や Web 開発の経験が必要ないことです。

ただし、変更は永続的なものではないことに注意してください。サーバーでは何も書き換えられず、更新ボタンを押すだけで元のテキストに戻すことができます。

この記事で説明した方法のいずれかを使用して Web サイト上のテキストを編集しようとしたことがありますか?どうだった？

以下のコメントセクションでお知らせください。