編集時の画像URL表示をスッキリさせるCSS
https://gyazo.com/38d97965f0220d88516da48d2ad923aa
画像を張り込んでいる行を編集するとき展開された ［ ］の間が分かりにくくなることがよくある (老眼)。
Gyazo 画像URLは長いので編集時に自動改行されて修飾表記の関係が見づらい。
などの画像修飾記法を併用していると、行末・行頭で迷ったり、スペースの挿入場所を誤ったりするので・・・
見た目がスッキリするように表示方法を改めました。
https://gyazo.com/9de90b1155460d829facb866160d2cae
テキストにサイズ感を反映させるリも、 画像URL と 修飾記法 を 分けて表示し、 編集対象を判別しやすくします。
カーソルの移動にクセがあるので、ちょっとコツがいるかも・・・
URL選択は トリプルクリック！
code:style.css
:root {
--My-img-edit-box-size: 130px;
}
.line.cursor-line .image { /* 編集時の画像URL 書式 */
font-family: monospace;
color: red !important;
font-size: 12px;
font-weight: 600 !important;
line-height: 1.7em;
letter-spacing: 0.012em;
font-style:normal;
text-align: center;
margin: 1em 2px !important;
transform: scale(1.02);
position: relative;
display: inline-block;
top: 0;
right: 0;
min-width: var(--My-img-edit-box-size);
width: var(--My-img-edit-box-size);
min-height: var(--My-img-edit-box-size);
height: var(--My-img-edit-box-size);
border: 1px solid var(--My-img-edit-box-color);
vertical-align: middle;
background: white; /* 背景色を白 */
z-index: 1;
}
.line.cursor-line .image :last-child,
.line.cursor-line .image :first-child {
font-size: 150%;
font-weight: 600 !important;
color: var(--My-img-edit-box-color);
letter-spacing: var(--My-img-edit-box-size); /* カギカッコ だけで1行にする */
}
/* 画像以外でも 編集中の修飾表記はこのパターンに統一 ここは お好みで */
color: green !important;
font-size: 18px !important;
font-weight: 600 !important;
font-style:normal;
background: white; /* 重ねて表示するカスタマイズがあるなら背景つぶした方が見やすいかも */
}
さらに追加して・・・
code:style.css
.line.cursor-line .deco::before {
content: "▶ ";
font-size: 0.5em;
}
.line.cursor-line .deco::after {
content: "◀";
font-size: 0.5em;
}
例） ［+ テキスト］で 朱文字にするCSSを使っている。 編集時には赤三角で挟んで区間を強調表示します。
https://gyazo.com/a272908105be67d60bcf31fb088aebce
［ ］の中で修飾記号を全角で入力してしまう（リンク扱いになる）などの誤入力を防止！ （できるといいなぁ・・・）
UserCSS.icon