Webページの一部だけ一時的に削除/非表示/編集する

質問Webページで広告など一部だけ一時的に削除や非表示ができますか?

回答「DevTools」を使えば選択した「要素」を削除/非表示できます。

ブラウザーの開発者ツール「DevTools」については解説しています。

この「DevTools」を使うと「検証」している Webページを構成している「要素」を一時的に削除したり非表示にすることができます。

Webページの印刷や画面キャプチャーをするときに、広告や著作権的に含めたくない画像を削除したいときなどに使えます。

 

手順は簡単で、削除したい部分、たとえば画像の上にマウスポインターを合わせ、右クリックしたメニューで「検証」を選択します。

例として「なにしろパソコン」のロゴ画像を使ってやってみます。

qa211021-02.png

 

すると画面右に「DevTools」が現れ、左画面で先ほど選択した画像部分と右画面の「要素」に表示されるソースコードの一部がグレイ表示されます。

qa211021-03.png

このグレイ部分がお互い連動しているのが分かるはずです。

 

そこで左画面の削除したい画像全体がうまくグレイ表示になっていたら、右画面のグレイ表示となっているコード部分を右クリック、メニューで「要素を削除」を選択します。

qa211021-04.png

 

これで左画面の画像が削除されます。といっても、一時的に自分のブラウザー上で広告のコードと表示を削除しただけです。

qa211021-05.png

そのため、Webページを「F5」キーなどで「再読み込み」すれば元の表示に戻せるので「要素を削除」しても問題ありません。

qa211021-06.png

※ 直前の削除だけ取り消したいときは「Ctrl + Z」が使えます。

 

メニューから「要素を削除」ではなく「要素を非表示」を選択することもできます。

qa211021-07.png

この場合、左画面で選択した部分に穴が開いたような表示になって、レイアウトはそのままとなります。

qa211021-08.png

目的によって使い分ければいいでしょう。

 

右画面で「要素」のコード上をなぞるようにマウスポインターを移動させると、左画面のグレイ表示部分も連動して移動します。

qa211021-09.png

どの範囲のコードがその範囲の表示に対応しているのか分かり、サイト作成の勉強にもなります。

 

削除や非表示だけでなく「テキストを編集」や「HTMLとして編集」もできます。

qa211021-10.png

これで Webページの文章や画像も削除や変更できます。

 

たとえば「HTMLとして編集」で「なにしろパソコン」のロゴ画像のアドレスを20周年ロゴ画像のアドレスに書き換え「Enter」してみましょう。

qa211021-11.png

すると左の画面表示でロゴ画像はこうなります。

qa211021-12.png

このときも一時的に自分のブラウザー上で表示を編集しただけなので、実際の Webページを改ざんするわけではありません。個人で利用する範囲であれば何も問題ありません。

 
◆◇◆

当然、編集で内容を変更した Webページ画面をキャプチャーして SNS で公開するなど、間違った情報を広めるために利用してはいけません。

一方で Webページの表示は簡単に編集でき、悪用さえ可能なことを覚えておきましょう。

有名サイトに似せて本物らしい Webページを作成することは難しくなく、そのことを悪用した「フィッシング詐欺」が跡を絶ちません。

Webページに個人情報を入力する前など必ずアドレス確認をしましょう。

 

理解を深めるための「パソコン用語解説

スポンサーリンク

ご意見&コメント

パソコントラブルQ&A」をご利用いただき、ありがとうございます。

「参考になった」「ちょっと違うかも?」というときは TwitterFacebookページを使ってご感想やコメントをいただけると嬉しいです!励みにもなりますし、必要に応じて情報の追加や修正もしてまいります。

 

こちらの記事もいかがですか?(一部広告含む)

関連した記事を検索

パソコントラブルQ&A」「パソコン用語解説」では関連Q&Aや用語解説を豊富に掲載中です。検索してみてください!

年別Q&A (1009 件)

編集長のプロフィール

編集長

:パソコン生活応援アドバイザー。「なにしろパソコン.com」サイト運営、メルマガ編集、セミナー講師からコラム・書籍執筆まで実績豊富!

「パソコントラブルQ&A」ではトラブル解決のヒントなども紹介していますが、解決をお約束するものではありません。 トラブルの深刻度やご利用のパソコン環境によっては効果がなかったり、ほかのトラブルを誘発する場合もあります。そのため、作業前に大切なデータは、ご自身で必ずバックアップをおこなってください。

本サイトを参考にしたパソコン設定、サイト閲覧、紹介したソフトウエアや機器の購入&使用、そしてトラブル対応やインターネット活用は『利用者の責任』でお願いします(免責事項)。