のんびりよりみちきっぷ

考えた事や実施したことをのんびりと。

はてなブログ スマホで記事部分が左右にずれる対処

スポンサーリンク

こんにちは。

 

最近気が付いたんですが、スマホで自分のブログにアクセスして記事を見ていると、スクロール中に微妙に左右にずれてしまうことがわかりました。

 

ほんの数mmです。

下に読み進めようとしても、途中で微妙に左右に動いてうまく読み進められません。

 

これでは読みにくいだろうということで修正しました。

 

概略

下の画像のように記事の部分だけが横に動きます。

f:id:yorimichi_ticket:20170816063557p:plain

 

修正箇所

このブログでは、「デザイン」→「スマートフォン」→「記事」→「記事上」にスタイルを記述しているのでそこを変更しました。

f:id:yorimichi_ticket:20170816063210p:plain

 

修正内容

<style></style>の中に以下を追加しました。

.entry-content {
    overflow-x: hidden;
}

 

デザイン設定で「記事のプレビュー」からGoogle Chromeの機能である検証モード(デベロッパーツール)を使って試したところうまくいきました。

 

結果

3行の追加ですがこれで直りました。

おそらく記事自体が画面に収まっていないために起きているんだと思います。

根本的な解決にはなっていませんが、とりあえずは直ったのでこれでOKとします。