1. Web広告の表示を削除してからスクショを撮る
Updated
2021/8/8 8:10
Author
Jumpei IkegamiあるWebサイトのスクリーンショット（スクショ）を撮るとき、広告が邪魔だなと思うことがあります。もちろん、そのWebサイトは広告収入を得ているので、こっちの都合で広告自体の表示を止めてもらうわけにはいきません。しかし、自分のブラウザ上だけであれば、実は簡単に表示された広告を削除することができます。
この一連のチュートリアルでは、「スクショのために一時的にWebサイトの表示を操作する」というテーマでいくつかの例を示しながら、Webブラウザのデベロッパーツールの使い方に慣れていきましょう。なお、WebブラウザにPC版のGoogle Chromeを使っている想定で説明していきます。他の主要なブラウザであっても同様のことができます。
前提知識
このチュートリアルでは既存のWebサイトのHTMLを書き換えるので、HTMLについて知っていると内容が理解しやすいです。
HTMLに不慣れな人は、不明点が出てくる度にリファレンスに軽く目を通すことをおすすめします。
HTML2021/6/20 6:072021/6/20 7:19
作るもの
次の画像にあるような、スクショを撮るときに消したくなる広告枠を、一時的に削除してみます。
↑Yahoo! JAPANの広告枠
↑YouTubeの広告枠
体験すること
このチュートリアルによって、以下を体験します。
- ある要素のHTML上での位置を特定する
- 特定したHTMLタグを削除する
- 本当に削除すべき親要素を探索する
チュートリアルスタート！
ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。
ある要素のHTML上での位置を特定する
↑Yahoo! JAPANの広告枠（再掲）
たとえばYahoo! JAPANのトップページのスクショを撮りたいとき、「広告消したいなあ」と感じるはずです。特に行動履歴を元にパーソナライズされている広告枠の場合は、自分がどんな商品に興味を持っているかがスクショからバレてしまい少し恥ずかしいです。（ちなみに、上記の画像はシークレットウィンドウで開いているので、私がバイナリー・オプションに興味を持っているわけでは決してありません。）
自分のブラウザ上だけの話に限れば、実は表示されたWebページは自由に書き換えることができます。自分の手元にあるHTMLを書き換えるだけなので、サイト運営者や他のユーザーに影響を与えることはありません。
ある要素を操作するには、HTML上でその要素がどこにあるのかを特定する必要があります。もちろんHTMLを上から読んで対応する場所を探すことはできますが、複雑でコンテンツの多いサイトの場合はかなり厳しいです。
便利なことに、ブラウザにはページ上の表示要素からHTML上での位置を特定するための機能があります。さっそく使ってみましょう。まずは、Yahoo! JAPANの広告を右クリックします。出てきたメニューの中から、「検証」を選択します。
すると、ChromeデベロッパーツールのElementsというタブが自動で開きます。ここには、現在のWebページを構成するHTMLが表示されます。青くハイライトされている要素が、たった今「右クリック > 検証」をした要素に対応するHTMLタグです。
「検証」以外にも、Googleデベロッパーツールの左上の矢印マークをクリックすることで「要素選択モード」をONにすることができます。
↑「要素選択モード」ボタン
要素選択モードがONの状態でページ上の特定したい要素をhoverすると、その要素に関する情報を表示してくれます。そのまま要素をクリックすると、「検証」をしたのと同じようにElementsタブの中で対応するHTMLタグがハイライトされます。
ちなみに、Googleデベロッパーツールの表示位置は、「右、下、左、別ウィンドウ」の4つから選択することができます。変更する場合は、デベロッパーツール右上の「...」マークのDock Sideを変更してください。
↑デベロッパーツールの表示位置を変更
HTMLから特定の要素を削除する
広告に対応する要素が特定できたら、あとは削除するだけです。削除の操作は非常に直感的で、Elementsタブで要素がハイライトされている状態でBack Spaceキー（Windows）やdeleteキー（Mac）を押すだけです。
たとえば、右クリックから「検証」を選んで、次の画像のように広告に対応するimgタグがハイライトされている状態を作ります。
ここでBack Spaceキーやdeleteキーを押すと、HTMLからその要素が消えます。
↑広告が消された状態のYahoo!トップ
消したい要素をとても簡単に削除することができました。
本当に消すべき要素を特定する
簡単すぎたので、別のサイトでも同じことを試してみましょう。今度は、YouTubeの動画再生ページの下に表示される広告を削除してみます。（YouTubeプレミアムに加入していて広告が表示されない場合は、シークレットウィンドウで開いてください。）
ちなみに、上のスクショのようにPCでもスマホサイトを表示したい場合、Chromeデベロッパーツールの左上にあるデバイスマークをクリックします。
↑「スマホ表示」ボタン
さて、先ほどと同様に、広告画像を右クリックしたときのメニューにある「検証」からHTMLタグを特定します。そのままその要素を削除してみましょう。
これでOKかと思いきや、なんと画像だけが消えて周りの枠は残ってしまいました。これでは広告表示を削除できたとは言えません。
ここで、HTMLの仕様に思いを馳せましょう。HTMLのタグは、入れ子構造になっています。「検証」などを使って要素を特定しても、特定したその要素が末端の要素である場合、本当に消すべきはさらにその要素を含む親要素であることがよくあります。その場合、末端の要素を削除しただけでは期待した通りの削除は実現できません。
そんなときは、Elementsタブを上にスクロールして、本当はどの要素を削除すればいいかを確かめていきます。実は、Webページの表示要素からそれに対応するHTMLタグを特定できたのと同じように、Elementsタブに並ぶそれぞれのHTMLタグをhoverすると対応する表示要素がハイライトされます。
ElementsタブのHTMLの中でマウスカーソルを上に移動させ、広告画像に対応する要素から少しずつ親の要素にさかのぼっていき、hoverしたときにハイライトされる表示要素が消したい領域全てに一致するようなHTMLタグを探します。削除すべき要素が見つかったら、実際に削除してみましょう。うまくいくと、次の画像のように広告領域全体を削除することができます。
↑広告が消された状態のYouTube
なお、「検証」ではなく前述した「要素選択モード」を使ってWebページの色んな場所をグリグリとhoverしてみると、削除すべき要素を一発で特定できることもあります。それぞれの要素がどこまでの表示領域を含んでいるのかがすぐに分かるので、慣れてきたら「検証」ではなく「要素選択モード」を使うことをおすすめします。
ちなみに、残念ながら一度削除した要素はページを再読み込みすると復活してしまいます。
以上で、今回のチュートリアルは終了です。Webページのスクショを撮るときに邪魔な要素がある場合は、後から画像を加工するのではなく、ぜひChromeデベロッパーツールを使った削除をぜひ試してみてください。