「関連記事」「コメントをどうぞ」のCSS要素について

.related-entries h2{
  font-size: 10px;
}

書き方は正しいと思いますが、セレクタの指定が間違っています。
対象はIDなので、

#related-entries h2{
  font-size: 10px;
}

かと思います。が、10pxは小さすぎやしませんか？(笑)

Hidekichi様

確かに10pxは小さかったですね（笑

「関連記事」は変更できました、ありがとうございました。

しかし、「コメントをどうぞ」が変更出来ませんでした。

<div id=”respond” class=”comment-respond”>
<h3 id=”reply-title” class=”comment-reply-title”>
コメントをどうぞ

子テーマには以下の様に記載してみたのですが変わりませんでした。

#comments, #reply-title {
font-size: 12px;

#comments, #reply-title {
    font-size: 20px;
    font-size: 12px; /*追記*/
}

これでデフォルトのコメントエリアの指定セレクタのサイズは変わるはずです。
もしかすると、jetpackとかのプラグインを利用していて、それのスタイルが適用されているとかということはありませんか？

もし何かしらプラグインがセレクタを変更していたり、プラグイン自身のcssを適用している場合は、それよりも後で読み込まれる部分に適用したいサイズを指定するかjQuery等でそのセレクタに直接styleを入れる必要があります。

ひとまず現状がどうなっているのかがわからないので、上記code内の追記分を試してもらって適用されるかどうかと、プラグインの仕様の有無等の調査が必要でしょうか。

Hidekichi様

jetpackなどのプラグインは入れてない状況です。
デフォルトの以下が入っております。
・Akismet
・Hello Dolly
・Ptengine – Real time web analytics and Heatmap
・SiteGuard WP Plugin
・WP Multibyte Patch

先に、申し訳ありません。
先に記載した内容が間違っておりました。

「コメントをどうぞ」の上に配置されている「コメント」というタイトルのサイズが
変わらない状況です。

<div id=”comment-area”>
<section>
<h2 id=”comments”>コメント</h2>

#comments, #reply-title {
font-size: 20px;
font-size: 12px;　　←★
}

★マークは「コメントをどうぞ」にあたっており文字サイズは変わっているのですが
20pxの方はid=”comments”にあたらない状況です。

何度もお手数おかけいたします。

すみません、度々の投稿となります。

解決は出来ないのですが、現象が起きるさいの条件がわかりました。

コメントがない記事の場合
→「コメントをどうぞ」cssがあたらない

コメントがある記事の場合
→「コメント」というタイトルにcssがあたらない
→「コメントをどうぞ」のフォントにcssがあたる

#comments, #reply-title {
    font-size: 20px;
    font-size: 12px; /*追記*/
}

これの意味は、#comments と #reply-title を プロパティで指定したスタイルにすると言うことです。

なので、このスタイルが適用された所で#commentsだけに何かしらスタイルを当てるとするなら、

#comments, #reply-title {
    font-size: 20px;
    font-size: 12px; /*追記*/
}

#comments {
  font-size: 20px;
}

と、後でプロパティを上書きすればよいのです。結果的に、#commentsは、

#comments, #reply-title {
    font-size: 12px;
}

で一旦12pxになりますが、その後の、

#comments {
  font-size: 20px;
}

で20pxにプロパティが上書きされます。

あるいは、

#comments, #reply-title {
  font-size: initial;
}

#comments {
  font-size: 20px;
}
#reply-title {
  font-size: 12px;
}

このようにして、予めinitialでフォントサイズを初期化してから、それぞれにフォントの指定をします。
ちなみに、IEの古いバージョンのサポート終了が発表されたのでこれからは特に古いブラウザ向けに何かしらする必要はありませんが、以下のような書き方もできます。

html {
  font-size: 16px; /*指定がない場合は基本16px(ブラウザによる)*/
}

#comments {
  font-size: 20px;
  font-size: 1.25rem;
}

#reply-title {
  font-size: 12px;
  font-size: 0.75rem;
}

主要な新しいブラウザはremと言う単位がわかります。古いブラウザはわかりません。つまり古いブラウザはremがわからないのでそのプロパティを無視します。新しいブラウザはわかるのでpxの指定をremで上書きします。
remが優れているのは、htmlのfont-sizeに対する倍率で指定できる所です。同じような単位でemと言うのがあります。remもemも1文字単位なのですが、emはその親要素に対して大きさが変わります。
ulやolなどの中にある要素にemを指定すると思った以上に大きくなったりします。しかしremはhtmlに対してのサイズなので必ず決まったサイズに指定できます。またwidthも何文字分と言う感じで指定できるのでわかりやすい場合もあります。

これらが可能なのも、cssのプロパティは後から読み込まれたものが適用されると言う特性を利用しているものです。必ずしもではないですが基本こういうルールがあるのを覚えておくと良いかと思います。

Hidekichi様

色々とご指摘と対策案ありがとうございます。
基本がまだまだ足りてなくご迷惑おかけします。

ご提案頂いた内容で以下のようにしたのですが

PCは問題なくCSSがあたっているのですが、
iphoneは「コメント」部分のサイズ指定cssがあたらない。
また、コメン無しの場合には「コメントをどうぞ」部分のサイズ指定cssが外れる
という状況になります。

http://netakiri.net/uploader/src/up0170.gif

※フォントサイズとカラーのcssがあたっているか分かりやすいように
　サイズと色は変えております。

#comments, #reply-title {
font-size: initial;
}
#comments {
font-size: 60px;
color: #0000FF;
}
#reply-title {
font-size: 12px;
color: #ff0000;
}

おそらく、responsive.cssが子テーマstyle.cssより後で読み込まれているため、responsive.cssのメディアクエリが効いているからだと思います。
responsive.cssが直接問題ではなく、そこから読み込まれているnarrow.cssだと思うんですが、cssの読み込み順はこのままでいくか、再考するかはわいひらさんに任せるとして、解決策的には、メディアクエリで該当サイズの時にどうするかを入れるか、!important付きで指定するのが良いかと思います。

「メディアクエリで該当サイズの時にどうするかを入れるか」は、子テーマのresponsive.cssに

@media screen and (max-width: 639px){
  #comments {
    font-size: 60px;
    color: #0000FF;
  }
  #reply-title {
    font-size: 12px;
    color: #ff0000;
  }
}

あるいは、

@media screen and (max-width: 639px){
  #comment-area h2 {
    font-size: initial; /*.replay-title分。ここに直接指定しても良い*/
  }
  #comments {
    font-size: 60px;
    color: #0000FF;
  }
  #reply-title {
    font-size: 12px;
    color: #ff0000;
  }
}

とかでしょうか。これらはchromeのデベロッパーツールでmobileデバイスのエミュレートをすればメディアクエリとかもわかるのでサックリとセレクタがわかります。
要は、該当のresponsive.cssよりも後で上書きするようにセレクタを指定すれば良いので、responsive.cssよりも後で読み込まれるファイルに指定するか、まだ仕様が完全に固まっていないSimplicity2なら、僕なら面倒なのでjQueryで該当箇所のセレクタごと変更します。

サンプル: 中身そのままタグ書き換え簡略版 | jsFiddle

こんな感じでしょうか。それぞれをpタグにして中身はコメントの所は変わらないので直接入力。コメントをどうぞの所はhtmlもあるのでそれを取得しておいてpタグに変え、クラス付け替え。
h2の呪縛から解き放たれ、新しく付けたクラスによって好きにスタイルすることができます。