【75日目】Googleアドセンスの自動広告がひどかった
Posted: Last Update:
3日前にGoogleアドセンスの審査に通過してから、Googleアドセンスを使い始めていました。1日目はアンカー広告しか表示されなかったので放置していたのですが、今朝何気なく見たら、文章の間に複数の広告が！それはもうひどい量が入っていました…。
Googleアドセンス自動広告がひどかった
Googleアドセンスの自動広告を入れて放置していました。最初はアンカー広告のみ表示されていたのですっかり油断していたんです。ところが、今朝なにげなくサイトを見に行ってびっくり！あそこにもここにも広告！文章の間に広告！広告だらけで本文が読めない状態になっていました…。スクショをとっておけば良かったです…。慌ててしまったので、そんな余裕もなく、自動広告をオフにしました。
取り急ぎ自動広告をOFFにして、カスタマイズ広告を入れました。しかし、こちらにも少し問題が…。と言うのも、広告は横幅100%で表示されます。他の設定を押しのけて100%で設定されるため、ページ自体の横幅が押し広げられてしまっています。今日はその問題を解決したいです。
Google広告ですが、ページの最下部と、横のナビゲーションバーに一つずつ入れたいと思います。あと、モバイルではページの最下部と横のナビゲーションバーがかなりスクロールしないと見えないので、アンカー広告を入れてもいいかな、と思っています。今日は取り急ぎ、ページの最下部と、横のナビゲーションバーに一つずつ入れ混んだ状態で、ページがきれいに表示されるように処理していきます。
まずは、テスト環境を作りました。
前の記事、次の記事へのリンク修正
Googleアドセンスとは関係がないのですが、以前から少し気になっていた「前の記事」「次の記事」へのリンクを修正したいと思います。今までCSSのfloatを使っていたのですが、文字数によっては表示崩れするときがあったんですよね…。
変更前
変更後
CSSはこのようにgridで設定してみました。
margin: 0 0 30px 0;
padding: 0 0.5em;
width: 100%;
font-size: 0.95em;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 30px;
}
#mainprelink{ *前の記事のリンク
padding: 0.5em;
box-shadow: 0 1px 3px grey;
}
#mainpostlink{ *次の記事のリンク
padding: 0.5em;
box-shadow: 0 1px 3px grey;
text-align: right;
}
メイン部分をgridに変更する
では、メイン部分の変更に取り掛かっていきます。今現在はflexを使って配置していますが、gridに変更します！
だいぶ時間がかかってしまいましたが、なんとかGoogle広告を他の横幅に影響しない所に出すことができました…。ふぅ。疲れた…。
必要な箇所だけご紹介すると、CSSはこんな感じになっています。とにかくマージンやパディングを取らないように苦心しました。
margin: 0 0 30px 0;
padding: 0;
display: grid;
row-gap: 30px;
column-gap: 50px;
justify-content: center;
}
@media screen and (max-width: 1260px){
#mainstyle{
grid-template-columns: 1;
grid-template-rows: 3;
}
}
@media screen and (min-width:1260px){
#mainstyle{
grid-template-columns: 900px 330px;
grid-template-rows: 2 1fr;
}
}
#articlestyle{
margin: 0 0 30px 0;
padding: 0 1em;
grid-row: 1;
grid-column: 1;
}
#adsence{
margin:0;
padding:0;
grid-row: 2;
grid-column: 1;
}
#asidestyle{
margin: 0;
padding: 0 1em;
}
@media screen and (max-width: 1260px){
#asidestyle{
grid-row: 3;
grid-column: 1;
}
}
@media screen and (min-width:1260px){
#asidestyle{
grid-row: 1/3;
grid-column: 2;
}
}
本番環境に移植
今回修正したのはCSSだけなので移植もちょっと楽です！物の1分で完了！
今日はちょっと疲れました…。姉妹サイトにtwitterカードを作りたかったのですが、また明日ですね。姉妹サイトの方も、Googleアドセンスに合わせて修正をしなければいけないし。
明日まとめてやりたいと思います！
おまけのロードマップ
サイト作成がどのくらい進んでいるかロードマップで進捗を確認すると、ここまで進んでいます。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする ←完了！
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
