プロが教える店舗&オフィスのセキュリティ対策術

下記サイトを参考にさせてもらっているんですが、
https://rilaks.jp/wordpress/profile/

HTML
----------------------------
<div class="profile">
<div class="profile_image">
<img src="" alt="名前">
</div>
<div class="profile_text">
<p class="profile_text_name">名前</p>
<p class="profile_text_description">プロフィール文章</p>
</div>
</div>
----------------------------
CSS
----------------------------
.profile {
background-color: #fff; /* 背景色 */
padding: 20px;
display: flex;
border: solid 3px #EAF4F3; /* 枠線の種類、太さ、色 */
}
.profile_image {
text-align: center;
padding-right: 14px;
}
.profile_image img {
max-width: 80px;
border-radius: 100%;
}
.profile_text_name {
font-weight: bold;
margin: 6px 0;
}
.profile_text_description {
font-size: .8em;
margin: 0;
}
@media screen and (max-width:480px) {
.profile {
display: block;
}
.profile_image {
padding-right: 0;
}
.profile_image img {
max-width: 120px;
}
.profile_text_name {
text-align: center;
margin-top: 6px;
}
}
----------------------------

このうち、プロフィール文章の文字サイズだけなぜかCSSが効きません。
(もしかしたら他にも効いていない所があるかもしれませんが、目につくのは文字サイズ)

.profile_text_description {
font-size: .8em;
}

0.8emや13pxなど変えてみたんですが、変わりなく、
GutenbergでもClassic Editorでも同じでした。

ちなみに他にCSSを記載していないので、かぶっていることはないと思います。

この部分は少し文字サイズを小さくしたいため、
もしお分かりになる方がいたら教えてください。

質問者からの補足コメント

  • そうでした、キャッシュがありましたね!!

    さっそく「ブラウザキャッシュ」、「プラグインによるキャッシュ」、「レンタルサーバーのキャッシュ」と順番にキャッシュを削除してみたんですが、結果変わらず....
    残念です...

    No.1の回答に寄せられた補足コメントです。 補足日時:2022/04/09 21:15
  • キャッシュもクリアしてみたんですが、変わりませんでした...

    ちなみにPCでは”名前”は太字になっているんですが、スマホでは太字になりません。
    これまた謎が増えました...

    No.2の回答に寄せられた補足コメントです。 補足日時:2022/04/09 21:17

A 回答 (5件)

No1です。



キャッシュの問題でないのだとすれば、
ディベロッパーツールでどのようなスタイルが適用されているか調べるのが良いと思います。

参考:
https://www.sakurasaku-labo.jp/blogs/developer-t …
    • good
    • 0
この回答へのお礼

助かりました

さっそく、ディベロッパーツールで調べてみたら、
テーマのCSSとぶつかっており、文字サイズだけ取り消し線で効かない状態になっていました。

テーマの相談フォーラムで解決策(CSSをより詳細に記述)を教えていただき、無事思い通りの形になりました。

とってもスッキリしました!
ありがとうございました!!!

お礼日時:2022/04/11 18:09

もしかして、文字サイズが変わらないといってるのは、スマホ表示で??



スマホだったらサイズは0.8emにはなりません。
理由はNo.4の後半に書いた通りです。
    • good
    • 0

>>スマホでは太字になりません


と言う事は、サーバにアップしてるんですか?

でしたら、urlを教えて貰えませんか?
無理なら、htmlのヘッド部分を書いて呉れませんか?


>>>>これまた謎が増えました
いいえ、スマホでは太字にしないcssになってますよ。

@media screen and (max-width:480px) {
ブラウザの横幅が480px以下の場合には、そこから下のcssが適用される宣言です。

そこではfont-weight: bold;が有りませんので、細字になります。

だから、cssは読み込まれてる訳ですねえ・・・。
やはり、urlかhtmlのヘッド部分を見たいですね・・・・。
    • good
    • 0
この回答へのお礼

ありがとう

サイトは非公開でアップしていたんですが、無事解決しました。
どうもありがとうございます。

また、スマホでは太字にならない謎が解けました!
文字サイズのCSSが効いたら、スマホでは太字でなくてもいいかなとそのままにしてあります。

お礼日時:2022/04/11 18:12

充分効いてますが。


チャント0.8emサイズで表示されるし、2emならそれなりの大きさになります。
”名前”は太字になってます。

キャッシュをクリアしてます?
この回答への補足あり
    • good
    • 0

書かれている範囲は、問題なさそうです。


キャッシュを削除してみると適用されるかもしれません。

参考:
https://www.afi-b.com/beginner/archives/course/c …
この回答への補足あり
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


このQ&Aを見た人がよく見るQ&A