サポート » 使い方全般 » スマホにできる余白

  • 5hu1ch1

    (@5hu1ch1)


    スキル不足で失礼します。スマホのタテ表示での右側の余白が直りません。以前にも同様の質問して、広告の大きさの問題かとアドバイスをいただきましたが、まだ余白が直りませんでした。
    自分なりに調べてみて、viewportの記述は確認しました。しかし、自分のstyle.cssに#wrap、#wrapper、#containerなどの該当部分が見当たらず、「overflow:hidden;」を記述するカ所(方法?)もよくわからない状況です。どのファイルを修正するのかもわからず、困っております。よろしくお願いします。

    ヘルプの必要なページ: [リンクを見るにはログイン]

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • CG

    (@du-bist-der-lenz)

    本文とウィジェットの広告を外して、比較確認して下さい。

    トピック投稿者 5hu1ch1

    (@5hu1ch1)

    ありがとうございます。
    記事本文の広告が左に寄せるようです。
    他のウィジェットは影響ありませんでした。
    不思議なことに同じiPhone7の同じiOsバージョンのSafariでも、
    機種によって見える場合と見えない場合があることです。
    表示される広告の差ということでしょうか。

    未熟な質問で恐縮です。

    トピック投稿者 5hu1ch1

    (@5hu1ch1)

    とりあえず、問題のありそうな広告のコードは外しました。

    CG

    (@du-bist-der-lenz)

    表示される広告の差ということもあるでしょう。同じiPhone7の同じiOsバージョンのSafariでも、機種によって異なっていても解像度は同じでしょうか。テーマはユーザーエージェントで閲覧を認識させていますか。メディアクエリでレスポンシブになっているだけでしょうか。

    トピック投稿者 5hu1ch1

    (@5hu1ch1)

    なるほど。解像度までは調べていませんでした。
    が、家人がスマホを抱え寝てしまい、その確認ができません。
    すみません。
    当方の知識不足でテーマのユーザーエージェントとメディアクエリが理解できていません。
    調べてもみますがお時間のある時にでもご教示いただけると助かります。

    ishitaka

    (@ishitaka)

    こんにちは

    スマホのタテ表示での右側の余白が直りません。

    右側の余白とは、サイドバー部分の右側の余白のことで、直らないとはサイドバーの幅が広がらないということでしょうか。
    この場合は、下記のスタイルではどうでしょうか。

    style.css またはカスタマイズの追加 CSS 等に、

    @media (max-width: 992px) {
    	#primary-mono {
    		padding-left: 10px;
    	}
    	#secondary {
    		margin: 10px 10px 20px 10px;
    		width: calc(100% - 20px);
    	}
    }
    トピック投稿者 5hu1ch1

    (@5hu1ch1)

    ありがとうございます。
    とりあえず左右のブレはなくなりました。
    若干、左に寄って記事の一番左の文字が欠けて見えるスマホもありますが、
    読めなくはなさそうなので、これでしばらく運営してみます。
    アドバイスをいただいた皆さんに感謝します。

    ishitaka

    (@ishitaka)

    若干、左に寄って記事の一番左の文字が欠けて見えるスマホもありますが、

    解像度の低いスマホで、広告がコンテンツ幅をオーバーするためだど思います。
    広告を外すか、レスポンシブ広告へ変更して、下記のスタイルを追加すると欠けることなく表示されるようになると思います。

    @media (max-width: 992px) {
    	#primary-mono {
    		padding-left: 10px;
    		max-width: 100%;
    	}
    	#secondary {
    		margin: 10px 10px 20px 10px;
    		width: calc(100% - 20px);
    	}
    }
    トピック投稿者 5hu1ch1

    (@5hu1ch1)

    ありがとうございます。
    レスポンシブの広告のはずなので
    これで見えるようになるはずです。

    詳細な情報をありがとうございます。
    助かりました。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • トピック「スマホにできる余白」には新たに返信することはできません。