【SWELL】見出しデザインと文字色の変更方法【全26パターン】

当ページのリンクには広告が含まれています。
初心者ブロガー

WordPress側で用意してくれている「コアブロック」の見出しに対してSWELL独自のカスタマイズを加えて使いやすくした「見出しのデザイン」について詳しく教えてほしいです。

こういった疑問にお答えします。

本記事で学べること

  • 見出しデザイン全26パターンが見れる
  • 見出しのデザインカラーの変更方法が分かる
  • 見出しの文字色の変更方法が分かる
本記事の内容

【SWELL】見出しのデザイン全26パターン

見出し2のデザイン

塗り潰し

左に縦線

左に2色のブロック

付箋風

付箋風(ストライプ)

ステッチ

ステッチ(薄)

ふきだし風

上下に線

1文字目にアクセント

装飾なし

見出し3のデザイン

2色の下線(メイン・グレー)

2色の下線(メイン・薄メイン)

下線(メインカラー)

下線(グラデーション)

下線(ストライプ)

左に縦線

左に2色のブロック

装飾なし

見出し4のデザイン

左に縦線

チェックアイコン

装飾なし

セクション用見出し2のデザイン

装飾なし

下に線

左右に線

【SWELL】見出しのデザインカラーと文字色の変更方法

見出しの挿入

管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。

見出しの挿入方法

(ブロック挿入ツールを切り替え)から、「ブロック」>「テキスト」>「見出し」を選択します。

見出しが挿入されました。

セッション用見出しへの変更方法

ブロックツールバーから、(見出し)を選択します。

「セッション用」を選択します。

セッション用見出しに変更されました。

見出しのデザイン設定場所

以下のデザイン設定が行えます。

  • 見出しのデザイン設定
  • セッション用見出しのデザイン設定

ツールバーから、「カスタマイズ」を選択します。

「投稿・固定ページ」を選択します。

「コンテンツのデザイン」を選択します。

下記の赤枠内からデザイン設定が行えます。

見出しのデザインカラー設定

以下のデザインカラーの設定方法を解説します。

  • 見出し
  • セクション用見出し

見出し

見出しのデザインカラー設定は以下から行えます。

  • 「基本カラー」から行う
  • 「コンテンツのデザイン」から行う

「基本カラー」から行う

ツールバーから、「カスタマイズ」を選択します。

「サイト全体設定」を選択します。

「基本カラー」を選択します。

メインカラーを選択すると、見出しのデザイン以外にもメインカラーが反映されます。

「コンテンツのデザイン」から行う

見出しのデザイン設定からキーカラーを選択すると、見出しのデザインのみにキーカラーが反映されます。

セクション用見出し

セッション用見出しのデザインカラーは以下から設定が行えます。

  • 「コンテンツのデザイン」から行う

「基本カラー」から行う

セクション用見出しのデザインにメインカラーは反映されません。

「コンテンツのデザイン」から行う

セッション用見出しのデザイン設定からキーカラーを選択すると、セッション用見出しのデザインのみにキーカラーが反映されます。

見出しの文字色設定

以下の文字色の設定方法を解説します。

  • 見出し
  • セクション用見出し

見出し

基本カラーからテキストカラーを選択後、見出しの文字以外の部分にも色が反映されます。

見出しの文字のみに色を反映させる

ツールバーから、「カスタマイズ」>「追加CSS」を選択します。

以下のコードを追加CSSにコピペ後、カラーコードを入力すると、見出しの文字のみに色が反映されます。


.post_content {
	h2 {
		color: ここにカラーコードを入力します。;
	}
	h3 {
		color: ここにカラーコードを入力します。;
	}
	h4 {
		color: ここにカラーコードを入力します。;
	}
}

セクション用見出し

基本カラーからテキストカラーを選択後、セッション用見出しの文字以外の部分にも色が反映されます。

セッション用見出しの文字と下の線のみに色を反映させる

以下コードを追加CSSにコピペ後、カラーコードを入力すると、セッション用見出しの文字と下の線のみに色が反映されます。


.post_content .is-style-section_ttl {
	color: ここにカラーコードを入力します。;
}

セッション用見出しの文字のみに色を反映させる

下記コードでは、セッション用見出しの文字のみに色が反映されます。


.post_content .is-style-section_ttl {
	color: ここにカラーコードを入力します。;
}

.post_content .is-style-section_ttl::after {
	color: ここに「下の線」の色のカラーコードを入力します。;
}

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
本記事の内容