UserCSS:文字装飾記法
テスト用
開発終了（もう使わない）
変数定義
code:style.css
:root {
--main-color: DarkGray; /* 主調色 */
--assort-color: White; /* 従属色 */
--base-color: WhiteSmoke; /* 背景色 */
--accent-color: BlueViolet; /* 強調色 */
}
簡単な例
テストだよーーーーーーーーーー
code:stylexx.css
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\!.deco-\. {
background-color: #0f0; /* 背景 */ }
.deco-\!.deco-\+ {
background-color: #00f; /* 背景 */ }
.deco-\!.deco-\- {
background-color: #0ff; /* 背景 */ }
.deco-\!.1 {
background-color: #f0f; /* 背景 */ }
background-color: #00f; /* 背景 */ }
background-color: #f00; /* 背景 */ }
文字装飾記法の上書き
斜体記法[/ ]の変更
テストだよ
code:stylexx.css
.deco-\/ {
text-decoration: none !important;
font-style: normal;
border-bottom: none !important;
}
code:stylexx.css
.deco-\/ {
background-color: red; /* 赤背景 */
font-style: normal;
padding: 0.1em 0.2em 0.1em 0.2em;
}
code:stylexx.css
.deco-\/ {
/* background-color: red; /* 赤背景 */
text-shadow: 0 0 9px hsl(0,100%,30%);/* 赤ぼかし */
/* font-style: normal; /* */
/* font-weight: bold; /* */
padding: 0.1em 0.2em 0.1em 0.2em;
}
code:style.css
.deco-\/ {
/* text-shadow: 1px 1px 1px var(--accent-color); /* */
text-shadow: 1px 1px 1px var(--main-color);
}
打ち消し記法[- ]の変更
テスト テストだよ テストですの
打ち消し線は<strike> で引くので、タグでの修飾を変更する
code:style.css
strike {
text-decoration-line: none;
}
code:stylexx.css
strike {
text-decoration: underline solid red; /* アンダーライン */
}
code:stylexx.css
strike {
text-decoration: line-through solid red; /* 赤色打ち消し線 */
/* text-decoration: line-through double red; /* 赤色打ち消し線 */
}
打ち消し線をborderで表現（ちと苦しい）
code:stylexx.css
strike {
/* border-bottom: none; /* */
border-top: solid 2px pink;/* */
border-bottom: solid 2px pink;/* */
}
打ち消し線を背景のグラデーションで表現
code:stylexx.css
strike {
background: linear-gradient( to bottom,
transparent 30%,
/* red ,*/
pink ,
transparent 70%
);
text-decoration: none; /* */
border: none;
}
code:style.css
strike {
background: linear-gradient( to bottom,
transparent 30%,
var(--main-color) ,
transparent 70%
);
text-decoration: none; /* */
border: none;
}
.deco-\- では、text-decoration: を書き換えることはできないようだ。
（ああ、そういうことか）
code:stylexx.css
.deco-\- {
/* text-decoration: none; /* */
/* text-decoration: line-through solid green; /* 赤色打ち消し線 */
/* text-decoration: line-through double red; /* 赤色打ち消し線 */
text-decoration: underline solid red; /* アンダーライン */
}
文字色と背景色を同じ色にして見えなくする。
マウスオーバーで見える。
code:stylexx.css
.deco-\- {
color: black; /* */
background-color: black; /* */
}
.deco-\-:hover {
color: inherit ; /* */
background-color: inherit ; /* */
}
code:stylexx.css
.line span.deco strike {
color: black; /* 表示色 */
background-color: black; /* 背景色（表示色に合わせる） */
text-decoration: none; /* 取り消し線をキャンセル */
}
.line span.deco strike:hover {
color: inherit; /* 表示色を元に戻す */
background-color: inherit; /* 背景色を元に戻す */
text-decoration: underline solid red; /* アンダーライン（お好みで） */
}
取り消しのとき文字を少し透明に
code:style.css
.deco-\- {
opacity: 0.7;
}
透明に
code:stylexx.css
.deco-\-:not(:hover) {
opacity: 0;
}
.deco-\-:hover {
opacity: 1;
}
code:stylexx.css
.line:not(.cursor-line) a.page-link:not(:hover) {
color: black;
background-color: black;
}
下線記法[_ ]の変更
アンダーラインが消せない、どうして？
（強制的に"text-decoration: underline"のプロパティが追加されているもよう）
テスト テストだよ
アンダーラインを強制的に消す（副作用注意）
code:style.css
.line span.deco span{
text-decoration: none !important; /* */
/* border-bottom: none !important; /* */
/* text-decoration: none; /* */
/* border-bottom: none; /* */
}
アンダーラインをtext-decorationで表現
code:stylexx.css
.deco-\_ {
/* text-decoration: none !important; /* */
/* text-decoration: underline ; /* アンダーライン */
/* text-decoration: underline wavy ; /* アンダーライン */
/* text-decoration: underline solid ; /* アンダーライン */
/* text-decoration: overline solid; /* オーバーライン */
/* text-decoration: line-through solid pink; /* 打ち消し線 */
/* text-decoration-color: pink; /* */
}
アンダーラインをborder-bottomで表現
code:stylexx.css
.deco-\_ {
/* border-bottom: none; /* */
border-bottom: solid 3px pink;/* */
}
アンダーラインを背景のグラデーションで表現
code:stylexx.css
.deco-\_ {
background: linear-gradient(
transparent 65%,
rgba(255,255,40,0.7)
);
}
アンダーラインを背景のグラデーションで表現
code:style.css
.deco-\_ {
background: linear-gradient(
transparent 65%,
var(--main-color)
);
}
b要素（bタグ）の上書き
検索結果のキーワードの強調は、bタグを使っている（ので書き換えてみる）
code:stylexx.css
b {
/*font-weight: normal; /* */
/*background-color: #ee6666 !important; /* 赤背景 */ color: rgba(255,0,0,0.7);
/* background-color: rgba(255,0,0,0.7); /**/
text-decoration: underline;
/* text-decoration-style: wavy; */
text-decoration-style: double;
}
code:style.css
b {
font-weight: normal; /* */
/* font-weight: bold; /* */
color: rgba(255,0,0,0.7);
background: linear-gradient(
transparent 50%, /* */
var(--assort-color) , /* */
var(--accent-color) , /* */
var(--assort-color) /* */
); /* */
/* background-color:rgba(255,255,40,0.7); */
text-decoration: none;
border-bottom: none;
}
拡張文字装飾記法
UserCSS.icon
https://img.shields.io/badge/UserCSS-文字装飾記法-1572B6.svg?logo=css3&style=for-the-badge