WordPressテーマ Dynamic (TCD009)の見出しを変更する方法。

2014年9月29日2016年6月8日

【PR】世の中の情報メディアは広告により成り立っており、この記事もアフィリエイト広告を含みまくっています。

賢威デザインに飽きた為、

サイトのテンプレートを、TDC製のDynamicに変更しました。

テンプレートデザインは非常に気に入っているものの、

見出し（h3、h4）のデザインが、太字になるだけで使えない。

「見出し3」とかにしても、マジで意味ない。

というわけで、

CSSの知識がほとんど無い私が、

頑張ってTCDデザインの「見出し3、見出し4」のデザインを変更した記録です。

※テーマの編集は自己責任にてお願いします。要バックアップ。

TCDのテーマDynamicの見出しが装飾されない。

ワードプレスで「見出し3」とか、「見出し4」に変更しても、

文字が少し太くなるだけ

見出しのデザインを変更しようと、

「style.CSS」を見てみるも、

TCDテンプレート「Dynamic（TCD009）」の「style.CSS」では、

headerタグ、h1～h6が・・・無い。

代わりに「見出し」という欄がありました。

/***********************************************************
【見出し】 ************************************************************/
.news_headline1{margin:80px 0 25px 0; border-left:8px solid #444; border-bottom:1px dotted #999; line-height:30px; font-size:1.2em;}

「news_headline1」

どうやらこれが、TCDテンプレの見出しを装飾する、コードになる様です。

通常「見出し3」にするのであれば、

とするところを、TCDテンプレでは

と変更することで、見出しが装飾される仕様です。

※この記事の見出しも全て<h3 class=”news_headline1″>となっております。

ただ、TCD初期設定の見出しデザインは・・・イマイチでしたので、

私は少しだけ変更しました。

TCDのテーマDynamicの見出しデザインを変更する。

初期設定の見出しデザイン（news_headline1）は、

文字が左に寄り過ぎ。

よって、左側に少し空間を入れました。

初期値のコード

【見出し】
************************************************************/
.news_headline1{margin:80px 0 25px 0; border-left:8px solid #444; border-bottom:1px dotted #999; line-height:30px; font-size:1.2em;}

装飾のコードが分かりづらいので、改行してみた。

【見出し】
*************************************************************/
.news_headline1{
margin:80px 0 25px 0;
border-left:8px solid #444;
border-bottom:1px dotted #999;
line-height:30px;
font-size:1.2em;
}

初期値だと左に詰め過ぎだったので、padding追加。

【見出し】
*************************************************************/
.news_headline1{
margin:80px 0 25px 0;
border-left:8px solid #444;
border-bottom:1px dotted #999;
line-height:30px;
font-size:1.2em;
padding:0 0 0 15px;
}

で、現在の感じになってます。

TCDのテーマDynamicの見出しデザインを追加する。

ダイナミックの初期設定では、見出しデザインが一個しかなかったので、

h4とか、h5の為に、見出しデザイン追加してみました。

【見出し】
*************************************************************/
.news_headline1{
margin:80px 0 25px 0;
border-left:8px solid #444;
border-bottom:1px dotted #999;
line-height:30px;
font-size:1.2em;
padding:0 0 0 15px;
}

.news_headline2{
margin:40px 0 20px 0;
border-left:6px solid #666;
line-height:26px;
font-size:1.1em;
padding:0 0 0 11px;
}

.news_headline3{
border-top:1px dashed #ccc;
border-right:1px dashed #ccc;
border-left:7px solid #ff1493;
border-bottom:1px dashed #ccc;
padding:.6em .8em
}