IT

TCDテンプレートテーマの見出しカスタマイズCSSを記事本文のみに適用する使い方

デザインがきれいなテンプレートで定評のある「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を入れただけではうまく行かなかった。。。」

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

関連記事

  1. 公衆無線LANを安全に使う方法やセキュリティ対策は?なりすましの…
  2. 【簡単!】インスタを埋込む方法は?サイズ変更と中央寄せ方法も
  3. kindleの支払い方法変更でクレジット以外(ギフト券等)が…
  4. ゆうちょダイレクトプラスとは?メリットデメリットや違いは?…
  5. WEBビリングと@(アット)ビリングの主な違いは運営会社…
  6. iPhoneへのGmailアプリ導入手順は?アカウント作成も
  7. AAEファイルとはiphoneの写真の編集履歴ファイルのこと!削…
  8. CDの曲をiPhoneに転送するには?PCが無いときは?

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサーリンク

PAGE TOP