ヘッダーロゴの画像サイズをカスタマイズ【SWELL】

ヘッダーロゴに画像を設定したけど、上下の余白が気になる。

ヘッダーに対して、もう少しロゴの比率を高めて大きく見せたい。

と、思った時のカスタマイズ方法です。

ロゴの上下の余白を変更する方法

下記のCSSを使用する事で、ロゴの上下余白を調整可能になります。

/* ロゴ */
#body_wrap :is(.l-header__logo, .l-fixHeader__logo, .c-headLogo__link){
	padding-top: 4px;
	padding-bottom: 4px;
}

カスタマイズよりも大きくロゴを設定する方法

ダッシュボード＞カスタマイズ＞ヘッダー＞ヘッダーロゴの設定では、

下記のCSSを使用する事で、上記の制限を無視してロゴのサイズを設定可能になります。

:root{
	--logo_size_sp: 5rem;
    --logo_size_pc: 1rem;
}