セクション(サイド見出し)でデバイス別にフォントサイズを変更したい

0
いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • 投稿者
    投稿
  • #72645
    アバター画像shone
    参加者
    45

    【お使いの Snow Monkey のバージョン】14.0.2
    【お使いの Snow Monkey Blocks のバージョン】11.0.2
    【お使いの Snow Monkey Editor のバージョン】5.0.1
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】ローカル環境にて開発中

    お世話になります。

    昨日snowmonkeyを購入しサイト作成していたのですが、問題に行き当たりましたため質問させていただきます。

    ### 実現したいこと

    タイトル通り、『セクション(サイド見出し)』を使って入力したテキストのサイズをデバイス別(最低でもPC、モバイル2種類のディスプレイサイズ別)に変更したいです。

    ### 発生している問題

    カスタムCSSに変更を記述しましたが、変更が反省されませんでした。

    !importantを付与しても同様でした。

    ### 試したこと

    上記の過去のフォーラムのトピックを参考に、まずPC側はブロックエディタでサイズを『中』に指定した後、変更したいサイド見出しにcssクラスを付与し@media screenでスマホ表示時のサイズを変更しようとしたところ反映されませんでした。

    そののち、

    こちらのトピックも拝見し、element.styleが影響しているのか?と考え、エディタのsnowmonkeyロゴで文字サイズを変更していたのを一度リセット、カスタムCSSで通常とモバイル2種類の文字サイズを指定しようかと思ったのですが、こちらもうまくいきませんでした。

    うまい解決策ありましたらご教示いただけますと幸いです。

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

    0
    いいねをした人: 居ません
    #72682
    アバター画像キタジマ タカシ
    参加者
    2260

    カスタムCSSで通常とモバイル2種類の文字サイズを指定しようかと思ったのですが、こちらもうまくいきませんでした。

    おそらく一番リスクが低そうなのはこのやり方かなと思います。実際に書いてみた CSS を教えてください!

    0
    いいねをした人: 居ません
    #72784
    アバター画像shone
    参加者
    45

    キタジマさん

    ご返信ありがとうございます。

    CSSが効かなかった際に全て消してしまったのでうろ覚えなのですが…

    今もう一度下記のように、ひとまずメディア別に分けずサイド見出しの『高度な設定』からcssクラス『profiletext』を与えて、まずシンプルにサイズか変わるかどうか試してみてもやはりフォントサイズは変更されませんでした。

    .profiletext {
      font-size: 16px;
    }

    !importantを付与しても同じでした。

    .profiletext {
      font-size: 16px !important;
    }

    またブロックエディタ内のsnow monkeyマークを押してサイズを標準にしたり、カスタムで16pxにしても変わりませんでした。

    今はPC、スマホともに14pxに固定されてしまっています。

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

    0
    いいねをした人: 居ません
    #72812
    アバター画像キタジマ タカシ
    参加者
    2260

    こちらでも .profiletext を追加して同様の CSS を書いてみました。反映されているのが確認できると思います。

    タイトル部分については別途文字サイズが指定されているので、こちらを変更したい場合は .profiletext .smb-section-side-heading__title のようなセレクタを使う必要があります。

    もし本文部分も変更されないということであれば、shone さんが独自に追加された CSS(font-size)が影響している可能性も考えられるのかなと思います。「今はPC、スマホともに14pxに固定されてしまっています。」とのことなので、それがどのようなセレクタで、どの CSS ファイルが指定しているものかを確認してみてください。

    0
    いいねをした人: 居ません
    #72848
    アバター画像shone
    参加者
    45

    キタジマさん

     

    ご返信ありがとうございます。

    追加CSSには上記以外干渉しそうなCSSを書いておらず(contact form7のデザイン変更くらい)、style.cssにも追記などしていないためなぜ反映されないのか依然理由不明のままです…

     

    ただその後色々と試してみたのですが、snow monkey blocksのフォントサイズの指定で『標準』と『カスタム』の16pxのみ反映されず14pxに固定されてしまうということが判明しました。

    その他の『小』や『中』『大』などは問題なく変更が反映されました。また『カスタム』で小数点を入れ16.5に指定しても反映されました。

    こちら何か原因わかりそうでしょうか?(今は見た目にあまり他と差異が無い16.5pxを仮に採用しています)

     

    お手すきの際にご確認いただけますと幸いです。

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

    0
    いいねをした人: 居ません
    #72865
    アバター画像キタジマ タカシ
    参加者
    2260

    カスタマイザーの基本デザイン設定で基本文字サイズを14pxに設定してたりします?

    カスタマイザーの基本デザイン設定で基本文字サイズを14pxに設定している状態で、ブロックに対して Snow Monkey Editor やコアの文字サイズ設定で「標準」を選択した場合、その部分の文字サイズは 1em、つまり基本文字サイズとして設定している 14px になってしまうようでした。

    基本文字サイズが 16px 以外のときは、「標準」で設定される文字サイズが 16px になるように変更を入れようと思います。

    0
    いいねをした人: 居ません
    #72973
    アバター画像shone
    参加者
    45

    キタジマさん

     

    お世話になっております。カスタマイザーの設定を確認したのですが、基本の文字サイズは16pxになっていました。それ以外に個別に文字設定の変更を加えた記憶もないので何がどう影響しているのかサッパリですが…

     

    >基本文字サイズが 16px 以外のときは、「標準」で設定される文字サイズが 16px になるように変更を入れようと思います。

     

    いずれにせよこちら変更いただければ「標準」選択で16pxになるのかな?と。お手すきの際にご対応よろしくお願い致します。

    0
    いいねをした人: 居ません
    #72977
    アバター画像キタジマ タカシ
    参加者
    2260

    なるほど…。基本文字サイズが変更されているときの対応は進めていますが、そこが変更されていないとなると、ページを実際に見てみるか、デベロッパーツールで14pxになっている原因をみてもらわないとわからないと思います。ローカルで開発中とのことで実際に見るのはできないと思うので、デベロッパツールで調べてみてもらえますか?

    0
    いいねをした人: 居ません
8件の投稿を表示中 - 1 - 8件目 (全8件中)
  • トピック「セクション(サイド見出し)でデバイス別にフォントサイズを変更したい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。