サポート » 使い方全般 » スマホでの文字の大きさ

  • 解決済 negi319

    (@negi319)


    テーマのCSS追加で以下のコードを入れたのですがスマホでの文字の大きさが変わりません
    @media screen and (max-width: 480px) {
    .page-title{
    font-weight: bold;
    line-height: 100%;
    font-size: 24px;
    }
    .article p, .entry-content p{
    line-height: 12px;
    font-size:12px;
    }
    }

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

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

    (@du-bist-der-lenz)

    PCサイズでは18px、スマホサイズでは16pxに変化していますよ

    トピック投稿者 negi319

    (@negi319)

    スマホサイズを12pxにしたいのですが下のfont-sizeのところに入れるので間違ってますか?

    ブラウザーは、なにを、お使いでしょうか。
    Chromeの「デベロッパーツール」(右上のマーク > その他のツール > デベロッパーツール)でチェックしてみると、
    指定されたClassセレクター名が、違っているような気がするのですが…いかがでしょうかー。

    こんにちは

    line-height と font-size の前が空白ではない文字(No-Break Space)になっています。

    下記のページ等でチェックしてみてください。
    https://validator.w3.org/

    • この返信は5年、 2ヶ月前にishitakaが編集しました。
    DRILL LANCER

    (@rickaddison7634)

    とりあえず、stylelintに怒られないよう書き換えてみました。

    @media screen and (max-width: 480px) {
    
    	.page-title {
    		font-weight: bold;
    		font-size: 24px;
    		line-height: 1.4;
    	}
    
    	.article p,
    	.entry-content p {
    		font-size: 12px;
    		line-height: 1.4;
    	}
    }
    

    line-heightは最低でも1.4くらいはないと文字がつまりすぎて
    読みにくいのでそのあたりは調整しておきました。
    http://www.htmq.com/style/line-height.shtml

    トピック投稿者 negi319

    (@negi319)

    皆さんありがとうございます。
    文字の大きさは変わったのですが
    投稿の編集画面で文字の大きさを変えてしまった記事の文字の大きさが変わらないんですがどうすればいいですかね?

    DRILL LANCER

    (@rickaddison7634)

    <span style="font-size: 18px;">hogehoge</span>
    のようにインラインで定義されたスタイルに打ち勝つ方法は
    font-size: 12px !important;
    というように!importantをつけるよりありませんね。

    トピック投稿者 negi319

    (@negi319)

    !importantを入れたんですが変わりませんでした。何が悪いのでしょうか?

    トピック投稿者 negi319

    (@negi319)

    投稿の編集画面で変えてしまった文字の大きさを一括で元に戻す方法はないのでしょうか?

    CG

    (@du-bist-der-lenz)

    p要素の中に、span要素があり、それに文章が続いているからではないですか。そうなるとWordPressより、投稿の作り方に課題がありそうです。

    DRILL LANCER

    (@rickaddison7634)

    これでどうにかなればよいのですが・・・

    @media screen and (max-width: 480px) {
    
    	.article p,
    	.entry-content p,
    	.article p span,
    	.entry-content p span {
    		font-size: 16px !important;
    		line-height: 1.7 !important;
    	}
    
    }

    あとは、記述先を子テーマのstyle.cssに変えるとか(こっちのほうが優先度が高い?)

    CG

    (@du-bist-der-lenz)

    initialで解除するにも、限界がありそうですね。

    CG

    (@du-bist-der-lenz)

    htmlソース内にstyleを直書きしないようにしましょう、という戒めですね。

    $(function() {
    		$('body *').removeAttr('style');
    	});
    DRILL LANCER

    (@rickaddison7634)

    @du-bist-der-lenzさん
    JavaScriptで対応ですか・・・
    Simple Custom CSS and JSを導入してもらって
    Add JS Codeから追加してもらえばなんとかなるのかな・・・

    トピック投稿者 negi319

    (@negi319)

    @media screen and (max-width: 480px) {

    .article p,
    .entry-content p,
    .article p span,
    .entry-content p span {
    font-size: 16px !important;
    line-height: 1.7 !important;
    }

    }
    これでできました
    記述先を子テーマのstyle.cssに変えても変わりませんでした。

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