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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あとは、ウィジットに、

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

まとめ

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

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

ABOUTこの記事をかいた人

ニシムラ・ケイイチ

ブロガー。1985年鹿児島生まれ。立教大(文)中退。2016年9月よりブログ「古風礼賛」を運営(3万PV/月)。ブログでは好きな本や映画、グルメなどを中心に紹介しています。書評や飲食店のインタビュー取材、雑誌・Webメディアでの執筆などお気軽にご相談ください。 ⇒ お問い合わせ