WORDPRESS レスポンシブのPC対象だけ固定ページのタイトル文字を変更したいです。

Question

わからないこと

レスポンシブのPC対象だけ固定ページと投稿ページのタイトル文字を変更したいです。

固定ページをご確認頂けますでしょうか？
固定ページタイトル　と記載している部分について文字が大きすぎますので
変更したいです。

実際にためしたこと

chrome上でF12を押して該当する箇所を調べました。
すると以下二箇所が本件に該当すると考えました。

@media (min-width: 992px)
.vw-post-header .vw-post-title {
    font-size: 47px;
}

@media (min-width: 768px) {
    .vw-title-area--has-bg .vw-title-area__title {
        font-size: 47px;
    }
}

そのうちの１つのpxをF12上へ変更すると、固定ページのタイトルの文字サイズが大小変更しました。

@media (min-width: 992px) {
    .vw-post-header .vw-post-title {
        font-size: 33px;
    }
}

``
その為、該当するコード　上記を子テーマに追記しました。
しかしサイズは変更されず反映されませんでした。

### **実際にしらべたこと**

そこでCSSのルールについて調べたところ
１CSSは後ろの方が優先されること
２CSSは同じ記述があると反映されないこと

上記２点がある事がわかりました。そのうちの２点目については、
記述内容のカテゴリをさらにネストが深いところまで指定すればよいという事がわかりました。

**### わからないこと**

子テーマのcssには具体的にどのように記述すればよろしいのでしょうか？
夜分お手数おかけしますが宜しくお願い致します。

Answer 1

dfjileさんが作成された子テーマ・フォルダの名前を「presso-child」にされてる前提でお話しします。

1. 親テーマフォルダ /wp-content/themes/presso/ にある style.css を子テーマフォルダ /wp-content/themes/presso-child/ にコピー
2. コピーした style.css を編集します。

4965行目以降に @media (min-width: 992px) { というメディアクエリがあります。
（行数が多いので検索したほうが早いです）
3. ここにあるセレクタ .vw-post-header .vw-post-title の { font-size: 47px; } を
{ font-size: 33px; } に変更して保存してみてください。

Comments

[koikogarey]

これから試しますが、まず御礼を言わせてください。前回は大変助かりました。本当にありがとうございます。またいま教えて頂いた事を試して別途ご連絡させて頂きます。宜しくお願い致します。

[koikogarey]

試してみました。結論、うまくいきました。ありがとうございます。うまくいなかった原因は、メインのcssを子テーマにコピーしていなかった事なのでしょうか？また今後も、このようにまずメインのcssは子テーマにコピーして使用した方が良いのでしょうか？前回教えて頂いたF12を利用させて頂き、対象となるコードまで見つけたので悔しい想いでいっぱいです。

[Sohaya]

メインのcssを子テーマにコピー＞はい、そうなります。

cssのほかにも修正したいファイルがあれば親テーマから子テーマへ
（フォルダの中にある場合はフォルダも新規作成してその中へ）
元のファイルをそのままコピーしてから、必要な修正を加えるかたちになります。
そうすることで親テーマのファイルを上書きし、変更内容が有効になります。

「functions.php」は例外的に、親テーマをコピーする必要がありません。
（子テーマ側に追加したい関数を記述するだけ）
親テーマに追記するかたちでその関数を追加してくれます。

[koikogarey]

メインのcssを子テーマにコピー＞はい、そうなります。

ありがとうございます。今までfuction.phpのような運用でした。今回からSohayaさんのおっしゃられる通りcssをコピーして使用したいと思います。確かに親が更新かけた時わたしのやり方ではモロに子が影響受けますね。簡潔かつ的確で非常に参考になりました。ありがとうございました。