画像に連番を振るuserCSS
iro.iconは正直CSSとかよくわからん素人
ググった情報のツギハギで作った
バグるかも
わかる人に添削して欲しい
概要
↓こんな感じ
https://gyazo.com/8c637d9e91e8f58ad89c771f9349620d
影響元との違い
メリット？
CSSだけでできてる
閲覧者全員に同じスタイルを適用できる
入れ替えたりしても自動で振り直される
本文に影響を与えない
検索にかからない
疑似要素の::afterで挿入しているため
デメリット
逆に言うと本文ではないのでキャプション編集はできない
補足
画像の行にカーソルを合わせる（ブラケットが展開される）とカウントされない
カーソルが外れるとちゃんと振られる
実害はなし
CSS
基本CSS
特に装飾のない骨組みだけ
https://gyazo.com/0c3a19a6cde2cfd08eb286c60090c7b9
conter-incrementというプロパティで図の番号を自動でふっている
その要素が出てくるたびに数字を増やしていく
コレを画像を囲っている.modal-imageの::afterにつっこんだ
<img>とか<br>とか閉じタグがないものには::beforeや::afterは入れれないぽい
code:style.css
body {
counter-reset: img-number;
}
.modal-image::after{
counter-increment:img-number;
content:"図"counter(img-number) ;
}
応用CSS
このページの1枚目の画像のCSS
「画像の上に連番をふる」みたいなそれっぽいのもできる
code:style.css
body {
counter-reset: img-number;
}
.line img{
box-shadow:0px 8px 4px -4px rgba(0,0,0,0.2);
}
.modal-image{
position: relative;
display: inline-block;
}
.modal-image:before{
position: absolute;
display: block;
bottom: 0%;
right: 1%;
color: white;
background: rgba(0,0,0,0.8);
padding: 0.2em ;
counter-increment:img-number;
content:counter(img-number) ;
z-index: 289;
}
やって思ったこと
ただ連番をふると、白背景や透過画像ばかりの時に番号が浮く
画像に枠をつけるなり影をつけるなりしたほうがいいと思った
UserCSS.icon