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

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

こんにちは。ニシムラ・ケイイチ(@prblggr)です。

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

おなじトラブルが起きてしまったときのために、修正の方法を書きのこしておきます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

あとは、ウィジットに、

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

まとめ

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

広告っていかにナチュナルに見せるかが大事なので、位置がズレていたりすると気持ちわるく感じてしまう人もいるんですよね。

この微妙な差が収益に影響するのかは不明ですが、スッキリしました!

この記事を読んだ人はこんな記事も読んでいます

無敵のワードプレス有料テーマ!ハミングバードが超人気な5つの理由

2016.11.01

ABOUTこの記事をかいた人

ニシムラ・ケイイチ

ブロガー | フリーライター | アフィリエイター | インフラエンジニア | 記事制作の得意ジャンルは「IT/マネー/グルメ/旅行/歴史・文化/書評/映画」| 個人ブログ:3.1万PV/月 | ASランク:ゴールド | 九州出身 | 立教大学中退 | twitter:@nissy421