タイトル文字の大きさの調整

0
いいねをした人: 居ません
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #6284
    amakazusan
    閲覧者
    0

    お世話になっています。

    スマホとPCでタイトル文字の大きさを変更させたいと思っています。

    CSSをいれたのですが、上手くいきません。

    .c-entry__title {
    font-size: 32px;
    }

    @media screen and (max-width: 480px)
    .c-entry__title {
    font-size: 20px !important;
    }

    記述に間違いがあるのでしょうか?

    恐れ入りますが、ご教授いただけると幸いです。

     

    0
    いいねをした人: 居ません
    #6285
    キタジマ タカシ
    参加者
    2233

    Snow Monkey のデフォルトは、

    h1 {
      font-size: 1.66667rem; /* 26.66667px 相当 */
    }
    
    @media (min-width: 64em) {
      h1 {
        font-size: 2.5rem; /* 40px 相当 */
      }
    }

    となっています。これは、基本は 1.66667rem、画面の横幅が 64em 以上(PC サイズ)のときは 2.5rem になる、ということです。

    .c-entry__title {
      font-size: 32px;
    }

    とした場合はすべてのデバイスサイズで 32px になるはずなのですが、上手くいかない、というのはどのような状況でしょうか?

    ちなみに、

    @media screen and (max-width: 480px) {
      .c-entry__title {
        font-size: 20px !important;
      }
    }

    は、画面幅が480px以下の場合は絶対的に 20px という意味になります。

    0
    いいねをした人: 居ません
    #6286
    amakazusan
    閲覧者
    0

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

    やりたかった内容としては、

    デファクトのタイトルの大きさではスマホにすると大きかったので小さくしたいというものでした。

    とした場合はすべてのデバイスサイズで 32px になるはずなのですが、上手くいかない、というのはどのような状況でしょうか?

    コチラについては

    @media screen and (max-width: 480px)
      .c-entry__title {
        font-size: 20px !important;
      }

    を動作させたかったのですが、CSSがうまくどうさせずになやんでいました。

    そこで、書かれていた

    @media screen and (max-width: 480px) {
      .c-entry__title {
        font-size: 20px !important;
      }
    }

    の記述に変更したところ動作いたしました。

    @media~{
    
    }

    が原因だったんでしょうか。

    解決致しました。ありがとうござます。

    0
    いいねをした人: 居ません
    #6301
    キタジマ タカシ
    参加者
    2233

    あ、なるほどです!そうですね、メディアクエリ(@media(...) の部分)は、セレクタを囲むように記述する必要があるんです。解決できたとのことでよかったです^^

    トピッククローズします。

    0
    いいねをした人: 居ません
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • トピック「タイトル文字の大きさの調整」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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