• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

FOXWP

WordPressの始め方と使い方をわかりやすく解説!

  • HOME
  • WordPressブログの始め方
  • おすすめテーマ
  • おすすめプラグイン
  • お問い合わせ
FOXWP / WordPressテーマ / テーマカスタマイズ / Stork(ストーク)見出しカスタマイズ|CSSサンプル13個付き

Stork(ストーク)見出しカスタマイズ|CSSサンプル13個付き

2018年5月3日 2020年4月13日

Stork(ストーク)の見出しをカスタマイズする方法を紹介します。

Webサイトでおしゃれな見出しデザインを見つけて、いざ自分のテーマにCSSをコピペしてもデザインが変わらなくて悩んだことはありませんか?

これはテーマによって見出しのデザインを決めるCSSの構成が異なっているため、もともとの設定が優先されてしまって起きてしまいます。

この記事ではストーク専用のCSSを紹介しますので、WordPress初心者の方でもコピペしたらすぐに見出しデザインを変更できます。

紹介するのは使用頻度の高いh2(大見出し)・h3(中見出し)・h4(小見出し)のデザインです。

お気に入りの見出しが見つかったら、CSSをコピペしてご自身のテーマに適用してください。

目次 非表示
1 Stork(ストーク)のテーマカスタマイザーで設定できる見出し
2 Stork(ストーク)の見出しをCSSでカスタマイズする
2.1 シンプルな下線の見出し
2.2 点線の下線の見出し
2.3 破線の下線の見出し
2.4 二重線の下線の見出し
2.5 上下をシンプルな枠線で囲んだ見出し
2.6 上下を破線で囲んだ見出し
2.7 シンプルな枠線で囲んだ見出し
2.8 シンプルな枠線で囲んだ見出し(角丸)
2.9 シンプルな背景色の見出し
2.10 下線付きの背景色の見出し
2.11 左線付きの背景色の見出し
2.12 左線と下線付きの見出し
3 Stork(ストーク)の見出しカスタマイズが変更されない時の対処法

Stork(ストーク)のテーマカスタマイザーで設定できる見出し

CSSでの見出しデザインのカスタマイズを行う前にテーマカスタマイザーで変更できる見出しを確認しておきましょう。

WordPress管理画面のメニューより、外観 ≫ カスタマイズをクリックします。

テーマカスタマイザーを開く

続いて、投稿・固定ページ設定をクリックします。

投稿・固定ページ設定をクリックする

すると見出しデザインの項目が見つかります。

見出しデザインの設定項目

テーマカスタマイザーで設定できる見出しは次の3種類です。

見出しシンプル

シンプル(デフォルト)

見出しボーダー

ボーダー

見出し吹き出し風

吹き出し風

個別に見出しをカスタマイズしたい方は、これから紹介するCSSカスタマイズを行ってください。

Stork(ストーク)の見出しをCSSでカスタマイズする

見出しのデザイン変更に使用できるCSSを紹介します。

テーマのカスタマイズを行う際は、必ず子テーマを作成しておきましょう。そして、子テーマを有効化し、カスタマイズは子テーマで行うようにします。

Stork(ストーク)の子テーマを導入する方法

※注:以下の設定を適用するには、事前にテーマカスタマイザーの見出し設定をシンプル(デフォルト)に設定しておいてください。

シンプルな下線の見出し

シンプルな下線の見出し

.entry-content h2 {
	background: #fff !important;
	color: #1bb4d3 !important;
	padding: 0.4em 0.5em 0.3em;
	font-size: 1.4em;
	border-bottom: 3px solid #1bb4d3;
	border-radius: 0;
	box-shadow: none;
}

.entry-content h3 {
	border-left: none;
	border-bottom: 2px solid #1bb4d3;
	padding: 0.35em 0.7em;
}

.entry-content h4 {
	border-bottom: 1px solid #1bb4d3;
	padding: 0.2em 1em;
}

点線の下線の見出し

点線の下線の見出し

.entry-content h2 {
	background: #fff !important;
	color: #1bb4d3 !important;
	padding: 0.4em 0.5em 0.25em;
	font-size: 1.4em;
	border-bottom: 3px dotted #1bb4d3;
	border-radius: 0;
	box-shadow: none;
}

.entry-content h3 {
	border-left: none;
	border-bottom: 2px dotted #1bb4d3;
	padding: 0.35em 0.7em 0.3em;
}

.entry-content h4 {
	border-bottom: 1px dotted #1bb4d3;
	padding: 0.2em 1em;
}

破線の下線の見出し

破線の下線の見出し

.entry-content h2 {
	background: #fff !important;
	color: #1bb4d3 !important;
	padding: 0.4em 0.5em 0.25em;
	font-size: 1.4em;
	border-bottom: 3px dashed #1bb4d3;
	border-radius: 0;
	box-shadow: none;
}

.entry-content h3 {
	border-left: none;
	border-bottom: 2px dashed #1bb4d3;
	padding: 0.35em 0.7em 0.3em;
}

.entry-content h4 {
	border-bottom: 1px dashed #1bb4d3;
	padding: 0.2em 1em;
}

二重線の下線の見出し

二重線の下線の見出し

.entry-content h2 {
	background: #fff !important;
	color: #1bb4d3 !important;
	padding: 0.4em 0.5em 0.25em;
	font-size: 1.4em;
	border-bottom: 3px double #1bb4d3;
	border-radius: 0;
	box-shadow: none;
}

.entry-content h3 {
	border-left: none;
	border-bottom: 2px double #1bb4d3;
	padding: 0.35em 0.7em 0.3em;
}

.entry-content h4 {
	border-bottom: 1px double #1bb4d3;
	padding: 0.2em 1em;
}

上下をシンプルな枠線で囲んだ見出し

上下をシンプルな枠線で囲んだ見出し

.entry-content h2 {
	background: #fff !important;
	color: #1bb4d3 !important;
	padding: 0.4em 0.5em 0.25em;
	font-size: 1.4em;
	border-bottom: 3px solid #1bb4d3;
	border-top: 3px solid #1bb4d3;
	border-radius: 0;
	box-shadow: none;
}

.entry-content h3 {
	border-left: none;
	border-bottom: 2px solid #1bb4d3;
	border-top: 2px solid #1bb4d3;
	padding: 0.35em 0.7em 0.3em;
}

.entry-content h4 {
	border-bottom: 1px solid #1bb4d3;
	border-top: 1px solid #1bb4d3;
	padding: 0.2em 1em;
}

上下を破線で囲んだ見出し

上下を破線で囲んだ見出し

.entry-content h2 {
	background: #fff !important;
	color: #1bb4d3 !important;
	padding: 0.4em 0.5em 0.25em;
	font-size: 1.4em;
	border-bottom: 3px dashed #1bb4d3;
	border-top: 3px dashed #1bb4d3;
	border-radius: 0;
	box-shadow: none;
}

.entry-content h3 {
	border-left: none;
	border-bottom: 2px dashed #1bb4d3;
	border-top: 2px dashed #1bb4d3;
	padding: 0.35em 0.7em 0.3em;
}

.entry-content h4 {
	border-bottom: 1px dashed #1bb4d3;
	border-top: 1px dashed #1bb4d3;
	padding: 0.2em 1em;
}

シンプルな枠線で囲んだ見出し

シンプルな枠線で囲んだ見出し

.entry-content h2 {
	background: #fff !important;
	color: #1bb4d3 !important;
	padding: 0.5em;
	font-size: 1.4em;
	border: 3px solid #1bb4d3;
	border-radius: 0;
	box-shadow: none;
}

.entry-content h3 {
	border-left: none;
	border: 2px solid #1bb4d3;
	padding: 0.4em;
}

.entry-content h4 {
	border: 1px solid #1bb4d3;
	padding: 0.3em;
}

シンプルな枠線で囲んだ見出し(角丸)

シンプルな枠線で囲んだ見出し(角丸)

.entry-content h2 {
	background: #fff !important;
	color: #1bb4d3 !important;
	padding: 0.5em;
	font-size: 1.4em;
	border: 3px solid #1bb4d3;
	border-radius: 0;
	box-shadow: none;
	border-radius: 8px;
}

.entry-content h3 {
	border-left: none;
	border: 2px solid #1bb4d3;
	padding: 0.4em;
	border-radius: 5px;
}

.entry-content h4 {
	border: 1px solid #1bb4d3;
	padding: 0.3em;
	border-radius: 3px;
}

シンプルな背景色の見出し

シンプルな背景の見出し

.entry-content h2 {
	background: #1bb4d3 !important;
	color: #fff !important;
	box-shadow: none;
}

.entry-content h3 {
	border-left: none;
	background: #1bb4d3;
	color: #fff;
}

.entry-content h4 {
	background: #1bb4d3;
	color: #fff;
	padding: 0.3em 0.8em;
}

下線付きの背景色の見出し

下線付きの背景色の見出し

.entry-content h2 {
	background: #dff2fc !important;
	color: #333 !important;
	border-bottom: 3px solid #1bb4d3;
	box-shadow: none;
	border-radius: 0;
}

.entry-content h3 {
	border-left: none;
	background: #dff2fc;
	border-bottom: 3px solid #1bb4d3;
}

.entry-content h4 {
	background: #dff2fc;
	padding: 0.3em 0.8em;
	border-bottom: 3px solid #1bb4d3;
}

左線付きの背景色の見出し

左線付きの背景色の見出し

.entry-content h2 {
	background: #dff2fc !important;
	color: #333 !important;
	border-left: 3px solid #1bb4d3;
	box-shadow: none;
	border-radius: 0;
}

.entry-content h3 {
	border-left: 3px solid #1bb4d3;
	background: #dff2fc;
}

.entry-content h4 {
	background: #dff2fc;
	padding: 0.3em 0.8em;
	border-left: 3px solid #1bb4d3;
}

左線と下線付きの見出し

左線と下線付きの見出し

.entry-content h2 {
	background: #dff2fc !important;
	color: #333 !important;
	border-left: 3px solid #1bb4d3;
	border-bottom: 3px solid #ddd;
	box-shadow: none;
	border-radius: 0;
}

.entry-content h3 {
	border-left: 3px solid #1bb4d3;
	background: #dff2fc;
	border-bottom: 3px solid #ddd !important;
}

.entry-content h4 {
	background: #dff2fc;
	padding: 0.3em 0.8em;
	border-left: 3px solid #1bb4d3;
	border-bottom: 3px solid #ddd;
}

Stork(ストーク)の見出しカスタマイズが変更されない時の対処法

もし、Stork(ストーク)で見出しカスタマイズが変更が反映されない時は、次の記事を参考にしてください。

Stork(ストーク)で見出しカスタマイズが反映されない時の対処法

原因ごとに対処法を記載しています。

カテゴリー:テーマカスタマイズ タグ:Stork(ストーク)

WordPress初心者の方に読んで欲しい記事

  • あとで後悔しない!WordPress初期設定の基本事項
  • 安全にサイトを運営しよう!WordPressセキュリティ対策の基本マニュアル

おすすめプラグイン

WordPressプラグイン「TablePress」の使い方

WooCommerceの設定方法と使い方

LuckyWP Table of Contentsの使い方と設定方法

【2018年版】コメント機能を改善するおすすめWordPressプラグイン

【2020年版】コメント機能を改善するおすすめWordPressプラグイン

おすすめテーマ

女性向けおしゃれなWordPressブログテーマ特集

【女性向け】おしゃれでかわいいWordPressブログテーマ特集!

おすすめ企業サイト向けWordPressテーマ

さっとクオリティの高い企業サイトを作成できるWordPressテーマ特集

ポートフォリオ向けWordPressテーマ

ポートフォリオ向けWordPressテーマ|魅せるギャラリーが簡単にできる

ブログ・アフィリエイトにおすすめのWordPressテーマ

ブログ・アフィリエイトにおすすめのWordPressテーマ【2019年版】

Previous Post: « Table of Contents Plus(TOC+)で目次が表示されない時の対処法
Next Post: Stork(ストーク)で見出しカスタマイズが反映されない時の対処法 »

Primary Sidebar

当サイトの利用テーマ

Genesis Theme Framework for WordPress
詳しく見る

世界で一番利用されているWordPressテーマ

Divi WordPress Theme
詳しく見る

あなたの悩みは?

WordPress
セキュリティ
WordPress
トラブル
アクセスアップアフィリエイト
おすすめASP

カテゴリー

  • WordPress
    • WordPressのSEO対策
    • WordPressのセキュリティ対策
    • WordPressの使い方
    • エラー・トラブル
    • カスタマイズ
  • WordPressテーマ
    • Divi
    • おすすめテーマ
    • テーマカスタマイズ
  • WordPressプラグイン
    • プラグインカスタマイズ
  • WordPress入門講座
  • WordPress設定関連
  • お役立ち情報
    • メモ
  • アフィリエイト
    • Amazonアフィリエイト
  • ドメインレジストラ
    • お名前.com
  • レンタルサーバー
    • ColorfulBox
    • mixhost
    • さくらのレンタルサーバー
    • エックスサーバー
    • エックスフリー
    • ロリポップ!
  • 便利ツール
    • PBN Lab
    • Rank Tracker
WordPress学習方法
トップページへ

プライバシーポリシー|お問い合わせ
Copyright © 2021 FOXWP All rights reserved.