文字の大きさを変える

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

    既出だと思うのですが、回答を見つからなかったため、質問させていただきます。初心者です。

    【お使いの Snow Monkey のバージョン】バージョン: 17.2.3
    【お使いの Snow Monkey Blocks のバージョン】未使用
    【お使いの Snow Monkey Editor のバージョン】未使用
    【お使いのブラウザ】Chrom
    【当該サイトのURL】納品予定のため非公開で行かせていただきます。

    ### 実現したいこと

    ⑴スマホ表示では文字の大きさを小さくしたい。

    2画像の大きさをPC・スマホにレスポンシブ対応できるようにしたい。

    ### 発生している問題

    レスポンシブ対応ができていない。❶文字が大きく改行も辺でよみにくい。❷写真がレスポンシブ対応していない。❸画像に文字が被ってしまう。

    コード等を書かずして簡単にレスポンシブ対応できる方法はありませんか?

    ### 試したこと

    スマホ表示と文字の大きさを変えて表示させたいのですが、CSSを入れる必要がありますか?CSSはわからなく、プレビューで変更を試みているのですが、それでは不可能でしょうか?

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

    具体例がわからないのでもしかしたら他に対応方法があるかもしれませんが、基本的には CSS を書くことになると思います。

    5
    いいねをした人:
    #108451
    es:エス
    参加者
    136

    キタジマさんが仰っているとおり、どの状態でそうされたいのかにもよりますが、基本的にCSSは必要かなと思います。

    CSSに頼りすぎるのもまた問題となることもありますが、納品予定ということはお仕事で制作されていると思いますので、CSSがちょっとでもわかってくると何かと便利ですし、何よりさらに楽しくなると思いますので、この機会にトライされることもおすすめしますよ。

    もし、やってみようかな、トライしてみようかな、と思われたら、お返事ください。
    私にわかる範囲で…とはなってしまいますが、一緒に考えて、お力になれたらと思います。

    2
    いいねをした人:
    #108522
    Kaitaku
    閲覧者
    0

    キタジマさん、esさんご返信ありがとうございます。

    esさん、CSSはどちらで学習しましたか?良い記事があれば教えていただければ幸です。

    トライしたいことは、PCの文字は現状のままで、携帯画面で見るときは文字の大きさを小さくしたいです。大きいが故に改行が変になったりみえにくくなっていて。ある程度のレスポンシブは適応されるものだと思いこんでおりましたので、いざ納品前になって、焦っております。

    携帯画面の時のみ文字を小さくするための方法をご教授いただけると幸です。

    0
    いいねをした人: 居ません
    #108529
    es:エス
    参加者
    136

    CSSの勉強は、特にこの本このサイト、というものはなくさまざまなものからですが、恐らく勉強しようという視点になると色々と見えてくると思います。

    なお、このSnow Monkey フォーラムだけでもかなり勉強になると思いますので、特にSnow Monkeyをお使いであれば、まずはここからはじめてもいいと思いますよ。

    PCと、それ以外でフォントサイズを変える際、私は下記のようにしています。

    @media (max-width: 1279px) {
      html {
        font-size: 14px;
      }
    }

    私は、デフォルト(PC)を16pxにしている場合、14pxがバランスがいいかなと思ってそうしていますが、お好みで調整ください。

    CSSを記述するにはいくつかの方法がありますが、カスタマイズ画面(カスタマイザー)の下記の項目を開いて、記述するのが簡単でいいと思います。

    これからも楽しんで制作や勉強ができるといいですね。^^

    0
    いいねをした人: 居ません
    #108531
    es:エス
    参加者
    136

    追伸
    私はあまりしませんが、スマホのみ、とする場合は下記のようにしています。

    @media (max-width: 639px) {
      html {
        font-size: 14px;
      }
    }
    0
    いいねをした人: 居ません
    #108543
    アバター画像キタジマ タカシ
    参加者
    2421

    v17.2.4 では、下記の CSS でもカスタマイズできます。

    @media (max-width: 639px) {
      :root {
        --_base-font-size-px: 14px;
      }
    }
    1
    いいねをした人:
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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