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

いくつかの 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モジュールを有効にしてください。

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: #355681;
    background: rgba(53,86,129, 0.8);
    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コードを適用すると、次のように小タイトルスタイルが変わります。 （上記のコードで色などはブログの雰囲気に合わせて適切に変更してください。）

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

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タグとヘディング、メニューなど、様々な要素のスタイルをカスタマイズすることができます。

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

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

参照

• SEOプラグインを使用してSEOに最適化された書き込み
• Avada テーマカスタムフォントを適用する