SWELLのフッタータイトルの装飾を下線（ストライプ）にする

2023年4月6日

SWELLのフッターのタイトルは標準で下記３種類の調整が可能です。

装飾なし
下線（前半太線、後半細線のツートン）
左右に線（タイトルがセンタリングされる）

TOC

SWELLのフッタータイトルの装飾を下線（ストライプ）にする

今回はこの３種類ではなくSWELLの「見出し３」で設定できる「下線（ストライプ）」と同様のデザイン変更します。

基本設定

カスタマイズ＞サイト全体設定＞タイトルデザイン＞フッターのタイトルデザイン

の箇所を「装飾なし」に設定します。

追加するCSS

/*フッターのタイトルをストライプの下線にする*/
.l-footer .c-widget__title{
	margin-bottom:1em;
	padding-bottom:.3em;
}
.l-footer .c-widget__title:before {
	content: "";
	width: 100%;
	height: 4px;
	background: -webkit-linear-gradient(135deg, transparent 25%,var(--color_htag) 25%,var(--color_htag) 50%,transparent 50%,transparent 75%,var(--color_htag) 75%,var(--color_htag));
	background: linear-gradient(135deg, transparent 25%,var(--color_htag) 25%,var(--color_htag) 50%,transparent 50%,transparent 75%,var(--color_htag) 75%,var(--color_htag));
	background-size: 4px 4px;
	opacity: 0.5;
	bottom: 0;
	display: block;
	left: 0;
	position: absolute;
	z-index: 0;
}

これでSWELLの「見出し３」で設定できる「下線（ストライプ）」と同様のデザインに変更できました。

S H A R E