ワードプレスでCSSを反映させたい

Question

ワードプレスを使ってwebサイトを作っています。
画面の中でアンケートみたいなものを設置して、「選択式の回答をクリックして選択したら、次の設問に動く」みたいなものを実装したいなと思っています。
HTMLを使って文章を入力して、あとはCSSでアンケートっぽく見えるようにボックスを配置したり配色を決めたいなと思ってるんですが、ワードプレスの固定ページ編集画面＞カスタムCSSという項目でCSSのコードを試しに入力したんですが、全く反映されていなかったです。

構文がどこか間違っているのかを調べてみてはいるんですが、ヒントになりそうな情報が出て来なくて、こちらで教えていただければと思いました。

「横幅はmarginで設定する」などの初心者向けの情報を参考書やネットの記事で読んでいった感じなので、CSS自体もあまりよくわかっていません。

すみませんが、ご教示いただけると幸いです。
実際にワードプレスに記述したコードも下に書いてみます。

element.style {

}

.main-lp {
    width: 600px;
    margin: 20px auto 40px;
}

figcaption, menu, article, aside, details, figure, footer, header, main, nav, section, summary {
    display: block;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

main {
    display: block;
}

body {
    font-family: 'Kaushan Script', cursive;
    font-family: 'Rounded Mplus 1c', 'Patrick Hand SC', cursive;
    font-family: 'Rounded Mplus 1c', YuGothic, "Yu Gothic", "Kokoro", "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
    color: #383838;
    background-color: #fff;
    padding: 0;
    width: 100%;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: .03em;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: white;
    color: #333;
    padding: 0;
    margin: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

:root {
    font-size: 62.5%;
}

:root {
    --wp-admin-theme-color: #007cba;
    --wp-admin-theme-color-darker-10: #006ba1;
    --wp-admin-theme-color-darker-20: #005a87;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html {
    height: 100%;
    margin: 0;
    font-size: 10px;
}

Comments

[Lhankor_Mhy]

Devtools で確認した時に、これらのスタイルはどうなっていますか？　Elements の Styles の中に表示されていますか？　表示されているけど打ち消されているとかですか？

[a-_.]

表示されていました。
ただ全文そのままではなく、ところどころが打ち消されている状態でした。
(取り消し線みたいなものが引かれているものがちらほらと)

[Lhankor_Mhy]

ご質問に「全く反映されていなかった」とありますが、これと「Devtoolsに表示されていた」はどのように整合しますか？
「全く反映されていなかった」とは、どのような出来事を目にした時にお感じになったのでしょうか？

[a-_.]

HTMLで記述した文字列にフォント指定を行ったり、各アンケート部分の背景に■のボックス(図形)を設置するような記述をしたつもりですが、それらが実際の画面を見た限り何も反映されていなかったので、「反映されていない」と判断しました。

[Lhankor_Mhy]

「フォント指定」と「■のボックス(図形)」について、Devtoolsではどうなっていますか？　打ち消されていますか？

[a-_.]

打ち消されています。

[Lhankor_Mhy]

把握しました。

Answer 1

他のCSSの影響ですね。
ご提示の情報だけでは解決は難しいです。

悪あがきをするならば、指定したいプロパティに!importantをつけてみるのもいいかもしれないですが、本質的な解決ではないと思います。

---

参考：

!important の例外 | 詳細度 - CSS: カスケーディングスタイルシート | MDN

100年後も崩れないCSS勉強会 · 第1回「詳細度」

Comments

[a-_.]

色々と確認いただきありがとうございます。

ご教示いただいたリンクを拝見する限りだと
「importantでCSSのコードを強制的に適用させる」といった解釈で合っておりますでしょうか？
認識違いであれば失礼いたしました。

他に記述したCSSのコードは、下記のヘッダーとフッターの修正くらいです。
---------ヘッダーを消す---------
.home header {
margin :-7em;
}
---------フッターの位置の修正---------
.home footer {
margin :-12em;
}

因みにCSSの結果表示させたいwebサイトがこちらになります。
http://career.physitech.jp/

[Lhankor_Mhy]

ご理解の通りです。

[a-_.]

承知いたしました。

ワードプレスの使用しているテーマのstyle.cssなどは一切触れておらず、固定ページの編集画面から「コードを書く」みたいなメニューを選択してHTMLのコードを記述しただけなので、画面が崩れるような操作はしていないんですが、他に確認してみた方がいい画面などがあれば、ご教示いただけますと幸いです。

[Lhankor_Mhy]

特にないと思います。

ご提示のページを拝見しましたが、body のフォントは指定が効いているように思いました。当方の環境では游ゴシックが適用されています。

[a-_.]

游ゴシック以外にも設定したフォントが幾つかあるんですが、それらが適用して欲しい文字列に反映されていないところもあったので、そちらの指定も構文の誤りで反映されていないのかが不明でした。

[Lhankor_Mhy]

「それらが適用して欲しい文字列」をご提示いただいていないので、当方では検証できません。
ご提供いただいている情報では具体的な解決方法を提示することは困難ですが、一般論的に言うと、CSS優先度の問題ではないかなと思います。

[a-_.]

CSSの他(記述したHTMLなど)の要素が根本的な要因となっているんですね。

他にどのような情報があれば仮説が立てられやすいのか、など恐れ入りますがお話いただけますでしょうか？

[Lhankor_Mhy]

想定していた結果をご提示ください。

https://teratail.com/help/question-tips#questionTips3-4-3

[a-_.]

記載できておらず失礼いたしました。

下記のwebページにあります、選択式のアンケート画面のデザインを実装したかったです。
https://ptot-careernavi.com/lp/entry005/

[Lhankor_Mhy]

いや、そうなんですけど、そうではなくて。
なんて言うんでしょうか、それって最終的なゴールなわけじゃないですか？

ご提示いただいているCSSコードだけで、このレイアウトが実現するとは、さすがにa-_.さんも思ってないですよね？　ご提示いただいているCSSコードだけで、どうなる想定だったのかを教えてほしいのです。

「こうなると思って」「このコードを書いたら」「こうなってしまった」
の内、「このコードを書いたら」「こうなってしまった」については既にご提示いただいていて、ただ「こうなると思って」がわからないので、どこが変わってほしいのかがわからないんです。

つまり、直すべき点を教えてほしい、ということなんです。

[a-_.]

理解不足となり失礼いたしました。

記述したCSSを用いて、参考ページのアンケート部分にある「設問のフォント」「背景のボックスと配色(理学療法士・柔道整体師など書いてある箇所の枠組み)」と似たような表現が行えると想定しておりました。

ですが、現状はご覧いただいた通り、游ゴシックの適用とソース冒頭の「.main-lp」での画面サイズのみ適用されている状態のため、
参考サイトと同様に
①ボックスの配置と配色
②各設問文章にてメイリオ、ＭＳ Ｐゴシックなど指定したフォントの適用
③作成した画面に記述した「次のステップへ」の箇所を押下すると、ページ下部へ画面遷移
ができるようにしたいです。

[Lhankor_Mhy]

それは、そのためのCSSを書かないと無理じゃないですかね……

[a-_.]

そのためのCSSコードを書いたつもりだったんですが、それが追記させていただいた通りの動作をできなかったので、添削などをお願いしたいというところでした。

[Lhankor_Mhy]

その部分のコードが全くないに等しいですので、添削は難しいです。
最初から作る感じになります。