おすすめ【2020年版】ワードプレステーマTCDの機能・業種別おすすめランキング
今回はWordPressのテーマヲタクである僕が、TCDの全テーマで使える見出しカスタマイズをご紹介いたします。
ご自身でHTMLを書き換えたりしていない限り、全テーマで使えるはずなので是非使ってみてください。
TCDの全テーマで使える見出し【完成形】
フィリピン人の良妻度を解説の部分がH2見出し
ピンクで一番左に三角の矢印みたいなものがついています。
色は各々で変更することが可能でして、変更の仕方もあとで解説いたします。
見出しH３が |01・〜の部分
まあシンプルで特にとびっきりおしゃれというわけでもないですが、コンテンツを邪魔するほどうるさくなく、サイトに合った色にかえるだけで使いまわせるので僕はこのCSSを重宝しています。
ちなみに、カスタムしなかった場合のTCDオリジナルの見出しタグはこちらです。
味気ないですよね。
これでは読んでる方もメリハリがなくて疲れてしまう。
ということで、見出しタグは必ず装飾しましょう。
NoeLを使って作られたサイトとして参考に是非ご覧ください。
見出しタグのカスタムCSSは以下、コピペOK
こちらをコピペして、ダッシュボード＞外観＞カスタマイズ＞追加CSSに貼り付ければ完成です。
見出しタグ内の色の変更方法を解説します。
01・文字色と背景色の変更
| .post_content h2 { |
| color: #fdfffc; ←文字色 |
| font-weight:bold; |
| position: relative; |
| padding: 0.9em 0.9em ; |
| background: #f95660; ←背景色 |
| margin-bottom:1.5em; |
| } |
「:」と「;」の中に#xxxxxxを入れてください。
HTMLカラーコードなどと検索すれば無限にカラーチャートのサイトがでてきますので、お好きな色をお選びください。
backgroundのカラーについても同様です。
02・h2:afterの三角の色変更も忘れずに
border-top: 15px solid #f95660;
h2の背景色を変えた時に左にある矢印「▼」の色を変更し忘れる方がたまにいますので、こちらも変更してください。
あえて背景色と違う色にするのもありかと思いますが。
TCDブログの文字サイズを変更するCSS
TCDではよく文字サイズの小ささが嘆かれています。
ということで、Googleが推奨している文字サイズ「16px」に変更し、行間もいい感じにまとめたいと思います。
TCDの文字サイズは1行目から4行目まで
1行目から4行目までがフォントのサイズ変更です。
6行目から18行目までは目次のサイズ変更です。
TCDでは基本的に目次のサイズも12~14pxに設定されている場合が多く、文字数を16pxにしたら目次も同じに揃えた方がみやすいです。
ということで、コピペOKですので是非ご利用ください。
まとめ
以上、全テーマで使える見出しCSSのご紹介でした。
この他にもいろいろな見出しCSSがあると思いますが、複雑なものだと年月が経った時に自分でも仕様を忘れていたり、もう面倒になることってあると思います。
特に僕はコードは読めますが、プログラムを組みのは嫌いなので出来るだけシンプルに仕上げておきました。
美しいUIを邪魔しないシンプルな見出しCSS、是非使ってみてください。
