WordPress 小見出しスタイルを変更する（Avada, Enfold, Newspaper テーマ外）

Last Updated: 2024 年 03 月 14 日 37のコメント
無料電子ブック AdSense ウェビナー

いくつかの WordPress テーマで小見出しのフォントサイズ、フォントの色、行間などのスタイルを変更するためのオプションを提供しています。 より自由に小見出しスタイルの変更をご希望の場合、カスタムCSSで変更が可能です。 基本的なCSSを知って簡単にヘディング（h2、h3、h4、h5など）のスタイルを変更することができます。

WordPressでCSSを適用する基本的な方法は、WordPressにCSSを適用する方法「参照してください。基本的なCSSを習得するのにそれほど時間はかかりません。

WordPress 小見出しスタイルを変更する

まず、テーマで小見出しスタイルを変更することができるオプションを提供することを確認してください。 テーマオプションでヘディングスタイルを指定するオプションが提供されていないか、またはより精巧なスタイルを指定したい場合CSSコードでスタイルを変更することができます。

以下の方法を応用して、すべてのテーマでヘディングスタイルを変えることができます。 WordPressだけでなく、寀ーブログは、Googleのブロガーなどでも同様に適用が可能です。

GeneratePress テーマ

GeneratePress テーマの有料版であるGP Premiumがインストールされている場合 ルックス>カスタマイズ> Typography> Headingsで小見出しスタイルを指定することができます。

無料版では、通常、タイポグラフィのオプションが提供されていません。 Typographyメニューが表示されない場合 ルックス> GeneratePressでTypographyモジュールを有効にしてください。

WordPress 小見出しスタイルを変更する - GeneratePress テーマ

Headingsセクションでは、H1からH6までのヘディングスタイルを指定することができます。 指定可能なオプションは、制限があります。 次のようなスタイルを設定することができます。

  • フォントファミリー
  • フォントの太さ
  • テキスト変換
  • Font size（文字サイズ）
  • Line height（行間）
  • Bottom margin（下マージン）

カスタムCSSを使用してスタイルを変更したい場合 ルックス>ユーザー定義>追加CSS セクションには、次のような形式でCSSコードを追加することができます。

/* GeneratePress 테마 소제목 스타일 지정하기 */

h1.entry-title {

// 원하는 스타일
}


.single .entry-content h2 {

// 원하는 스타일
}



.single .entry-content h3 {

// 원하는 스타일
}


.single .entry-content h4 {

// 원하는 스타일
}


.single .entry-content h5 {

// 원하는 스타일
}


.single .entry-content h6 {

// 원하는 스타일
}

Page Heroを使用している場合、H1タグのセレクタ（Selector）が少し異なります。

.single .page-hero h1 { }

たとえば、次は私のブログにしばらくの間使用されたH2、H3、H4スタイルです。

/* WordPress GeneratePress 테마 소제목 헤딩 스타일 변경하기 */

.single .entry-content h2 {
    font-size: 1.3em;
    margin: 1.15em 0 0.6em 0;
    font-weight: normal;
    position: relative;
    text-shadow: 0 -1px rgba(0,0,0,0.6);
    line-height: 40px;
    background: linear-gradient(rgba(53, 86, 129, 0.8), rgba(53, 86, 129, 0.8)), #355681;
    border: 1px solid #fff;
    padding: 5px 15px;
    color: white;
    border-radius: 0 10px 0 10px;
    box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
    font-family: 'Muli', sans-serif;
}


.single .entry-content h3 {
    margin: 1em 0 0.65em 0;
    font-weight: 600;
    font-family: 'Titillium Web', sans-serif;
    position: relative;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-size: 22px;
    line-height: 40px;
    color: #355681;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(53,86,129, 0.3);
}

.single .entry-content h4 {
   padding: 3px 9px;
      border-left: 5px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 15px;
}

上記のCSSコードを適用すると、次のように小タイトルスタイルが変わります。 （上記のコードで色などはブログの雰囲気に合わせて適切に変更してください。）

WordPress 小見出しスタイルを変更する - GeneratePress テーマ

他のテーマでも同じように応用が可能です。 テーマに応じて選択が異なる場合があります。 セレクタ部分だけを確認して変えてくれれば良いです。

Newspaper テーマ

Newspaper テーマの場合 Newspaper > Theme パネル> Theme Fonts > Post titleでブログ記事に使用された小見出しのスタイルを指定することができます。

カスタムCSSコードでスタイルを指定したい場合は、次のようなコードを使用することができます。

/* WordPress Newspaper 테마 소제목 스타일 변경하기 */

.single .td-post-content h2 {

// 스타일
}

.single .td-post-content h3 {

// 스타일
}

.single .td-post-content h4 {

// 스타일
}

.single .td-post-content h5 {

// 스타일
}

"WordPress Newspaper テーマ：小見出し（h2、h3、h4）タグスタイル「で実際の例を確認できます。

Avada

ベストセラーのテーマである Avadaを使用している場合、 Avada > Options>タイポグラフィ> Heading TypographyでH1〜H6ヘディングとポストのタイトルタイポグラフィを設定することができます。 CSSコードでスタイルを指定したい場合は、次のようなコードを使用することができます。

/* Avada 테마의 소제목 스타일 지정하기 */

.post-content h2 {

// 스타일
}


.post-content h3 {

// 스타일
}


.post-content h4 {

// 스타일
}


.post-content h5 {

// 스타일
}


.post-content h6 {

// 스타일
}

Diviテーマ

エレガント ThemesのDiviテーマは Avada テーマに似た販売量を記録しているベストセリングテーマの一つです（」Avada テーマとDiviテーマの比較」を参照）。

Diviテーマでは、次のCSSを使用して小タイトルスタイルを調整できます。

/* Divi 테마의 헤딩 스타일 지정하기 */

.et_pb_post .entry-content h2 { 
// 스타일 
}

.et_pb_post .entry-content h3 { 
// 스타일 
}

.et_pb_post .entry-content h4 { 
// 스타일 
}

.et_pb_post .entry-content h5 { 
// 스타일 
}

上記のコードが機能しない場合は、次のCSSコード形式で試すことができます。

.single .entry-content h2 { 
// 스타일 
}

Enfold テーマ

Enfold テーマの場合 Enfold > Theme Options > Advanced Stylingで、HTMLタグとヘディング、メニューなど、様々な要素のスタイルをカスタマイズすることができます。

WordPress 小見出しスタイルを変更する - Enfold テーマ

カスタムCSSでヘディングスタイルを指定したい場合 GeneratePress テーマで使用されているものと同じCSSコードを使用できます（上記の「GeneratePress テーマ」セクションを参照してください。

フラット島テーマ

WooCommerce用テーマである Flatsomeを使用している場合、 ルックス>カスタマイズ> Style> Typographyでタイポグラフィ関連の設定を行うことができます。 小見出しはHeadlinesでスタイルを指定することができますが、詳細な設定はありません。

小タイトル（ヘディング）スタイルが気に入らないと上記の」GeneratePress 「テーマ」セクションで紹介したCSSコードを適用してスタイルを変更できます。

アストラテーマ

アストラ（Astra）テーマを使用している場合、 外観 > カスタマイズ > グローバル > 文字 セクションで本文フォントとヘディングタグ（H1～H6）のフォント太さ、フォントファミリー（Font Family）、行間隔などを調整でき、 外観 > カスタマイズ > グローバル > 色 セクションで色を設定できます。 色は、すべてのヘッダタグに同じ色を指定できます。

CSSで小タイトルスタイルを指定したい場合は、次のCSSコードを使用できます。

/* Astra 테마 소제목 스타일 지정하기 */

.ast-single-post .entry-title {

// 글 제목 스타일
}


.entry-content h2 {

// 스타일
}


.entry-content h3 {

// 스타일
}


.entry-content h4 {

// 스타일
}


.entry-content h5 {

// 스타일
}


.entry-content h6 {

// 스타일
}

最後に、

以上で WordPressで小見出しスタイルを指定する方法について説明しました。 通常のテーマで提供される基本的なスタイルを使用することが無難なようです。 私はヘディングスタイルを複数回変えたがが、今はシンプルスタイルに変更しました。

他のブログのスタイルをそのまま真似するより運営しているブログの雰囲気に合うように小見出しスタイルを変更することが望まれ見えます。

参照

37のコメント

コメント

  1. H4 borderの設定はJetPack関連のテキストにも適用されますが、JetPack関連の記事には適用されないようにすることはできますか？

    応答

      • ジェットパックに関する記事タイトルクラスに次のCSSコードを適用しました。

        #jp-relatedposts.jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
        パディング：0;
        ボーダー：なし;
        }

        残されたリンクのMozillaドキュメントに記載されている：not（）は、JetPack関連の記事のタイトルクラスにどのように適用するのですか？

        ちょうど私が適用したCSSコードを使用しても大丈夫ですか？

      • h4スタイルを指定しますが、ジェットパック関連の記事タイトル（h4）は除外したい場合は、以下のコードでテストしてください。

        .entry-content h4:not(.jp-relatedposts-post-title){
        // style
        }

  2. 私は最近CSSコードを勉強しているので、興味があります^^; GeneratePress テーマのサブタイトルで.entry-contentの前に必ず.singleを付ける必要がありますか？ .entry-contentというのが.single領域ではなく、他の領域にもあるのですか？

    応答

    • .singleを削除して.entry-contentだけでテストしてください。その後、他の領域に影響がない場合は、.sinlgeを削除しても構いません。 （ページなどに.entry-contentがあるかもしれません。）

      応答

  3. 気になることがあります。 GeneratePress テーマサブタイトルH2はなぜbackgroundコードを2つ入れたのですか？

    応答

      • background: linear-gradient(rgba(53, 86, 129, 0.8), rgba(53, 86, 129, 0.8)), #355681;

        このように適用する

        背景：＃355681;

        このように適用しますが、H2の色が同じですが、元々はグラデーション効果が出なければ正常ですか？

      • CSSの下のコード：

        ``` css
        background: linear-gradient(rgba(53, 86, 129, 0.8), rgba(53, 86, 129, 0.8)), #355681;
        `` `

        このコードの意味は次のとおりです。

        1. **`linear-gradient(rgba(53, 86, 129, 0.8), rgba(53, 86, 129, 0.8))`**:
        - この部分はCSS `linear-gradient`を使用して上から下に同じ色の半透明のグラデーションを生成します。
        - `rgba(53, 86, 129, 0.8)` はカラー値であり、 `rgba` の各パラメータは `(red, green, blue, alpha)` 順で、ここで `alpha` 値 `0.8` は不透明度を（1は完全に不透明、0は完全に透明）。
        - 2つの同じ色が使用され、事実上単色で表示されますが、透明度のある色であるため、背景にある他の要素が少し透けて見えるようになります。

        2. **`, #355681;`**:
        - グラデーションの後ろに「＃355681」の色があります。 CSSでは、カンマ区切りの色は `background`のレイヤーを表します。つまり、最初のレイヤーはグラデーションで、その後にデフォルトの背景色 `#355681`が置かれます。
        - グラデーションが透明な部分を持っている場合、その下のこのモノクロの背景が見えます。

        このコードの全体的な効果は、半透明な単色のグラデーションが適用されたレイヤーが背景色の上に置かれており、背景色と一緒に自然に混ざる様子を演出することになります。

  4. Wordさん 今アップロードしてくれたcssを書いています。小タイトルフォントカラーではなく、背景色を青からグレーに変えたいのですが、どこを変えなければなりませんか？ cssであちこち変えても見えませんね。

    応答

      • デザインだけを実装しました^^;

        #reply-title{
        フォントサイズ：20px。
        font-weight：600;
        文字間隔：1px;
        色：#fff;
        background: linear-gradient(to right,#222 120px,#fff 0%);
        パディング: 7 ピクセル 12 ピクセル 4 ピクセル;
        border-bottom: 2px solid #222;
        線高さ：1;
        }

  7. GeneratePress テーマのサブタイトルのヘディングスタイルH2で青の背景の厚さを調整するには、ラインハイト値に触れる必要がありますか、またはpadding値に触れる必要がありますか？

    応答

  8. こんにちは^^ クオリティの高い情報提供に感謝します。
    上記のCSSで色を変えようとしています。
    小タイトルの文字の色は変更になります。
    上のボックスの色は変わりませんㅜㅜ
    私は何が間違っていますか？
    h2バックグラウンドとh3カラー部分の色を変更しました

    応答

    • こんにちは、ソウン様。 テーマは本文で例として挙げられているテーマの一つですか？
      テーマが異なる場合は、テーマに合わせて適切にCSSコードを適用する必要があります。

      テーマが同じであってもスタイルが適用されない場合は、他の場所からそのスタイルを読み込むことができます。 つまり、優先順位から押されて正しく適用されない可能性があります。 この場合、一時的な方法で!importantを追加してみてください。

      また、キャッシュのため適用されない場合もありますので、キャッシュも削除してください。 （クラウドウェイズの場合 サーバーキャッシュも削除する必要があります。）

      基本的なCSSを習得すれば問題を把握して難しくないように解決できるはずです。

      https://cafe.naver.com/wphomepage/16730

      応答

    • テーマをカスタマイズする必要があるようです。
      Newspaper テーマや GeneratePress などのテーマを使って、好きなようにカスタマイズすることを考えることができると思います。

      エレメンプロを使用する場合には、エレメントの使い方をよく知っていれば、より簡単にカスタマイズできます。

      応答

  13. いつも良い情報ありがとうございます。 私も小タイトルを私のブログの雰囲気に合わせてCSSで適用した後、投稿時にh2でだけ小タイトルを付ければ自動的にスタイルを塗るようにCSS設定になっています。 現在、Wordのサブタイトルスタイルの色はグラデーションですが、これはCSSとしてどのように適用できますか？ 初心者はよくわかりません。

    応答

      • と本当にありがとう。 もう少しグーグルなどをしたら解決した問題なのに、私が急いで質問したような気もしますね。 ㅠㅠいつも良質の投稿ありがとうございます~~

  15. ワード様こんにちは。 質問します。
    私はジェネレートプレスの有料テーマを使用していますが、h2、h3 cssを使用したいのですが適用されません。
    .single .entry-content h2 {このセレクタを使用するように言いましたが、適用されていないので、他のテーマのセレクタを使い果たしても同じです。
    ログインしてカスタマイズする - 追加cssはh2、h3に適用されますが、ログインを出てみると適用されません。 数日間やってみても同じくらい難しいです。

    応答