UserCSS:ページヘッダー
変数定義
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
/* 5 ページのヘッダー画像 */
}
ページヘッダー(画像表示する場合)
code:style.css
.page::before {
display: block;
content: ''; /* */
/*content: '💖'; /* */
width: 1em; /* */
height: 1em; /* */
padding: 48px 80px; /* */
/* width: 72px; /* */
/* height: 48px; /* */
/* padding: 48px 72px; */
/*padding-bottom: 24px;*/
/*position: absolute;*/
/*position: right bottom;*/
position: left top; /* */
/*ここに画像へのリンクを貼る*/
background-image: var(--page-header-image); /* */
background-size: cover;
border-radius: 4px
}
ページヘッダー(テキスト表示する場合)
code:stylexx.css
.page::before {
content: '💖💖 愛は負けても親切は勝つ';
color: var(--main-color); /* 文字色 */
display: block;
margin-bottom: 2rem;
}
https://img.shields.io/badge/CSS3-UserCSS_ページヘッダー-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon