h2の色がなぜかかわりません。。

h2には色がついてなくて、h2 aに色がついてるんじゃなかろうかと思います。実際はh2にも色がもちろんついているわけですが、aタグの方が目的のテキストにより近いので優先されます。

これはカスタムの具合で色々変わる部分なので、よろしさんのサイトがどうなのかは見ないと何とも言えませんがデフォルトではおそらくaに色がついてるかと思います。

個人的には、

<a href="#">
  <h2></h2>
</a>

このような構造の方がh2のエリアでクリックが反応するので良いかぁと思うんですが、Simplicityは、

<h2>
  <a href="#">何かしらのテキスト</a>
</h2>

となっているかと思います。aとh2を別で何かする場合は良いのかもしれないんですが、反応エリアが文字のみになります。

サンプル: マウスオーバーした子要素の背景を変える | jsFiddle

上記のサンプルはどういうものかと言いますと、aタグをマウスオーバーした時にその子要素の背景の色を変えると言うものです。
ここからもわかりますし、単純にマウスを操作してそのカーソルのポインタが変化することでもわかってもらえると思うんですが(pcの場合)、h2のエリア全体が反応しているのと、文字をマウスオーバーしないと反応しないと言う違い、またその範囲の話だったりします。

またcssを見てもらえれば理解して頂けると思うんですが、h2にcolorを設定した時、aタグの中にh2がある場合は、テキストに色が付きます。
h2 aの方は、h2に色の設定があるにも関わらずaが優先されてしまうのでa:link(ブラウザデフォルトの青)の色になってしまいます。
これらは、cssが後から設定されているものが優先と言うルールだからこそなんだろうと思うわけです。

個人的な見解ですけれども、aタグはリンクを貼るための機能だけを入れておき、色情報は他のタグに任せる方がわかりやすくなるのではないかなぁと思ったりもします。aのプロパティはtext-decoration: none;だけで良いのです(笑)
border-bottomでも、アンダーライン入れられますし、ここがリンクですと言うクラスを作って、そこにtext-decoration: underlineなりを入れれば良いのですから、ぶっちゃけるとaタグにアンダーラインや色は本来必要ないのです。つけとけば便利な場合もあったりしますが、それはもう過去の話です。

aタグでh2を囲むか、h2でaタグを入れるかの違いでしか無いのですが、リンクの範囲が広がれば(タイトルをクリックして記事を表示と言う場合)、誤タップも減るでしょうし、simplicityのデフォルトの構成で、タイトルの文字が長い場合はそれだけエリアが広がることになるんですけれども、短いタイトルの場合は範囲が狭くなるデメリットもあります。

仮に、3列や2列にした場合にデフォルトの時と比べてタイトルのフォントサイズが小さくなると思います。小さくなればそれだけ反応するエリアが狭まると言う事にもなりますし、PCの場合はカーソルを操作するのでポインタが変わることで反応エリアが推測できますが、スマホなどの場合はカーソルがないので、だいたいそのあたりをクリックすれば反応するように考慮するのが良いのではないかなぁと思ったりします。

ここらはわいひらさん次第ですけどね。ただ直すとなると、cssもそうですが、修正箇所が多すぎてたぶんすぐにはできないと思うので、各々でカスタマイズしていく感じになるでしょうね。

あ、バックグラウンドの色か(汗)

h2って使ってる所はリストのタイトルぐらいかと思って脊髄反射してしもた(笑)
バックグラウンドの色は普通に変わりますね。なんで変わらないんでしょうな。
他の要因が上書きしてたりするんですかね。プラグインとか、jqueryのプラグインとかその他諸々。

皆様、いつもお世話になっております。

!important;を付け加えてみたら色が変わりました。

.article h2 {
background: #a0bf6d !important;
color: #fff;
padding: 12px 0px 12px 14px ;
border-left: none;
box-shadow: 0 2px 5px #999;
}

解決しました。
Hidekichiさま、わいひらさま、いつもご面倒をおかけして本当に申し訳ございません。

そしてまた、何かありましたらよろしくお願いいたします。

本当にありがとうございました。

よろし