トップ・サイドバーにあるアドセンス（広告）。ブログ画面のスクリーンショットを撮るときは消したい！またブログを読んでいるとき、チラチラ大きく動く画像を削除したい！
超簡単に消す方法です＾＾
パソコンでじっくりブログを読みたいとき該当部分を数秒で一時的に消せる、Chrome要素の検証機能をご紹介します♪
また初心者向けに該当の要素を見つけるのにピッタリなので、カスタマイズを始めたいなら参考にしてくださいね。
Chrome検証画面で、邪魔な広告・画像・要素を消す
要素の検証を使って、一時的に消すだけなので更新すれば表示されます。ブラウザにデフォルトで付いてる検証画面は、拡張機能（デベロッパーツール）なので、少しの操作で起動することが出来ます。
立ち上げ方は、Chromeのブラウザでは下記。
他ブラウザでは、下記リンクの目次：1を参考にしてください＾＾
- 『F12』キーをクリック
または
- Windowsの場合Ctrl＋Shift＋Cキーの同時押し
- Macのショートカットcontrol⌃＋option⌥＋Cキー
これで、画面右か、画面下に英語がたくさんある画面が出てきます。その画面の左上
要素の検証画面の矢印マーク（青色が消えている状態）
矢印マークが青くなってる状態で該当の部分にマウスを置いたり、クリックしたら、ブログの画面が青くなります。試しに今開いてください。
デベロッパーツールのスペースが狭い場合はElements（要素）：<html hoge><script hoge><div id=””>やなどと、変な文字が書いてあるスペースを右側へ、上の画像のように変な文字が少し見えるくらいに広げます。
- デベロッパーツールを消すときは画面右上の✖で消す
- 下にデベロッパーツールがあるとき
- 画面の境目を少し上に引き上げる。
これで準備はOK！気になる部分の削除法を見ていきましょう＾＾
該当の要素を削除する方法
PC画面で見てるなら、せっかくなので『黒い邪魔もの』を削除してみましょう！onマウスで暴れて可愛いですけどね＾＾
- 邪魔ものにマウスを置いて、クリック！
- BackSpaceキーかDeleteキーで削除
隙間が残ってるので、更に削除
検証画面には『邪魔もの』の囲んでた親分が残ってとき、隙間が生まれてます。もし気になるなら、親分も削除♪
親分ともに、削除された画像
上手くいけば親要素である、隙間の親分まで1度で削除完了します。これで、きれいさっぱり『邪魔もの』が消えてなくなります。開いているブラウザ上だけ削除したので、ブログの一部を完全に消し去るようなイタズラではありません＾＾
復活させたいときは、F5ボタンかブラウザの『更新ボタン』を1度押すだけで復活します。デベロッパーツールがいらないときは、右上の✖か、ブラウザを閉じると消えますよ！
気になる画像を削除する方法
動く画像がチラチラする時もおなじ方法で削除できます＾＾
- デベロッパーツールを開く
- 消したい画像をクリック
- ボタンキーで削除
該当の画像が消えた！
ブログのスクショを撮る時、広告を消してとりたいとき
ブログのスクリーンショットを撮りたいとき、一時的にアドセンスの広告を消した方がスマートです。サードバーにある広告も同様ですね。
広告の領域を選択！
この画像のように選択領域が大きく、ヘッダーまで削除しては意味がありません。その検証画面を見て、▼ボタンをクリックして、広告のみの領域を選択します。
▼ボタンをクリックして展開！
その中に広告の領域のみ、青くなる画面を見つけて、要素の検証の<div class”hoge”>文字をクリックして選択します。
領域が青く、またその周りがオレンジ色になった箇所が削除できる仕組みです。== $0これが出てる時にBackSpaceキーかDeleteキーを押したら、削除できます。
調子に乗って、サイドバーを消す
要素の領域の選択方法が解ってきたので、次はサイドバーを選択後削除することも可能になりますｗ
- サイドバーを選択
- 削除
サイドバーがなくなった
いきなりデッカクなっちゃった♥
これは、Gush4というブログのテーマで、スマホで見たときを基準に作ってるからでしょうね＾＾
LINKレスポンシブ対応！メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト！？
そのような形になるのが全てではないですよ♪
ヘッダーとフッターのみにしてみた！
上述のように削除していくと、ブログの顔と足元のみチェックすることができます。
こうして見るともっとバランスよく、カスタマイズできそうな気も…(*ﾉωﾉ)
カスタマイズの友として、要素の検証を使うのはムチャクチャ便利ですね！
さいごに
アレコレ書きましたけど、要素の検証はブログの初心者でカスタマイズ装飾を始めるにはピッタリです。この機能を使って遊んでいると、自分のブログの構造がだんだん理解できますよぉ。
実際にカスタマイズする様子は下記を。参考まで＾＾
このページを書くキッカケになったのはブログを見てるとき、楽しく面白い画像があったのです。
その本文中にある、コードを見てどんな風な装飾になるかなぁ…と頭フル回転してるとき、申し訳ないながら私の目に見えないよう……要は、思い付きで書きました❦
楽しいカスタマイズは程ほどにしないと、こうして削除しちゃう人もいますよ（笑
それでは…。かうたっくでした♪
Comments