ステッカー付きヘッドライン一旦開発完了

クラス名

bl_headingWithSticker

マークアップ例

<div class="bl_headingWithSticker">
	<p class="el_sticker">Sticker</p>
	<h2 class="el_heading">ステッカー付きのリッチ？な<br>ヘッドラインです</h2>
</div>
<!-- /.bl_headingWithSticker -->

定義

機能
ステッカーが控えめなアイキャッチになる見出しやコピー

あしらい・振る舞い
テキストと同色の色ベタ塗りのステッカーがあることで目を引く

特記事項
見出し部分はHeading系タグか段落タグを想定

変数とデフォルト値

--el--heading-with-sticker--color: 見出しの文字色、デフォルトはキーカラー
--el--heading-with-sticker--color-sticker: ステッカーの文字色、デフォルトは白
--el--heading-with-sticker--bgc-sticker: ステッカーの背景色、デフォルトは --el--heading-with-sticker--color
--el--heading-with-sticker--fz: 見出しのサイズ、デフォルトは見出しレベル2
--el--heading-with-sticker--eye-catch-fz: ステッカーのフォントサイズ、デフォルトは見出しレベル3

Emmet: .bl_headingWithSticker>p.el_sticker+h2.el_heading

ファイルパス

Change Log

1. 開発開始：2024-03-19
2. 最終更新：2024-03-19