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

Young people sitting in classroom at lecture

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

 

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

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

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

 

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

 

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

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

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

 

以下はソースコード

 

<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を二重線の見出しタグも簡単です

 

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

 

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

 

 

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

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

 

以下はソース

 

<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>

 

 

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

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

 

以下はソースコード

 

<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>

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

 

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

 

 

個性的な見出しも簡単

以下はソースコード SEO対策のために、タグ配列には注意してください。h1~h5まで、数字を変えれば良いだけです。見出しの文字の大きさはSEOとは関係ありません。h2~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>

 

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

 

関連記事

コメント

    • 【Precious】利用者
    • 2015年 6月 22日

    こんにちは、【Precious】を使っているWordpress初心者です。
    【Precious】で、上記方法ではなく、cssをいじる方法はありますでしょうか?
    ネットで調べたところ、style.cssの【見出し】部分に.news_headline3とか.news_headline4とかで設定し、
    あとは投稿記事で○○○などと記載すれば良いところまで分かりました。
    しかしながら、実際にやってみても上手く表示してくれません。
    何か間違っているのでしょうか?あるいはそもそもcssでは出来ないのでしょうか?
    上記の別ネタで、cssで行う方法をアップしていただけると助かります。

    ついでに、見出しに【Font Awesome】のアイコンを表示しようとしたのですが、上手くできません。
    (アイコン表示できても、文章のフォントが崩れる。)
    併せてそちらもアップして頂けると大変助かります。

  1. この記事へのトラックバックはありません。

ページ上部へ戻る