キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

STINGER5 にアドセンスを入れると、スマホのみ右に寄ってしまう現象の応急処置

   

旅ブログ移行中のキャリコ( @calicocatxyz )です。

約400ページもあったのにほぼ移行が完了しました。ブログ記事は300ページ強くらいでしたがインポート&エクスポート機能に助けられましたね。あとは細かいデザインのみということで… 今回はキャリコでも旅ブログでもつまづいたことです。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

今日までにいくつかアドセンス記事を書いてきたけど、スマホの最適化もわかったところでアドセンスを設置したにゃ。

でもモバイルバナー(320×50)をトップページに配置すると、どうしても右にずれてしまうにゃ。今日はその解決方法にゃ。

Ads by Google

スマホでアドセンスを中央表示させる

レクタングル(中)(300×250)は先日のエントリーで中央寄せに出来たにゃ。

このときは「 #wrapper 」の指定を「 padding: 0; 」に変えたら中央寄せになったにゃ。でも今回のサイズはモバイルバナー(320×50)ということで横幅が 20px 大きいにゃ。

左に寄せて解決させる

レクタングル(中)(300×250)を中央寄せにして左右に 10px ずつの余白があるということは、その分を利用して横幅ぴったりにすれば 320px に収まるということにゃ。

っということで、左に -10px 寄せて強引に解決させたにゃ。手持ちの iPod touch では綺麗に表示されてるけど、ほかのデバイスで見たときにどう表示されてるのか気になるにゃ…

まとめ

もっとスマートな解決方法があると思うけど、キャリコでは応急処置だけしたにゃ。こうするとどのデバイスでも綺麗に中央に表示されるよっていうのがあれば、コメント欄にて教えてほしいにゃ!

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - STINGER5

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

STINGER5 の h3 タグにアイコンを付けて、h4 タグに背景を指定する

○○する方法しかネタがないキャリコ( @calicocatxyz )です。 っと …

STINGER5 の新着記事をトップページだけ非表示にする方法

イギリスの寒さが厳しくなってきました、キャリコ( @calicocatxyz ) …

STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法
STINGER5 の記事公開日の後ろに「 あとで読む 」の Pocket リンクを挿入する方法

体重がどんどん落ちていく、キャリコ( @calicocatxyz )です。 何も …

Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと
Stinger5 for Ladys のダウンロード数と採用サイトを調べてわかったこと

決して暇人ではない、キャリコ( @calicocatxyz )です。 新しいブロ …

ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ
ファビコンがオリジナル画像で作れるアイコン作成サイトまとめ

最近どうやら欲求不満なキャリコ( @calicocatxyz )です。 見た夢を …

キャリコの誰にも気づかれない3つの自己満足カスタマイズ
キャリコの誰にも気づかれない3つの自己満足カスタマイズ

STINGER5 のカスタマイズも終わって手持無沙汰のキャリコ( @calico …

header.php を子テーマに作ってファビコンをオリジナル画像に設定する

絶賛入院中のキャリコ( @calicocatxyz )です。 入院中の何がイヤっ …

STINGER5 の誰にも気づかれない自己満足カスタマイズ

Hello, キャリコ( @calicocatxyz )です。 そろそろ STI …

ファビコンを設定したならアップルタッチアイコンも作ろう

iPhone の Safari に自分のブログをブックマークしたキャリコ( @c …

STINGER5 で各 SNS のフォローボタンを美しく綺麗に配置する方法

Instagram デビュー迷い中のキャリコ( @calicocatxyz )で …