Lab21年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったものを紹介するブログです。はてなブログはてなブログはスマホ表示の記事部分がデフォルトで横幅300pxになっています。AdSenseの広告はスマホ用というと横幅320pxしか用意されていないので、そのまま使うとハミ出します。その弊害で、スマホで見ると横スクロールが発生して上下のスクロール中にガタガタ動いてしまうんですね。はてなブログにアドセンスを普通に貼ろうとしたことがあるなら分かると思います。アドセンスの広告は規約で勝手にサイズを変更してはいけないので、ブログ側を合わせてあげましょう。ラージモバイルバナーを記事上にデフォルトのまま貼ると、右側がハミ出してしっくりきません。ハミ出したせいで横スクロールが発生して、上下のスクロール中に指を横にスライドしてしまうとガタガタ動いてしまいます。[headに要素を追加]に下記のcssを貼り付けます。:first-child{margin-top:2px;}/*記事最初の要素のmargin-top解除*/</style>上記を貼り付けると...このように、広告の幅が横幅ピッタリになります。あとがき貼っている広告はレスポンシブ広告ユニットで、PCブラウザでは「468×60px」を表示。スマホでは「320×100px」が表示されるように設定しています。このままだとPCの表示サイズが合っていなくて中途半端なので、時間がある時に728×90pxに合うように記事部分の幅を広げるか、記事上の広告自体をやめるか考えようと思います。ちなみに、記事を書いてる最中に気づきましたが、5月13日にはてなブログのスマホ表示が変更されましたね!一番上にダッシュボードへのリンクが表示されて、アイコンが表示されるようになっています。上のCSSではダッシュボードへのリンクだけ消しました。アイコンも消したい方は、下記の記事を参考にさせてもらいましょう。MoneyReport書いてあるまま適用すると横幅300のはてなブログスマホ表示に対して、320の広告なので横スクロールが発生してガクガク問題が発生します。スマホ表示を320pxに合わせてからやればこれもいいかも。ぼくはまちちゃん!(Hatena)これはアドセンス規約に違反するので、アボセンスされたくなければやっちゃダメ。最終的にはこの方法を少しイジって適用。320pxでもガクガクにナラないように、スマホ表示自体を320pxに合わせる。き合理化幻想レスポンシブ広告を使って、スマホ表示は320×100のサイズをタイトル下(記事上)に表示させた。20:41はてなブログのスマートフォン表示で、記事上のアドセンスをガタガタさせずに綺麗に設置する関連記事2015-02-17ブログは更新しないで放っておくとどうなるのか。3年運営91記事1年放置の場合ブログを更新しないで放っておくと、アクセスはどうなるのでし...2014-11-01コピペでOK!はてなブログのカエレバをcssでカスタマイズするはてなブログはAmazonにある商品ならブラウザの移動などしなく...2014-10-14みんなまだ意外とやってないブログの見せ方。Simpl...最近はスマホ用に対応しているWebサイトが主流です。検索プロフィールakiueoはてなブログPro1年のうち250日は夕飯を作る主夫が、iPhoneや料理、気になったWebサービスなどに焦点を当てるマイペースなブログです。あいうえおラボ文章、画像等を含む、すべての著作物の盗用&不正利用を禁止します。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。