Word Pressのトップページに見出し(h3)の追加CSSが反映されてしまう

Question

画像のように、h3の追加CSSがトップページに表示されてしまいます。
h2やh4ではこのような事は起こらないのですが...
トップページに表示されているタイトルはh1タグのはずなので、なぜh3のCSSが反映されてしまうのかが不明です。
使用テーマはAFFINGER5です。
解決法をご存知の方がいらっしゃいましたらよろしくお願い致します。

Answer 1

有料テーマなので入れて試したりはしていませんが、例えば公式のサンプルページだとトップページ上の各記事のタイトルはh3になっているようです。
「トップページに表示されているタイトルはh1タグのはず」というのをまずは疑ってみてください。
デベロッパーツールなどを使って確認するといいと思います。

Comments

[mattyaratte]

確かにそうでしたね...
ですが、デフォルトの見出しの設定だとh3が反映されないのに、追加CSSで書き込むとトップページに反映されてしまうのは何故なのでしょうか？

同じテーマを使用されている他の方のサイトを参考にさせて頂いたところ、トップページの記事タイトルをh5にして対応されているようです。
トップページの記事タイトルをh5に変更する方法をご存知でしたらお教え頂けませんでしょうか？

[dit.]

CSSの詳細度とかその辺が関わってくると思うのですがテーマを隅々まで検証したわけではないので正直分からないです。
単にAFFINGER5といってもカスタマイズ次第（デザイン済みデータを使っているか等）ですし、有料テーマなので全く同じ環境を作るにはハードルが高いです。
また、かなり作りこまれたテーマなのでCSSだけで対応できるのか、HTML（php）を書き換えればいいのか、見出しの種類まで変えるオプションがあるのかなど持っていない者には厳しいです。
（単にindex.phpやhome.php、front-page.php等を編集してh5に直せるようならいいのですが、どこにその記述があるか探したり子テーマを作ったりしないといけないでしょうし、慣れていない場合最悪サイトが表示されなくなります。）

[dit.]

Takumibooさんの回答にもありますが、単にh3と指定するだけだと全てのh3が対象になっていきます。
親要素のclassを確認するなどして自分がつけたいh3以外にはスタイルが効かないように工夫する必要があります。(ひとつ前のコメントの詳細度とかの話です)

[mattyaratte]

なるほど...なんとなく仰っている事は理解出来るのですが、具体的な行動に落とし込めるレベルの知識をまだ持ち合わせておりませんので、もう少し勉強してみたいと思います。
アドバイスありがとうございました！

[dit.]

長々と回答やコメントをしてしまいましたが、各記事内のh3のみデザインを変更したいのであれば、hatena19さんの回答の通り.post h3 {}で記述すればできると思います。

Answer 2

h3だけだとすべてのページのh3タイトルに適用されます。

一覧ページではなく記事ページのh3タイトルのみ適用させたいということなら、.post を付加すればいいでしょう。
AFFINGER5の公式のサンプルページを検証ツールで確認してみるとそうなってます。たぶん Word Press で共通だと思います。

.post h3 {

}

Answer 3

とりあえず、ただh3で指定するのをやめればよいのでは？
指定しているCSSをどこで指定したいのか知りませんが、もう少し絞り込めるようなセレクタで指定すれば良いと思います。

あとコンピュータは凡ミスを犯さないので、h3というセレクタでトップページのどこかが反応しているなら、それはそこがh3に設定されているからです。
ソースを見るなり、開発者ツールでチェックするなりしてください。

Comments

[mattyaratte]

SEO関連の事を考えると、h3以外で指定するという選択肢が消えてしまうんですよ( ;∀;)
見出しは大きい順から順番に並んでいないといけないみたいなので...

そうですね。そこがh3に設定されているのは理解しているのですが、その変更の仕方が分からないのです。
つまり、現在トップページにタイトルがh3

[mattyaratte]

タグとして表示されていますが、それをh5に変更する方法などが分からないという状況です。

すみません誤操作で途中で送ってしまいました。

[Takumiboo]

コメントは編集できます、念の為。

私が言っているのは、マークアップ(HTML)の方をh5など別のものに変更するのではなくて、CSSでの指定(セレクタ)のことです。他の方の回答にもありますが、ただ「h3」とだけ指定するとすべてのh3が対象になりますが、他にクラスだったりIDだったり親要素だったり、絞り込む方法があるのです。それが、「もう少し絞り込めるようなセレクタで指定すれば」という部分です。