Webページで広告など一部だけ一時的に削除や非表示ができますか？
「DevTools」を使えば選択した「要素」を削除／非表示できます。
ブラウザーの開発者ツール「DevTools」については解説しています。
この「DevTools」を使うと「検証」している Webページを構成している「要素」を一時的に削除したり非表示にすることができます。
Webページの印刷や画面キャプチャーをするときに、広告や著作権的に含めたくない画像を削除したいときなどに使えます。
手順は簡単で、削除したい部分、たとえば画像の上にマウスポインターを合わせ、右クリックしたメニューで「検証」を選択します。
例として「なにしろパソコン」のロゴ画像を使ってやってみます。
すると画面右に「DevTools」が現れ、左画面で先ほど選択した画像部分と右画面の「要素」に表示されるソースコードの一部がグレイ表示されます。
このグレイ部分がお互い連動しているのが分かるはずです。
そこで左画面の削除したい画像全体がうまくグレイ表示になっていたら、右画面のグレイ表示となっているコード部分を右クリック、メニューで「要素を削除」を選択します。
これで左画面の画像が削除されます。といっても、一時的に自分のブラウザー上で広告のコードと表示を削除しただけです。
そのため、Webページを「F5」キーなどで「再読み込み」すれば元の表示に戻せるので「要素を削除」しても問題ありません。
※ 直前の削除だけ取り消したいときは「Ctrl + Z」が使えます。
メニューから「要素を削除」ではなく「要素を非表示」を選択することもできます。
この場合、左画面で選択した部分に穴が開いたような表示になって、レイアウトはそのままとなります。
目的によって使い分ければいいでしょう。
右画面で「要素」のコード上をなぞるようにマウスポインターを移動させると、左画面のグレイ表示部分も連動して移動します。
どの範囲のコードがその範囲の表示に対応しているのか分かり、サイト作成の勉強にもなります。
削除や非表示だけでなく「テキストを編集」や「HTMLとして編集」もできます。
これで Webページの文章や画像も削除や変更できます。
たとえば「HTMLとして編集」で「なにしろパソコン」のロゴ画像のアドレスを20周年ロゴ画像のアドレスに書き換え「Enter」してみましょう。
すると左の画面表示でロゴ画像はこうなります。
このときも一時的に自分のブラウザー上で表示を編集しただけなので、実際の Webページを改ざんするわけではありません。個人で利用する範囲であれば何も問題ありません。
◆◇◆
当然、編集で内容を変更した Webページ画面をキャプチャーして SNS で公開するなど、間違った情報を広めるために利用してはいけません。
一方で Webページの表示は簡単に編集でき、悪用さえ可能なことを覚えておきましょう。
有名サイトに似せて本物らしい Webページを作成することは難しくなく、そのことを悪用した「フィッシング詐欺」が跡を絶ちません。
Webページに個人情報を入力する前など必ずアドレス確認をしましょう。
理解を深めるための「パソコン用語解説」
記事の情報は公開時あるいは更新時のもので、最新情報はリンク先など情報元の公式ページでご確認ください。
