はてなブログProに課金して、失敗だと感じた４つの点 - Mokosoft開発者ブログ
上記エントリ他、はてなブログProはしょぼいという内容をたくさん見ていたのですが、あえてProにしてみました。1年契約です。
きっかけはAdsenseです。サイドバーにAdsense設置後初めてこの記事「鳴かず飛ばずのエントリを増田が改変した結果ｗｗｗ
サイドバーにしか広告置いてない
→モバイルはサイドバー表示されない
→やっぱ記事中に書かないとダメ
→モバイルで記事中に広告置くにはProじゃないとダメ
→契約
ちなみに、「モバイルで記事中に広告置くにはProじゃないとダメ」は勘違いでした。モバイルのフッタ(すべてのページ下部に表示される共通部分)のカスタマイズはProじゃないとダメですが、記事の上下に特定HTMLを差し込むのは無課金版でもできたみたいです。はやくも＼(^o^)／ｵﾜﾀ
スマートフォン横スクロールガクガク問題への対処
【重要】横ガク問題に関心がある方は、ここに記載した内容をさらにブラッシュアップした以下の決定版をお読みください。
スマホで320pxのAdsenseとlinkwithinがはみ出る問題の対処決定版(2014/8版)
さて、モバイル版にAdsenseを表示する際に、横幅320pxのバナーを表示すると、微妙にバナーがはみ出るという、通称「スマートフォン横スクロールガクガク問題」が発生するそうです。
この解決策をいくつかググったのですが、一番役に立ったのはこれ。
Google Adsenseのレスポンシブ広告ユニットの設定とiPhoneでモバイル広告の位置がズレてしまうのを防ぐCSS | web sign*
これは一般のブログエントリにレスポンシブバナーを投入する際のやり方なので、一応、はてなブログで、モバイルの記事下にのみAdsenseを入れるやり方を書いときます。2箇所修正します。
ダッシュボード→デザイン→モバイルマークのタブ→記事→記事上下のカスタマイズ→記事下
<div class="mobile-adsense">
adsenseの貼り付け用コード
</div>
ダッシュボード→設定→詳細設定→headに要素を追加
<style>
.mobile-adsense {
position: relative;
left: -10px;
width: 320px;
}
@media screen and (min-width: 321px) {
.mobile-adsense {
position: initial;
width: initial;
}
}
</style>
基本的にはモバイル版はコンテンツの様々なところにmargin:10pxがついてるようなので、left:-10pxでずらしてあげればぴったりくるのは道理ですね。モバイル版の動作確認はChromeならデベロッパツールでできます。(上記ブログのスクリーンショットでpx調べてるのもこれですね)
Chromeデベロッパーツールでモバイルをエミュレートする | Web Tips
めんどくさいので文中に(コード直書きで)Adsense置くことは考えていないのですが、それをやる場合も、レスポンシブバナーコードでほぼ同様(div囲みで)にやればうまくいくのではないでしょうか。
なにはともあれ、今日からわたしのことはプロブロガーと呼んでください。かしこ
いやーしかし本当にしょぼいなはてなブログProはw
— りんご4個分 (@uxlayman) 2014年8月1日
