スマホで画面がはみ出る問題解決方法

自分のブログをスマホで確認すると、記事に横スクロールバーが出てしまう……そんな画面が横にはみ出る問題が起こっていないでしょうか？

本記事ではその問題をCSSの追加で解決する方法を解説します。

CSSの追加方法

左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。

そこから【詳細設定】の【CSSを追加】を選択します。

【カスタムCSSを追加】にCSSを入力できます。

後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。

実はこの問題、画像のない記事だと起こりません。

つまり、画像がはみ出ているのが原因なんです。

対策は２パターンで、画像横の余白をなくすCSSと画像の最大サイズを下げるCSSがあります。

どちらか片方でOKです。

試してみて上手くいく方法を採用してください。

以下のCSSを追加してください。

.separator a{

margin-left: 0em !important;

margin-right: 0em !important;

}

余白を0に指定する方法です。

当ブログではこちらを採用しています。

以下のCSSを追加してください。

div.separator img {
max-width: 97%;
height:auto;
}

最大の幅を100%ではなく97%に下げる方法です。

当ブログでは97%でスクロールバーが消えましたが、テーマによって値が変動します。

90～99%程度で試してみてください。

ブログを見る時、スマホを使う方も多いです。

スマホでの見え方を確認し、不具合がないかなどは随時チェックするのをオススメします。