【初心者向け】購入したWordPressのモバイルテーマでAdsenseがズレるときの対処法

SPONSORED LINK

WPモバイルTheme Adsense

WEB制作に関わっていない方でもWordPressを使ってブログを運営されている方は多いと思います。そういった方はTheme(テーマ)の購入が便利なんですが。

WordPressのモバイルテーマで左右に空白を作って見やすくしているデザインの場合、Adsenseのモバイルバナーをそのまま貼り付けると当然ながら幅が合いません。そうなると上記の画像のように右にずれてしまうわけです。

こんな悩みを持つ方に初心者向けですが対処法を書いておきます。


class要素で簡単修正

CSSなんて解んねぇ〜って思われるかもしれませんが、殆どの方がそうなので安心して下さい。悩んだらググって解決!これでOK。

実際修正に関しては幾つか方法があるのですが、Adsense用のclassを作って対処しましょう。今回はウィジェットのテキストを使ってAdsenseを設置していますが、直接書き込む際にも同じだと思って下さい。

Wptheme CSS

画像はAdsenseのコードを直接貼り付けたものです。この状態だとAdsenseは右にズレてしまうわけです。そこでコードに少し細工(追加)をします。

Wptheme class要素

<div class=“mbadsense”>Adsenseコード</div>

この中の”mbadsense”の部分は自分の好きな名前でいいですが、解りやすいものがいいと思います。

勿論これだけでは直りません。このclassにcssを追加して表示を直します。

CSSの追加

CSSの追加は「外観」⇒「テーマ編集」⇒「スタイルシート」で開かれた『.css』ファイルの一番下に追加すればOKなんですが、購入したテーマによってはスタイルシートを追加する場所が設けられているかもしれません。

(例)DigiPressのテーマの場合

DigiPress WPTheme CSS追加

DigiPressメニューのビジュアル設定から『オリジナルスタイルシート設定』を選びます。

CSS追加

ここに先ほどのclass名で余白部分だけを戻してやります。

.mbadsense{
margin-left: -10px;
}

大抵のテーマが余白を10pxとっているのでその分を左に寄せることでAdsenseをちゃんと表示させるわけですね。

そして対処後の表示結果がこちら

WPモバイルテーマ Adsense

先程はズレていたモバイル用のAdsenseがiPhoneで320pxピッタリで収まっていますね。

まぁ超基本的な方法なんですが、先日ちょうど自分が修正した際に全くの初心者の時はこんな事もググったなぁと思い記事にしてみました。テーマを購入したものの表示で困っている方もいるかもしれないので参考になれば幸いです。

もしあなたがこの記事に共感を持ったら「シェア」してくれると嬉しいです。 @dnc_akiraでした。

SPONSORED LINK

記事を書いている人

akira味浪 照(AKIRA MINAMI)
香川在住のApple製品に魅せられた「にわかApple信者」インドネシア人の妻を持つ2児のパパ。将来インドネシアに移住しスローライフを夢見ています。 自営業になり時間管理・仕事効率化を考え実践しています。りんご人ではAppleガジェットを使ったライフハックな記事をメインで書いています。
つぶやきは少なめですが@付きやDMには反応します。気軽に声かけて下さい。bot以外は基本的にフォロー返します。
Google+からも連絡を受けています。仕事での利用が多いのですが、全然話しかけて頂いてOKです。フレンドリーな方大歓迎
ブログの更新情報取得にRSSが便利です。Feedlyをご利用の方は上部のfeedlyアイコンを利用して下さい。