Google Chromeでウェブサイトのテキストを自由に書き換える方法【開発者ツール活用術】

SNSをスクロールしていると、信じられないような会話のスクリーンショットや、あまりに突飛な文章を目にすることがあります。「これ、本当に実在する会話？」と疑問に思ったことはありませんか？実はその直感は正しく、そうした画像の多くは偽物なのです。

実は、ウェブサイト上のテキストを書き換えてスクリーンショットを撮るのは、驚くほど簡単です。高度な画像編集ソフトも必要ありません。この記事では、Google Chromeを使ってウェブページのテキストを変更する方法を詳しく解説します。

デベロッパーツールでウェブサイトのテキストを編集する方法

まず、編集したいページをブラウザで開きます。ここではChromeを例に説明しますが、EdgeやFirefoxなど他のブラウザでもほぼ同じ手順で操作できます。

ページを開いたら、変更したいテキストの部分で右クリックし、「検証（Inspect）」を選択します。メニューによっては「要素を検証（Inspect Element）」と表示される場合もあります。すると、Chromeの開発者向けパネルが「Elements（要素）」タブで起動します。

ちなみに、F12キーを押すことでも同じパネルを開けます。「F12でテキストを変えるにはどうすればいいの？」と疑問に思っていた方も、この方法なら安心です。

パネル内には、現在閲覧しているページのHTMLコードが表示されます。HTMLに馴染みがない方は、まずHTMLの入門記事を読んでおくと理解が深まるでしょう。

選択したテキストによっては、<p>タグや<div>タグなどの中に目的の文字列が含まれています。タグの横にある矢印をクリックしてセクションを展開し、全文を表示させましょう。

次に、変更したいブロックをダブルクリックするか、右クリックして「Edit text（テキストを編集）」を選択します。編集後、他の場所をクリックするかEnterキーを押せば、ページ上のテキストが更新されます。

この操作は何度でも繰り返せるので、ページ内のさまざまなテキストを自由に書き換えられます。Elementsパネル内のタグにマウスカーソルを合わせると、ページ上の対応する部分がハイライト表示されるので、どのタグがどのテキストに対応しているのかがひと目でわかります。また、不要なブロックを丸ごと削除したい場合は、右クリックして「Delete element（要素を削除）」を選択してください。

変更内容は、ページを再読み込みするまで保持されます。面白い編集ができたら、スクリーンショットを撮って好きな場所でシェアしてみましょう。

DesignModeを使えばもっと簡単！直接テキストを編集する裏ワザ

ウェブサイトのテキスト改変が趣味という方には、Chromeのデザインモード（Design Mode）がおすすめです。この機能を使えば、HTMLコードを掘り起こすことなく、ページ上のテキストを直接クリックして即座に編集できます。

使い方は以下の通りです。F12キーでデベロッパーツールを開き、「Console（コンソール）」タブに切り替えます。そして、コンソール下部の入力欄（警告メッセージの隣にある矢印の横）に次のコードを入力し、Enterキーを押してください。

document.designMode = "on"

これだけで準備完了です。以降は、ページ上の任意のテキストをクリックするだけで、まるでワープロのように直接文字を打ち込んで編集できるようになります。

なお、この設定は現在開いているタブ限定で、ページを再読み込みしたり新しいタブを開いたりすると解除されます。使うたびにコマンドを入力し直す必要がありますが、大量のテキストを一気に書き換えたい場合には、HTMLをいじるよりも格段に効率的です。

ウェブサイトのテキスト編集は思ったより簡単

ウェブページは一度ブラウザにダウンロードされれば、そのコピーは自分のデバイス上にあるものなので、自由に改変できます。だからこそ、ウェブサイトに表示されるテキストの書き換えがこんなに簡単に行えるのです。これであなたも、ウェブサイトのテキスト編集方法をマスターしました。ぜひ友達とのネタ作りなどに活用してみてください。

さらに遊びたい方は、友人に仕掛けられるコンピュータを使ったいたずらネタ集もチェックしてみてはいかがでしょうか。