PCビューでワンクリ削除!ブログで広告・画像の要素を発見する方法★要素の検証の使いかたの話

トップ・サイドバーにあるアドセンス(広告)。ブログ画面のスクリーンショットを撮るときは消したい!またブログを読んでいるとき、チラチラ大きく動く画像を削除したい!それが超簡単に、できる方法です^^

じっくりブログを読みたいとき、一時的に要素の検証を使えば、該当部分を数秒で削除できるので、ご紹介します♪

また初心者向けに該当の要素を見つけるのにピッタリなので、カスタマイズを始めたいなら参考にしてくださいね。

ブログ画面、ヘッダーとフッターのみ

スポンサーリンク

要素の検証を起動する

要素の検証は、デフォルトで付いてる拡張機能(デベロッパーツール)なので、少しの操作で起動することが出来ます。立ち上げ方は、Chromeのブラウザでは下記。

他ブラウザでは、下記リンクの目次:1を参考にしてください^^

LINK初心者が要素の検証でカスタマイズできる方法!HTMLとCSS入門編

  • 『F12』キーをクリック

または

  • Windowsの場合CtrlShiftCキーの同時押し
  • Macのショートカットcontrol⌃+option⌥+Cキー

これで、画面右か、画面下に英語がたくさんある画面が出てきます。その画面の左上

要素の検証画面の矢印マーク(青色が消えている状態)

矢印マークが青くなってる状態で該当の部分にマウスを置いたり、クリックしたら、ブログの画面が青くなります。試しに今開いてください。

デベロッパーツールのスペースが狭い場合はElements(要素):<html hoge><script hoge><div id=””>やなどと、変な文字が書いてあるスペースを右側へ、上の画像のように変な文字が少し見えるくらいに広げます。

デベロッパーツールの幅を広げる

  • デベロッパーツールを消すときは画面右上の✖で消す
  •  下にデベロッパーツールがあるとき
    • 画面の境目を少し上に引き上げる。

これで準備はOK!気になる部分の削除法を見ていきましょう^^

該当の要素を削除する方法

PC画面で見てるなら、せっかくなので『黒い邪魔もの』を削除してみましょう!onマウスで暴れて可愛いですけどね^^

邪魔ものだぁ~
  1. 邪魔ものにマウスを置いて、クリック!
    消したい要素をクリック
  2. BackSpaceキーかDeleteキーで削除
隙間が残ってるので、更に削除

隙間が残ってるので、更に削除

検証画面には『邪魔もの』の囲んでた親分が残ってとき、隙間が生まれてます。もし気になるなら、親分も削除♪

親分ともに、削除された画像

親分ともに、削除された画像

上手くいけば親要素である、隙間の親分まで1度で削除完了します。これで、きれいさっぱり『邪魔もの』が消えてなくなります。開いているブラウザ上だけ削除したので、ブログの一部を完全に消し去るようなイタズラではありません^^

復活させたいときは、F5ボタンかブラウザの『更新ボタン』を1度押すだけで復活します。デベロッパーツールがいらないときは、右上の✖か、ブラウザを閉じると消えますよ!

気になる画像を削除する方法

動く画像がチラチラする時もおなじ方法で削除できます^^

  1. デベロッパーツールを開く
  2. 消したい画像をクリック
    該当の画像をクリック
  3. ボタンキーで削除

    該当の画像が消えた!

    該当の画像が消えた!

ブログのスクショを撮る時、広告を消してとりたいとき

ブログのスクリーンショットを撮りたいとき、一時的にアドセンスの広告を消した方がスマートです。サードバーにある広告も同様ですね。

広告の領域を選択!

トップ画面にある広告の領域を選ぶ

この画像のように選択領域が大きく、ヘッダーまで削除しては意味がありません。その検証画面を見て、▼ボタンをクリックして、広告のみの領域を選択します。

▼ボタンをクリックして展開!

▼ボタンをクリックして展開!

その中に広告の領域のみ、青くなる画面を見つけて、要素の検証の<div class”hoge”>文字をクリックして選択します。

要素の▼を押し経画面と、選択されたその要素

領域が青く、またその周りがオレンジ色になった箇所が削除できる仕組みです。== $0これが出てる時にBackSpaceキーかDeleteキーを押したら、削除できます。

調子に乗って、サイドバーを消す

要素の領域の選択方法が解ってきたので、次はサイドバーを選択後削除することも可能になりますw

  1. サイドバーを選択
    要素の検証でサイドバーを選択
  2. 削除

    サイドバーがなくなった

    サイドバーがなくなった

いきなりデッカクなっちゃった♥

これは、Gush4というブログのテーマで、スマホで見たときを基準に作ってるからでしょうね^^

LINKレスポンシブ対応!メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト!?

そのような形になるのが全てではないですよ♪

ヘッダーとフッターのみにしてみた!

上述のように削除していくと、ブログの顔と足元のみチェックすることができます。

ブログ画面、ヘッダーとフッターのみ

こうして見るともっとバランスよく、カスタマイズできそうな気も…(*ノωノ)

カスタマイズの友として、要素の検証を使うのはムチャクチャ便利ですね!

さいごに

アレコレ書きましたけど、要素の検証はブログの初心者でカスタマイズ装飾を始めるにはピッタリです。この機能を使って遊んでいると、自分のブログの構造がだんだん理解できますよぉ。

実際にカスタマイズする様子は下記を。参考まで^^

LINK超時短!!ブログのテーマカラー、背景色やボーダーを一気に変更する方法 #gush4

このページを書くキッカケになったのはブログを見てるとき、楽しく面白い画像があったのです。

その本文中にある、コードを見てどんな風な装飾になるかなぁ…と頭フル回転してるとき、申し訳ないながら私の目に見えないよう……要は、思い付きで書きました❦

楽しいカスタマイズは程ほどにしないと、こうして削除しちゃう人もいますよ(笑

それでは…。かうたっくでした♪

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー