ＴＣＤテーマの見出しタグの色を変更・装飾する方法

結構質問が来たので、ＴＣＤのワードプレステーマのオシャレな見出しタグの装飾方法を書こうと思います。ネットショップの運営サイトなどで探せば結構見つかるのですが・・・。ＴＣＤでもともと、用意されているタグはシンプルすぎて味気ないですからね(^_^;)

 

とりあえず簡単な方法はテキストモードで見出し装飾タグを直打ちする方法です。ＣＳＳでいじると、私の場合後で忘れてしまうのであまりやらないのです。

今回参考にしたサイトはコチラ

それよりも、メモ帳とかに貼っていつでも呼び寄せるようにすれば良いと思いますし、プラグインが使えれば、投稿画面からボタン一つで以下のようなオシャレすぎる見出しタグを呼び出すことが可能です♪

 

Ｈ３タグをシンプルなカラー見出しタグに変更

 

この辺は色を変えるだけなので教えますね。すごくシンプルです。ちなみに、初めての方は見出しタグの色の変更が分からないと思いますが

これは「＃〇○○○；」の数字を変えることでいくらでも作り変えられます。

カラーコード表があるので変更しましょう

 

以下はソースコード

 

<h3 style=”border-bottom: 1px solid #c85179;border-left: 10px solid #c85179;padding: 7px;”>ここにテキストを入力します</h3>

 

見出しタグをボックスタイプにするのも簡単

 

ボックスタイプの場合も、以下のコードを貼れば簡単です。戦闘のカラーコードと後ろのカラーコードを色違いにしてください。組み合わせは自分のセンスだと思います。

 

以下はソースコード

<h3 style=”border-left: 15px solid #f09199;padding: 7px;background: #efd7d9;”>ここにテキストを入力します</h3>

 

 

Ｈ４を二重線の見出しタグも簡単です

 

今回はＨ４タグの上に線を入れた見出しタグですよ。これもすごく見やすいかな？

 

<h4 style=”border-top: 3px solid #9f166a;box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 0.16);padding: 7px;”>ここにテキストを入力します</h4>

 

 

浮き上がらせてみましたよ

Ｈ５タグを浮き上がらせてみましたよ？文字の大きさはフォントの大きさを変えてくださいね♪

 

以下はソース

 

<h5 style=”padding: 10px;box-shadow: 2px 1px 3px 3px #9f166a;padding: 7px;text-shadow: 1px 1px 3px #000;color: #9f166a;font-size: 18pt;”>ここにテキストを入力します</h5>

 

 

ネットショップならフェルトっぽい見出しタグも良い

どうでしょうか？ＴＣＤテーマを使っている方は、ネットショップの運営のために使っている方も多いですからね？オシャレなフェルト感が出ているし、温かみがでるかもしれません(^_^;)

 

以下はソースコード

 

<h5 style=”background:#f4b3c2;color:#a25768;font-size:18pt;width:80%;border: 2px dashed #e8ecef;border-radius:5px;box-shadow: 0 0 3px 3px #f4b3c2;text-shadow: 0 0 5px;padding:10px;”>ここにテキストを入力します</h5>

ちなみに、見出しタグはあまりゴチャゴチャいじらない方が良いのではないかと思います。特にアドセンスで稼ぎたいのであれば、写真や画像を目立たせすぎるとクリック率が減ります。

 

ネットショップの場合は、商品イメージに合わせてＣＳＳをいじってください

 

 

個性的な見出しも簡単

以下はソースコード　ＳＥＯ対策のために、タグ配列には注意してください。ｈ１～ｈ５まで、数字を変えれば良いだけです。見出しの文字の大きさはＳＥＯとは関係ありません。ｈ２～ｈ５まで上から順番に使ってください

 

<div style=”width:40px;height:70px;background:#ff0000;box-shadow: inset 0px 25px 10px -10px rgba(136, 136, 136, 0.2);margin-left:5px;margin-bottom:0px;margin-bottom:0;”></div><h3 style=”width:80%;height:30px;padding:10px;box-shadow:rgba(110, 110, 110, 0.2) 0px 0px 5px 1px inset;border-radius:6px;color:#888;font-size:16pt;padding-left:50px;margin-top:-70px;margin-bottom:0px;”>★ここにテキストを入力します★</h3><div style=”width: 15px;height: 15px;background: #c9bd6b;box-shadow:inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f;border-radius:45px;margin-top:-32px;margin-left:18px;margin-bottom:30px;”></div><div style=”width:0;height:10px;border-left: 20px solid #ff0000;border-right: 20px solid #ff0000;border-bottom: 15px solid transparent;background:#fff;margin-top:0px;margin-left:5px;margin-bottom:30px;”></div>

 

以上のような見出しタグを一瞬で呼び出す簡単カスタマイズやＳＥＯ対策の深～～い話は、アフィリエイト個別指導をしている会員サイトで公開しています♪