解決済み
Question

標準フォントの文字の太さについて

  • C C

  • いつもお世話になっております。

    サイトやブログで使用する「通常テキスト」の太さについての質問です。

    現在、JIN-Rでのサイトテキスト設定で「標準フォント」を選択して使用しています。
    先日のJIN-Rのアップデート後に、標準フォントの太さが細くなった（PC、モバイル共に）ように感じるのですが、いかがでしょうか？

    ※もし、原因がアップデートとは関係のない場合はすみませんm(_ _)m

    やや細すぎるように感じるため、以前の少し太いものに変更したいと思っております。
    もし、追加CSSで対応できるようでしたら記述方法を教えていただけましたら幸いです。

    JINRのバージョンは、1.3.2です。
    どうぞよろしくお願いいたします。

    • WP 6.5.2
    • Xserver
    • GoogleChrome
    • macOS Mojave
    2024/04/11 09:23
  • tsu_

    こんにちは！
    JIN:R運営チームのtsu_です。

    ご質問ありがとうございます！

    文字の太さ(font-weight)は変わらず400のままのはずですが、ブラウザの影響を受ける事もありますね、、、

    以下のコードで変化があるかお試しいただけますか？？
    (CSSが反映されている場合、600の部分を400とか500にすると太さが変わるはずです！）

    #wrapper.d--jpf-default, .d--jpf-default .editor-styles-wrapper, .d--jpf-default .edit-post-visual-editor, .d--jpf-default + #JinrPaidPopUpRegisterWrapper, .d--jpf-default + #JinrPaidPopUpRegisterWrapper + #JinrPaidPopUpLoginWrapper, .d--jpf-default + #JinrPaidPopUpRegisterWrapper + #JinrPaidPopUpLoginWrapper + #JinrPaidPopUpLostpasswordWrapper {
    font-weight: 600;
    }

    よろしくお願いいたします！

    2024/04/12 17:30
  • C
    C

    ご回答いただき、どうもありがとうございます。
    教えていただいたコードで、「標準テキスト」を太くすることができました。

    ただ、「font-weight: 600」だと太すぎまして、
    500がちょうど良い太さなのですが、
    600以上からでないとCSSが反映されないようです。
    これは仕様上、仕方のないことでしょうか？

    他の方法として、「標準フォント」以外に、「ゴシック（Noto Sans JP）」でもフォントの太さの変更を試してみたいと思っております。
    よろしければ、ゴシック（Noto Sans JP）でのフォントの太さを変えるCSSの記述方法をお教えいただけますでしょうか？

    お手数をおかけいたしますが、どうぞよろしくお願いいたします。

    2024/04/16 09:38
  • tsu_

    "ただ、「font-weight: 600」だと太すぎまして、
    500がちょうど良い太さなのですが、
    600以上からでないとCSSが反映されないようです。
    これは仕様上、仕方のないことでしょうか？"
    　↓
    こちらで検証した感じですと500でも反映されていますが、別途CSSが当たっているところは変化が無い部分もあるかもしれません...！

    Noto Sans JP については、以下のコードを試していただけますか？？

    #wrapper.d--notosans-thin {
    font-weight: 400;
    }

    よろしくお願いいたします！

    2024/04/16 22:48
  • C
    C

    検証していただき、どうもありがとうございます。
    私の方で教えていただいたコードで色々試してみた結果は下記の通りでした。

    【動作環境】
    端末：iPhone 13 mini, iPhone 14 Pro Max
    OS：iOS 17.4.1（最新）のSafari
    →反映されない

    端末：XPERIA Ace Ⅱ SO-41B
    OS：Androidバージョン13（最新）のChrome
    →反映されない

    端末：MacBook Air M1, 2020
    OS：MacOS 14.4.1（最新）のChrome
    →反映される

    【検証結果】
    ●iPhoneやAndroidのSafariやChromeでは太さが反映されない。
    ●MacのChromeでのみ反映される

    カスタマイズ画面では、100, 200, 300, 400, 500, 600など太さがすべてきちんと反映されているのが確認できるのですが、公開ボタンを押してカスタマイズを完了し、いざ実際のサイトをiPhoneやAndroid（モバイル端末）で開いてみると反映されていない...という結果でした。(^^;

    ただ、今回の現象についてネット記事などでいろいろ調べてみましたら、最近のiOSのアップデートにより突然フォントが細くなったという声も出ているようですので、しばらく様子を見てみようと思います。

    【参考記事】
    https://sbapp.net/appnews/app/upinfo/ios17/safarifonthosoi-154477

    この度は色々と検証やご回答などお時間をいただき、ありがとうございました。
    JIN-Rはシンプルな使い心地で、デザインも良くとても気に入っております。
    引き続きどうぞよろしくお願いいたします。

    2024/04/19 06:26
  • tsu_

    細かい検証ありがとうございます！

    こちらこそ、引き続きよろしくお願いいたします！！

    2024/04/21 22:47
CLOSE

ログイン方法を選択してください