デザインがきれいなテンプレートで定評のある「TCD」。

ここでも「Core」というテーマでお世話になっています。

しかし見出しデザインがシンプル過ぎてもうひと工夫欲しい。
そう思い、CSSを書き加えて変更することにしました。

ただ、進めている内に一つ問題が発生してしまいます。
サイドバーの見出しやカテゴリーの表示も一緒に変更されてしまいました。

こうしたときにどうしたらいいのか調べてみました。

TCDテンプレートテーマの見出しカスタマイズCSSをサイドバーなどには反映させず、記事本文のみに適用する方法は？

ネットで調べてみると、外観＞カスタマイズ＞「追加CSS」で追加したCSSの「h2」や「h3」の前に「.post」を入れると記事本文のみに適用されるとありました。

具体例は以下です。

.post h3 {
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}

しかし、.postを入れると、今度は本文の見出しも変更前に戻ってしまいます。

情報源のブログでは.postで解決したようですが、テーマによって違うのか、少なくとも当方で使用しているcoreには.postだけでは解決しませんでした。

悩んだ末、重い腰を上げて「問い合わせ」を決断。

TCDの問い合わせ画面を表示するところまで行くと、「問い合わせ前にマニュアルも御覧ください。」とのこと。

なるほど、そういえばマニュアルに書いてありそうな疑問かもしれない。

そう思って、マニュアルを探しました。

結論：「.post」に加えて「_content」が必要だった

マニュアルサイトを開き、さらに「CSS」でサイト内検索。

ありました。

カスタムCSSの設定サンプル

.post_content h3{

下記のように追記する必要があったのです。

.post_content h3 {
position: relative;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
color: #454545;
}

つまり.post h3　だけではだめで、_content　も間に入れないといけないと。

このサンプルの通りに記載したところ、うまく反映されました。

サイドバーやカテゴリー表示はそのままに、本文の見出しのみデザインを変更することが出来ました。

CSSについてはあまり知識がなく、半分諦めていましたが、なんとか解決。。。

まとめ

備忘録を兼ねて、今回当たった問題の解決方法を記載してみました。

もしかしたらCSSの知識がある方からしてみたら当たり前のことかもしれませんが、あまりシステム的な部分をいじりたくない気持ちもあり、CSSは手をつけていませんでした(汗)

今回の事例は「core」の場合ですが、もし他にも「.postを入れただけではうまく行かなかった。。。」

という人がいれば参考にしていただけたらと思います。