/suto3/UserCSS:文字装飾記法

generated at 2/17/2025, 1:03:15 PM
UserCSS:文字装飾記法
文字装飾記法 - Scrapbox:文字装飾記法
UserCSS:強調記法
UserCSS:斜体記法
UserCSS:下線記法
UserCSS:打ち消し記法
UserCSS:マーカー記法
UserCSS:引用
UserCSS:朱書き記法
UserCSS:傍点記法
UserCSS:隠し文字記法
テスト用
UserCSS:レインボー記法
UserCSS:赤くなる記法
UserCSS:墨塗り記法 - UserCSS:もんたメソッド
開発終了（もう使わない）
UserCSS:はんこ記法
help-jp - /help-jp/文字装飾記法
forum-jp - /forum-jp/文字装飾記法のHTML表現について
scrapboxlab - /scrapboxlab/文字装飾記法をUserCSSで拡張する

変数定義
style.css :root {
   --main-color: DarkGray;      /* 主調色 */
   --assort-color: White;       /* 従属色 */
   --base-color: WhiteSmoke;    /* 背景色 */
   --accent-color: BlueViolet; /* 強調色 */
}

簡単な例
テストだよーーーーーーーーーー 
stylexx.css.deco-\! {
  color: #fff; /* 白文字 */
  background-color: #ee6666; /* 赤背景 */
  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; /* 背景 */
}

.line [class="deco-\- deco-\!"] {
  background-color: #00f; /* 背景 */
}
.line [class="deco-\! deco-\-"] {
  background-color: #f00; /* 背景 */
}

文字装飾記法の上書き
斜体記法 [/ ] の変更
テストだよ
stylexx.css.deco-\/ {
  /* color: #ee6666; /* 赤 */
  text-decoration: none !important;
  font-style: normal;
  border-bottom: none !important;
}

stylexx.css.deco-\/ {
  color: #fff; /* 白文字 */
  background-color: red; /* 赤背景 */
  font-style: normal;
  padding: 0.1em 0.2em 0.1em 0.2em;
}

stylexx.css.deco-\/ {
  color: #fff; /* 白文字 */
  /* 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;
}

style.css.deco-\/ {
  /* text-shadow: 1px 1px 1px var(--accent-color); /* */
  text-shadow: 1px 1px 1px var(--main-color);
}

打ち消し記法 [- ] の変更
テスト テストだよ テストですの

打ち消し線は <strike>  で引くので、タグでの修飾を変更する
style.cssstrike {
  text-decoration-line: none;
}

stylexx.cssstrike {
  text-decoration: underline solid red; /* アンダーライン */
}

stylexx.cssstrike {
  text-decoration: line-through solid red; /* 赤色打ち消し線 */
  /* text-decoration: line-through double red; /* 赤色打ち消し線 */
}

打ち消し線をborderで表現（ちと苦しい）
stylexx.cssstrike {
  /* border-bottom: none; /* */
  border-top: solid 2px pink;/* */
  border-bottom: solid 2px pink;/* */
}

打ち消し線を背景のグラデーションで表現
stylexx.cssstrike {
  background: linear-gradient( to bottom,
    transparent 30%,
    /* red ,*/
    pink ,
    transparent 70%                                  
  );
  text-decoration: none; /* */
  border: none;
}

style.cssstrike {
  background: linear-gradient( to bottom,
    transparent 30%,
    var(--main-color) ,
    transparent 70%                                  
  );
  text-decoration: none; /* */
  border: none;
}

.deco-\- では、text-decoration: を書き換えることはできないようだ。
（ああ、そういうことか）
stylexx.css.deco-\- {
  /* text-decoration: none; /* */
  /* text-decoration: line-through solid green; /* 赤色打ち消し線 */
  /* text-decoration: line-through double red; /* 赤色打ち消し線 */
  text-decoration: underline solid red; /* アンダーライン */
}

文字色と背景色を同じ色にして見えなくする。
マウスオーバーで見える。
stylexx.css.deco-\- {
  color: black; /*  */
  background-color: black; /*  */
}
.deco-\-:hover {
  color: inherit ; /*  */
  background-color: inherit ; /*  */
}

→ UserCSS:墨塗り記法
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; /* アンダーライン（お好みで） */
} 

取り消しのとき文字を少し透明に
style.css.deco-\- {
	opacity: 0.7;
}

透明に
stylexx.css.deco-\-:not(:hover) {
	opacity: 0;
}
.deco-\-:hover {
	opacity: 1;
}

stylexx.css.line:not(.cursor-line) a.page-link:not(:hover) {
  color: black;
  background-color: black;
}


下線記法 [_ ] の変更

アンダーラインが消せない、どうして？
（強制的に"text-decoration: underline"のプロパティが追加されているもよう）
テスト      テストだよ  

アンダーラインを強制的に消す（副作用注意）
style.css.line span.deco span{
  /*color: #ee6666; /* 赤 */
  text-decoration: none !important; /* */
  /* border-bottom: none !important; /* */
  /* text-decoration: none; /* */
  /* border-bottom: none; /* */
}

アンダーラインをtext-decorationで表現
stylexx.css.deco-\_ {
  /* color: #ee6666; /* 赤 */
  /* background-color: #ee6666; /* 赤 */
  /* 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で表現
stylexx.css.deco-\_ {
  /* border-bottom: none; /* */
  border-bottom: solid 3px pink;/* */
}

アンダーラインを背景のグラデーションで表現
stylexx.css.deco-\_ {
  background: linear-gradient(
    transparent 65%,
    rgba(255,255,40,0.7)
  );
}
アンダーラインを背景のグラデーションで表現
style.css.deco-\_ {
  background: linear-gradient(
    transparent 65%,
    var(--main-color)
  );
}

b要素（bタグ）の上書き
検索結果のキーワードの強調は、bタグを使っている（ので書き換えてみる）
stylexx.cssb {
  /*font-weight: normal; /* */
  /* color: #ee6666; /* 赤 */
  /*color: #fff; /* 白文字 */
  /*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;
}

style.cssb { 
  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:拡張文字装飾記法
UserCSS:赤くなる記法
UserCSS:傍点記法
UserCSS:隠し文字記法
UserCSS:レインボー記法
UserCSS:墨塗り記法 UserCSS:もんたメソッド
UserCSS:吹き出し記法
UserCSS:はんこ記法
UserCSS:朱書き記法
CSS3:クラス
UserCSS:文字装飾