Wordpressのトップページタイトルフォントサイズをスクリーンサイズによって変更する方法

Question

ワードプレスでホームページを作っている初心者です。
初歩的な質問で申し訳ありませんが、どなたか教えていただけると幸いです。

Wordpressの無料テーマ「Hestia」でホームページを作っていて、トップページのタイトル（h1 class="hestia-title"）をスクリーンサイズによってサイズが変わるようにしたいのですが、そのやり方がわかりません。

スマホ画面で見たときにタイトルが２行になってしまうのを、文字サイズを小さくして１行に収まるようにしたいです。
CSSで修正するものと思っているのですが、何をしても変わりません。
解決方法をご教示ください。

Comments

[yukihisa]

「何をしても変わらない」とのことですが、具体的に何をしたのかを記述してください。回答したものが「それはもうやったけどダメだった」と言うことになる可能性があります。

[labcoat]

Jabさんの環境からcssを直接編集することは可能ですか？

[Jab]

CSSを編集することは可能です。HTMLやCSSに関して無知で申し訳ないのですが、追加CSSというところから、当該クラスのフォントサイズを変更したりしてみました。ビューポート使った文字サイズの指定をしようと思ったのですが、知識不足でできませんでした。

[dit.]

「知識不足でできませんでした」とのことですが、「どのような記述を行ったのか」は重要な情報です。質問は編集できますので、ぜひそのコードを追記してください。その際、張り付けたコードを選択し、<code>ボタンを押すとコードが見やすくなるので助かります。

Answer 1

コードで語ろう，こんな感じに

---

/* This CSS is desktop first. */

html{
  font-size: 18px;
}

h1.hestia-title{
  font-size: 2rem;
}

@media screen and (max-width: 900px){
  h1.hestia-title{
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 400px){
  h1.hestia-title{
    font-size: 1rem;
  }
}

OR

/* Pretty Way */

h1.hestia-title{
  font-size: 5vw;
}

/* That's all. ^^ */

---

概要：

• スマホ対応！CSSでメディアクエリの書き方【初心者向け】
• 【CSS】メディアクエリとブレイクポイントの書き方 2018年版 レスポンシブデザインの基本

注意点：

• 【CSS】スマホで Media Queries が効かないときの対処法

ブレイクポイントの話：

• [CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法
• 【2018年版】レスポンシブデザインにおけるブレイクポイントの最適解はこれだ！
• レスポンシブ CSSメディアクエリ（@media）ブレイクポイントまとめ

Tips：

• CSSの基本単位としてremを使うと超絶便利
• レスポンシブの単位には％よりもvw, vhが便利！フォントサイズの指定にも使える

Comments

[Jab]

遅くなってしまい申し訳ありません。
ご回答いただいたものを試してみましたが、修正できませんでした。
もう一度、方法を考えていみたいと思います。
ありがとうございました。

[liveasnotes]

もしまた質問を投稿するなら，どんなコードのどの部分をどう書き換えたのかを書いておくと良いです
また，今回の続きの質問を投稿する場合，本質問のリンクも貼っておいてほしいと言われることもあるようです
Markdownのコードブロックでコードを囲ったり，回答者のみなさんに質問者さんの状況がよく伝わるよう，工夫してみてください（その「整理」の過程で答えに気付くこともあります）

Answer 2

最終手段かもしれませんがとりあえず!importantつけとけばいいかな。

外観-カスタマイズ-追加CSSに下記を追記

h1.hestia-title{
  font-size:5vw !important; /* 数値はお好みに合わせて */
}

Comments

[Jab]

遅くなってしまい申し訳ありませんでした。ご教示いただいたCSSコードの追加で解決されました。ありがとうございました。