未分類 PR

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

  /
記事内に商品プロモーションを含む場合があります

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

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

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

目次
  1. 方法①　TCDテンプレートについている見出し
  2. 方法②　CSSでカスタマイズ

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

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

tcd1

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

【デザイン①】

<h3 class="news_headline1">見出しデザイン①</h3>

↓

tcd2

 

【デザイン②】

<h3 class="news_headline2">見出しデザイン②</h3>

↓

tcd3

 

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

 

方法②　CSSでカスタマイズ

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

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

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

tcd4

 

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

tcd5

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

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

.post h3{  ….

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

 

ひまりこメルマガ

月収10万円〜100万円達成まで！
主婦さんのブログ実績者多数の
サロン情報も発信中です！
※読者さん限定特典あり！

メルマガでは、4つの動画プレゼント中！

  • ネットビジネスは何から始めたらいいか
  • ネットビジネス未経験だったひまりこが初心者の頃どのような行動をして3ヶ月で手応えを感じ、4ヶ月目で月収10万円達成したのか
  • 50人以上実際に教えて月収10万円から400万円以上稼がせてきたのか

 

教えてきた経験＆事例を存分に盛り込んで稼ぐために、理想のライフスタイルを実現させるために必要なことが学べる内容となっています！＾＾

そして、オンライン講座に登録いただいた感謝を込めて、すぐに学べるプレゼントをご用意いたしました！いずれも動画と文章で解説しています☆

さらには、リアルタイムメルマガでは

  • サロンで実際にどんな活動をしているのか
  • 勉強会の様子
  • メンバーさんの成長の様子

などもお伝えしています！

登録はこちらから！
↓↓

メルマガ登録はこちらをクリック！
RELATED POST