「Gush2」初心者によるカスタマイズ④:アドセンス入れるとスマホでレイアウトが崩れる

 

シェアしていただけると嬉しいです。
はてブ  Pocket 

Gush2 の初心者カスタマイズも4回目。前回までで非常にスッキリした見た目になりました。

参考までに過去記事一覧どぞ。

ワードプレス無料テーマ「Gush2」の初心者によるカスタマイズ①
「Gush2」初心者によるカスタマイズ②:ロゴを画像化してファビコン差し替え
「Gush2」初心者によるカスタマイズ③:背景テクスチャ削除とカラー変更

ではまいりましょうか。

スポンサーリンク

Google Adsense を表示させる

前回までである程度形はできた感もありますが、実はまったく手を付けていない部分があります。それが当ブログの大事な収益源(の予定w)であるグーグルアドセンスの配置。

ただテーマを入れ替えただけではうまく表示されない

前回の終わりの段階での、トップの部分を拡大してみます。

gush2_140908_3-1

あいやー。

本来はここに 728px 幅のアドセンスが表示されるべきですが、前のテーマのウィジェットに入れていた 300px のアドセンスが表示されちゃっています。

これはすぐに直しましょうね。

アドセンス配置はウィジェット見れば一目瞭然

管理画面にて、外観→ウィジェットの順に確認してみましょう。

ウィジェット

私がグーグルアドセンス広告を入れているのは、上記の枠で囲った部分になります。

Gush2 サイトにも書いてありますが、「サイド広告」部分にもしも広告を出したいなら、グーグルアドセンス以外にしておきましょう。もしも404ページが表示された場合、内容が無いページに広告が表示されちゃうことになってしまうので。念のため。

ちなみに当ブログではグーグルアドセンス以外の部分は Pitta を使用しています。

はい、簡単でしたね。以上終了。

え!なんでスマホだとレイアウトが崩れちゃうの!?

ところが。気づかず乱暴に進めてしまうと、スマホで見た際にガキガキにレイアウトが崩れてしまうポイントがあります。

これは不具合でも何でもなく、ちゃんと確認しながら進めなかった私のせい。もしかしたら同じようにアワアワしてしまう方もいらっしゃるかもしれないので、そうなった場合の解決法を記します。

Gush2 は「レスポンシブ」ですよ~

そう、そうなんです。これがすっかり頭から抜けておりました。

私ウィジェットの「728px」だけが目に入っていたので、広告ユニットを作る際に迷わずにコレを選択していました。

adsense_1

これこれ。

これを入れると・・・当たり前ですがスマホで見ても 728px の広告が表示されるので、レイアウト崩れまくり。そりゃそうだっつーの。

レスポンシブの広告ユニットをチョイス

これを回避するのは簡単。そう、広告ユニットをレスポンシブにすれば良い話。

adsense_2

広告デザインは一択になるので迷うこともありません。あとは普通に広告ユニットを作成して、それをウィジェットに入れるだけです。

こう書くとすごく簡単な話なんですが、私しゃここでずいぶん悩みました。一体何が悪かったんだろう?と、一度入れたテーマをすべて削除 → 再インストール → 再び一つ一つカスタマイズ → ・・・「これかぁ!!」でしたw 自分の早とちり以外の何者でも無く恥ずかしい限り。

スポンサーリンク

今回のビフォーアフター

Before

gush2_140908_3

After(アドセンス広告最適化)

gush2_140908_4

む!分かりづらいw 拡大します。

adsense_3

きれいに収まるようになりました。スマホで見てもバッチリ!

さてこれでカスタマイズも4回目が終了。大枠としては一応できあがったかな?と思います。以降は細かな部分の調整がメインとなっていく予定でございます。

では再見。

スポンサーリンク

この記事へのコメントはこちら

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となりますので、必ずご記入をお願いします。

内容に問題なければ、下記の「コメント送信」ボタンを押してください。