UserCSS:ページタイトル
ページタイトルにいろいろ変更を加える
変数定義
style.css:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
/* 7 ページタイトルのアイキャッチ */
--eye-chacher: url(https://i.gyazo.com/6c9dd76ad4607143ea616014f8a7cfe8.jpg); /* haku */
} stylexx.css .editor .line-title .text {
font-size: 26px;
/* line-height: 1.5; /* */
/* letter-spacing: 0.04em; /* */
font-weight: bold;
border-bottom: solid 2px var(--main-color);
padding-left: 52px; /* */
/* padding-left: 28px; /* */
/* padding-top: 4px; /* */
/* padding-bottom: 5px; /* */
/* margin-bottom: 50px;*/
text-shadow: 1px 1px 0px var(--assort-color), 2px 2px 0px var(--accent-color);
}stylexx.css .editor .line-title .text {
font-size: 24px;
font-weight: bold; /* */
/* border-bottom: solid 2px var(--text-color, #CCC); /* */
padding-left: 52px; /* */
text-shadow: 1px 1px 0px var(--assort-color, #EEE),
1px -1px 0px var(--assort-color, #EEE),
-1px 1px 0px var(--assort-color, #EEE),
-1px -1px 0px var(--assort-color, #EEE),
2px 2px 2px var(--accent-color, #CCC);
}縁取り + 影付き文字
stylexx.css .editor .line-title .text {
font-size: 24px;
font-weight: bold;
border-bottom: solid 2px var(--text-color, #CCC);
padding-left: 52px; /* */
text-shadow: 1px 1px 0px var(--assort-color, #EEE),
1px -1px 0px var(--assort-color, #EEE),
-1px 1px 0px var(--assort-color, #EEE),
-1px -1px 0px var(--assort-color, #EEE),
2px 2px 0px var(--main-color, #CCC);
}砂文字
stylexx.css .editor .line-title .text {
font-size: 24px;
font-weight: bold; /* */
/* border-bottom: solid 2px var(--text-color, #CCC); /* */
padding-left: 52px; /* */
/* text-shadow: 0 0 27px var(--accent-color, red); /* */
text-shadow: 0 0 27px var(--main-color, red); /* */
}縁取り + 砂文字
stylexx.css .editor .line-title .text {
font-size: 24px;
font-weight: bold;
border-bottom: solid 2px var(--text-color, #CCC);
padding-left: 52px; /* */
text-shadow: 1px 1px 0px var(--assort-color, #EEE),
1px -1px 0px var(--assort-color, #EEE),
-1px 1px 0px var(--assort-color, #EEE),
-1px -1px 0px var(--assort-color, #EEE),
0px 0px 27px var(--main-color, #CCC);
}ページタイトルに画像（アイキャッチ）を追加
stylexx.css .editor .line-title::before {
content: ''; /* */
/* content: '😃'; /* */
/*content: '💖'; /* */
/* content: var(--eye-chacher); /* */
display: block;
/*display: inline-block;*/
/*display: inline;*/
width: 1em;
height: 1em;
padding: 25px; /* */
/* width: 26px; /* */
/* height: 26px; /* */
/* padding: 20px;*/
position: absolute; /* */
/* position: right bottom; */
background-image: var(--eye-chacher); /* */
/* background-size: cover; /* */
background-size: contain;
background-repeat: no-repeat; /* */
/* border-style: solid; border-color: red; /* */
border-radius: 4px;
}ページタイトルに画像（アイキャッチ）を追加
style.css .editor .line-title::after {
content: ''; /* */
display: block;
width: 1em;
height: 1em;
padding: 25px; /* */
position: absolute; /* */
background-image: var(--eye-chacher); /* */
background-size: contain;
background-repeat: no-repeat; /* */
border-radius: 4px;
}ページタイトルに絵文字（アイキャッチ）を追加
stylexx.css .editor .line-title::before {
content: '😆';
font-size: 26px;
display: block;
/*display: inline-block;*/
/*display: inline;*/
width: 26px;
height: 26px;
/*padding: 26x;*/
position: absolute;
/* position: right bottom;*/
/*position: left bottom;*/
}style.css .editor .line-title .text {
font-size: 24px;
font-weight: bold;
background: linear-gradient(315deg,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
);
-webkit-background-clip: text; /* */
-webkit-text-fill-color: transparent; /* */
background-clip: text;
color: transparent;
display:inline-block;
}ページタイトルにFontAwesome（アイキャッチ）を追加
stylexx.css .editor .line-title::before {
content: '\f02d';
font-family: FontAwesome;
font-size: 26px;
color: var(--main-color);
display: block;
width: 26px;
height: 26px;
position: absolute;
}