TCDの見出しカスタマイズ!CSSで簡単にする方法!

TCDテンプレートはどれも洗練されていてとても上品なデザインですよね。ただ、気になるところは、見出し。ただ、文字のサイズが大きくなるだけなので、もう少し装飾がほしいところ。そこで、簡単に見出しを装飾できる方法を2通り紹介します。

  • 方法① TCDテンプレートにもともとついている見出し装飾を使う
  • 方法② CSSでカスタマイズ

方法②は、TCD(016)Chillと、(018)Opnionで試したところどちらも変更できました。

方法① TCDテンプレートについている見出し

TCDテンプレートのスタイルシート(style.css)には、【見出し】のデザインが既に組み込まれています。
TCD(018)Opnionの場合はこちら。

tcd1

これらを利用する場合はこんな感じです。

【デザイン①】

tcd2

 

【デザイン②】

tcd3

 

見ての通り、見出しタグにわざわざclass=”news_headline#”と記述しなければいけないので、正直面倒です。また、hタグを使う場合は、classやspanなどはなるべく使わずシンプルにした方がいい、という情報があったのでできたら避けたいです。そこで、次の方法。

 

方法② CSSでカスタマイズ

CSSでカスタマイズする方法は、他のWPテンプレートである賢威の見出しカスタマイズ方法のひとつなのですが、TCDでも使えます。

1.賢威カスタマイズ研究所さんのページより、お好きな見出しタグのコードを取得。

2.外観>テーマ編集>スタイルシート(style.css)の見出し箇所に先ほどのコードを貼り付け、ファイルを更新

tcd4

 

これで、見出し3(h3)を選ぶだけで装飾されます。

tcd5

色を変更したりもできますのでサイトに合わせてカスタマイズしてみてください。

ちなみに、TCD(018)Opinionだと、サイドバーにもh3が組み込まれているようで、サイドバーの見出しも変更されます。。
↓  ↓

.post h3{  ….

と、h3タグの前に「.post」を追加すると記事中の見出し3タグのみ指定できます。

 

LINE@開設しました☆
定期的に無料相談会を開催していきます。

「本当にブログで稼げるの?」
「初心者の私でもブログできる?」
「ブログでなかなかアクセス伸びません><」

など、個別でお答えいたします。

開催はLINEにてお知らせしますので
友達登録しておいてください☆彡

友達登録はこちらから☆

mailmagatouroku

コメントを残す

ブログ収入のやり方をメルマガにてプレゼント中!登録はこちらをクリック!