ふくさぎの知恵

過去の自分を踏み台にして前に進むためのブログ

【無料はてなブロガー向け】広告をCSSで非表示にする。BANなるかも...

ふくさぎのアイコン画像ふくさぎ

無料版はてなブログの広告をスマホ含めて非表示にします。公式からBANくらう可能性有り!

はてなブログの広告を非表示にするCSS

PC版の広告を全て非表示↓↓

.ad,
.ad-online-afc,
.imageholder,
.entry-footer-ad,
.google-afc-image,
.test-google-rectangle-ads,
#footer-ad-rectangle,
.footer-ad{display: none !important;}

スマホ版の広告を全て非表示↓↓

.ad,
.ad-online-afc,
.adx-responsive-mode{
height: 0 !important;
visibility: hidden !important;
}

※テーマは「Smooth」のみ確認済み

※また、レシポンシブデザイン設定がオンになっている前提です

【解説】

PC版のアドセンス広告は要素のClassにdisplay: noneの宣言を足せば非表示にできます

スマホ版はdisplay: noneが無効化されているので、同じ宣言では非表示になりません

visibility: hiddenを宣言して要素を不可視化した後に、height: 0で空いたスペースを閉じてしまいましょう

ちなみに、スマホ版のHTMLコードの確認方は下記にあります↓↓

hukusagi.hatenablog.com

BANされる可能性

無料版はてなブログの広告をCSSで非表示にしてはいけないと言う定めはありません(多分グレーです)

【はてな公式】広告を非表示にしたいヘルプ画面の画像
はてな公式】広告を非表示にしたいヘルプ画面

広告を非表示にするには、ブログProにお申し込みいただいた上で、さらに広告を非表示にする設定を行っていただく必要がございます。
参照:はてなヘルプ

なので、無料版なのに広告が付いてない風に見えるはてなブログを時々見かけたりします

しかし、スマホ版は明らかに広告がCSSで非表示されにくく設定されています

web検索はスマホユーザーの需要が圧倒的に高いため、PC側の広告非表示は許すけどスマホは許さない的な意図を感じさせます

スマホ版の広告非表示はBANされる可能性が高く予想できますので注意しましょう

広告を非表示にするメリット

まず1つ目に、広告を非表示にすることでブログのデザインが引き立ちます

せっかく頑張って作ったwebページも、広告一つで統一感を失ってしまうことがありますからね。その点大きなメリットと言えるでしょう

2つ目に、ユーザーからの印象が良くなります

広告が張られているだけで、「このサイトはお金目的だ!」と疑ってよく思わない人もいます

無料版はてなブログは強制的に広告が表示されてしまい、またブログを見に来たユーザーはそんな事情を知りません。なので勝手に誤解される恐れがあります

非表示にできるのであれば、やっておいて損はないでしょう

広告をCSSで非表示にする注意点

アドセンス広告は非常に重くページの表示速度を低下させます

そのためCSSで非表示にしてしまえば、それが改善できると思いガチです

しかし、残念ながらそんなことはありません...

あくまで画面上は非表示にしているだけなので、webページを開いた際にしっかりデータとして読み込まれています

なので、この方法ではページ速度の改善には全く繋がりません

素直に有料版を登録して広告をOFFに切り替えましょう

1UP♪