記事直下のアドセンスをレスポンシブに！さらに"関連記事"もあわせて設置してみた。

記事直下のアドセンスをレスポンシブに！

先日のサイトスコアを受けて、すこしずつ改善に取り組んでます。

今日の作業はスコアに直結するかは微妙ですが、記事直下に設置してあるアドセンス広告の見た目改善をしていきます。

今回作業前の、当ブログの広告サイズ↓

とりあえず貼り付けました感丸出し！！

はみ出してるしサイズの統一感ないしで見栄え悪いですねw

これを、レスポンシブ対応にカスタマイズしていきます。

参考にさせて頂いたのはこちら↓

こちらの方法を利用させてもらい、HTML/CSSを貼り付け作業しました！

（やっぱりコピペ）

すると

こんな感じになりました！

こういうの考えられる人は、出来ない側からの私からしてみたらホント尊敬します。

とりあえず、ひとまずアドセンス広告はこれでok。

2017 6.8追記

AdSenseの右側がfloat解除されていないのでコメント欄がおかしいです。

とのご指摘を受けまして一部コードを修正しました。

詳細は下記リンクをご覧ください。

で、このアドセンス広告下に関連記事を持ってきたいので、さらにひと手間。

"右側のアドセンスを貼り付ける部分"の下にある</div></div>の間に関連記事のソースを貼ります。

</div>
<!--関連記事-->
</div>
<!-- 記事本文のすぐ下に移動～(省略)-->

こんな感じ。

これで↓

できましたー＼(^o^)／