h2 { /*線の種類(二重線)太さ 色*/ border-bottom: double 5px #FFC778; }

レッスン

ワードプレスの見出しデザインの変え方。変更したい時の設定方法

こんにちはhikeyです。

本日レッスンにて回答できなかったお悩みで解決方法を見つけましたのでお伝えします。

TCDとCocoonのワードプレスの見出しデザインの変え方です。

TCDテーマには見出しタグ(hタグ)の初期設定がありません

ワードプレスh2タグデザインが無い場合や変更したい時の設定方法をお伝えします。

後半にはCocoonの設定方法もありますのでCocoonの方は下まで飛ばしてください。

TCDの見出しデザインの変え方

「外観」→「TCDテーマオプション」→「カスタムCSS」に記入

まずは「外観」→「TCDテーマオプション」→「カスタムCSS」の場所をチェックしてください。

この場所はテーマによってない場合がありますので、TCDに「サイト全体の追加CSSってどこに入力したらいいの?」と、問い合わせてみてください。

以下をコピペします。

.news_headline1{
margin:80px 0 25px 0;
border-left:8px solid #444;
border-bottom:1px dotted #999;
line-height:30px;
font-size:1.2em;
padding:0 0 0 14px;
}
.news_headline2{
margin:40px 0 20px 0;
border-left:6px solid #666;
line-height:26px;
font-size:1.1em;
padding:0 0 0 12px;
}

今回は「news_headline」という名前にしてありますが、半角英数字ならなんでもOKなので、ご自分の好きな名前に変更してください。

ちなに赤字のところを「サルワカ」のCSSコードに変更すると自分でいろいろ作れます。

「サルワカ」はこちら → サルワカ

HTMLを書き変える

本文編集のタブを「ビジュアル」から「テキスト」に変えます。

本文中のコード①をコード②に変更してください。

コード① <h2>ここに見出し2の文章</h2>

コード② <h2 class="news_headline1">ここに見出し2の文章</h2>

news_headline1は先ほどCSSで設定した英数字に変えてください。

ひょっとしたらHTMLのコードを書き変えなくても、「h2」とか選べばできるかも・・

試してみてくださいね。

詳しくはTCDのホームページで説明されています。

hタグをプラグインで導入する方法とかも記載されているので、お試しください。

Cocoonで行う場合

Cocoonで見出しの設定を変えるのはもっと簡単です。

サルワカのコードを「追加CSS」に貼り付けるだけ。

貼り付けた際に「h1」は次のように変えてくださいね。

見出し1を変更・・・「.article h1」にする。

見出し2を変更・・・「.article h2」にする。

見出し3を変更・・・「.article h3」にする。

見出し4、見出し5も同様です。

以上、「ワードプレスの見出しデザインの変え方。変更したい時の設定方法」でした。

【スノーモンキー】ワードプレステーマのメリット・デメリットは?

こんにちは。hikeyです。 あなたはワードプレスのテーマって何を使用されていますか? 2022年2月現在、ワードプレスのテーマで【スノーモンキー】というワードが上位に来ています。 その【スノーモンキ ...

続きを見る

あなたはワードプレスやブログアフィリエイト、SEOなどでお悩みはありませんか?

hikey PCサポートでは、

  • サイトの集客が上がらない
  • コピーライティングってなに?
  • SEO対策方法が知りたい
  • ホームページが作りたい

などなど、ワードプレスについてのレッスンを中心に行なっています。

今の仕事の収入では将来的に不安な方

定年後に働き口が見つからないと心配な方

一度ご相談ください。

hikey PCサポート

 

 

よろしければ私の姉妹サイトもご覧ください。

hikeyのアニブロ情報局

50歳からのアフィリエイト

健康と食事のつながり

-レッスン