【ハミングバード】トップページ上部のスマホ用アドセンス広告をど真ん中に設置する方法

WordPress ハミングバード スマホ アドセンス 真ん中

こんにちは。にっしー(@prblggr)です。

ハミングバードのウィジットで「【トップページ】上部(mobile)」にスマホ用の広告(アドセンスなど)を設置すると、位置が中心からズレてしまいます。

わたしだけかもしれませんが、備忘録のために一連の作業を書きしるしておきます。

作業といってもコピペだけなので、書こうと思えば3行で終わるんですけどね(笑)

スマホの広告が真ん中に貼れない

ハミングバード アドセンス
いまスマホでにしむらぼのトップページをみていただくと、トップページのヘッダーの下にモバイル用の小さい広告が出ていると思います。

わたしが使っているWordPressテーマの「ハミングバード」では、ウィジットでこの位置に広告を貼ることができるんです。

ただし、そのまま広告を貼ると、なぜか真ん中に貼ることができません。

広告スペースの左上にズレた状態で表示されるんですよね。

centerタグを使えばとりあえず左右の調整はできるのですが、上下はズレたまま。

これ、実はハミングバード導入した当初から気になってて、でも広告も貼らないしずーっと放置してました。

でもしらべてみたら、意外と簡単に解決できることがわかりました。

ハミングバードでトップページ上部のスマホ広告を真ん中に表示する方法

今回は、こちらの記事を参考にさせていただきました。

【参考】画像やテキストを中央(上下左右真ん中)に配置する方法 | Webデザイン ABC

基本的には、記事どおりにCSSとHTMLを記述すればいいんですが、そのままだとちょっとズレてしまっていたので、そこだけ調整いたしました。

まずは、子テーマのCSSに以下のコードを記述します。

上の top の部分だけ変えてます。

ここがもともと50%なんですが、そのままだと真ん中にこないので80%に調整。

あとは、ウィジットに、

をコピペしたら完成です。

まとめ

今回は、ハミングバードのトップページ上部の広告を真ん中に調整する方法をご紹介しました。

わたしだけなのかな?ハミングバード使ってる方でおなじ症状の方がいたらぜひおしえてください!