【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: ここに「下の線」の色のカラーコードを入力します。;
}

今回は以上です。