サイト内のページ幅が統一されない

  • nmsea

    (@nmsea)


    4年、 4ヶ月前

    初心者です。よろしくお願いします。

    1) http://indietokyo.com/
    2) http://indietokyo.com/?p=14856

    上記ページをスマートフォンで表示した際、各ページで幅が統一されません。
    1)のページ幅はスマートフォンのモニタに合わせて表示されますが、
    その他のページ（例えば2)のようなページ）では右側に余白が生じてしまいます。

    WPTouchのような、ページ幅をモニタサイズに合わせて自動調整するプラグインは試してみましたが、効果がありません。

    原因と対処法をご教示いただけますでしょうか。

    よろしくお願い致します。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • moyo55

    (@moyo55)

    4年、 4ヶ月前

    画像やテキストのレスポンシブ対応が不十分な（コンテンツ幅より大きな画像や長い文章がある）とき、モバイル端末でアクセスすると、コンテンツを突き抜けた長い文章や大きな画像をしっかり表示しようとして右側に余白が出来てしまいます。

    ブログを見た感じでは記事文末にある参考リンクの折り返しに問題があるようです。
    アドレスを囲っているpタグにテキストの折り返し設定を指定してみてください。
    例えば…
    p {word-break: break-all;}
    など。

    テキストの折り返し設定は word-break の他に overflow-wrap や word-wrap などもあります。
    簡単に説明するのは難しいので、詳しく知りたい場合は検索して解説サイトを参考にしてみてください。
    なお、 overflow-wrap と word-wrap を指定する場合はこんな感じの記述になります。

    p {
	overflow-wrap: break-word;
	word-wrap: break-word;
}
    • この返信は4年、 4ヶ月前にmoyo55が編集しました。
    トピック投稿者 nmsea

    (@nmsea)

    4年、 4ヶ月前

    ご回答ありがとうございます。

    早速 word-break、 そして overflow-wrap と word-wrap の機能をそれぞれ調べてカスタマイザーに各CSSコードを追加してみました。

    すると右手のプレビューではこのコードが反映されるのですが、実際に携帯で確認すると元のままで、ご指摘のURLは枠からはみ出たままです。（このプレビューは当初から実際の表示との間で食い違いがありました。）

    ページ幅をモニタに合わせて調整するプラグインを無効にして再度試しましたが、効果はありません。

    使用しているテーマの問題でしょうか？

    トピック投稿者 nmsea

    (@nmsea)

    4年、 4ヶ月前

    補足：因みにCSSコードは一度に2種類を同時に追加せず、ひと種類ずつ試してあります。

    moyo55

    (@moyo55)

    4年、 4ヶ月前

    cssの記述が反映されない主な原因は

    • CSSを読み込んでいない
    • CSSの優先順位が適切でない
    • CSSの記述ミスや指定ミス
    • キャッシュを削除していない

    です。
    変更したデザインが反映されない原因の殆どはキャッシュです。

    WordPress外観カスタマイズの追加CSSに
    .post p {word-break: break-all!important;}
    を記述し保存をしてください。
    それからスマホのブラウザキャッシュを完全に削除するかCookieやキャッシュを保存しないシークレットモード（Safariならプライベートブラウズ）でアクセスして変更が反映されるか確認してみてください。

    もしキャッシュプラグインを使用している場合は先に無効化あるいはキャッシュ削除を必ず行ってください。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「サイト内のページ幅が統一されない」には新たに返信することはできません。