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

こんにちはhikeyです。

今回は、WordPressの見出しデザインを変更する方法についてご紹介します。

もしあなたが、新しい見出しデザインを設定する方法を知りたい、または既存の見出しデザインを変更したい人であれば、この記事を参考にしてください。

最後には、WordPressの見出しデザインをよりニーズに合ったものに変更する方法を知ることでしょう。

それでは、続きをご覧ください。

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

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

TCDテーマには見出しタグ（ｈタグ）の初期設定が少ししかありません。

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

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

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

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

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

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

設定場所がわかりましたら以下をコピペします。

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

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

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

HTMLを書き変える

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

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

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

↓

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

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

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

試してみてくださいね。

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

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

ビジネスサイトの見出しデザイン：5つの実例から学ぶ

WordPressの見出しデザインを変更する方法を探っている方に、実際のビジネスサイトの例を参考にしてみましょう。これらの例を通じて、効果的な見出しデザインのアイデアを得ることができます。

シンプルで読みやすい見出し：ソフトバンクビジネスブログ

ソフトバンクビジネスブログの見出しデザインは、シンプルさを重視しています。

• 特徴：
• 黒字に太字
• 適度な文字サイズ
• 余白の活用

このようなデザインは、ビジネス向けコンテンツに適しており、読者の集中力を保ちます。WordPressで見出しデザインを変更する際、このようなシンプルさを意識するのも一つの方法です。

ブランドカラーを活かした見出し：Lidea

Lideaのウェブサイトでは、コーポレートカラーを見出しに取り入れています。

• ポイント：
• ブランドカラーの使用
• 下線やアクセントの追加
• フォントの工夫

ブランドの一貫性を保ちつつ、見出しを目立たせる効果があります。WordPressの見出しデザインを変更する際、自社のブランドカラーを活用するのも良いでしょう。

階層構造が明確な見出し：PINTO!

PINTO!のウェブサイトでは、見出しの階層構造が分かりやすくデザインされています。

このように階層を視覚的に表現することで、読者は記事の構造を理解しやすくなります。WordPressで見出しデザインを変更する際、階層ごとに異なるスタイルを適用するのも効果的です。

インパクトのある見出し：mercan

mercanのウェブサイトでは、大胆な見出しデザインが特徴です。

• 特徴：
• 大きなフォントサイズ
• 背景色の使用
• アイコンや装飾の追加

読者の注目を集めやすく、記事の印象を強めます。ただし、過剰な装飾は逆効果になる可能性もあるので注意が必要です。WordPressで見出しデザインを変更する際は、サイトの全体的なトーンとバランスを取ることが重要です。

アイコンを活用した見出し：北欧、暮らしの道具店

北欧、暮らしの道具店のウェブサイトでは、見出しにアイコンを組み合わせています。

• メリット：
• 視覚的な分かりやすさ
• 記事の内容を直感的に伝える
• デザイン性の向上

アイコンを使用することで、見出しの意味をより明確に伝えることができます。WordPressで見出しデザインを変更する際、プラグインを活用してアイコンを簡単に追加できる方法もあります。

これらの例を参考に、自分のサイトに合った見出しデザインを考えてみましょう。WordPressの見出しデザインを変更する際は、読者にとっての使いやすさと、サイト全体のデザインとの調和を意識することが大切です。

Cocoonで行う場合

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

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

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

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

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

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

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

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