252webB

雑用エンジニアによる技術ブログ

はてなブログをスマホで見たときの横揺れ、横スクロールを防ぎたい

はてなブログを再開したはいいが(厳密に言うと前ははてなダイアリーだったので初めてですが)、スマホで見たときに本文の横揺れ、横スクロールが発生してしまう。

overflow-xをいじってる人が多かったのですが、納得いかなかったので、なんでだろう、と思ってデベロッパーツールで調べてみること小一時間。

解決方法を見つけました。

レスポンシブモードに変更

ダッシュボード→デザイン→スマートフォン→高度な設定→詳細設定→レスポンシブデザインをオンにします。

CSSを設定

ダッシュボード→デザイン→カスタマイズ→高度な設定→デザインCSSに追記します。

@media screen and (max-width: 767px) {
  .entry-footer-ad { 
    margin-left: auto;
    margin-right: auto;
  }
}

広告部分のCSSをいじるということはもしかしたら禁止事項かもしれないのでオススメはしませんが、僕の場合はこれで直りました。

もし試してみた人いたら教えてくださいね。