どうも！LSSです！！
以前作成した、水玉デザイナー、少しだけ機能追加しました。
水玉デザイナー
使い方
設定部分を「全体的な設定」と「水玉個別設定」に分けています。
「全体的な設定」でボックス全体の幅や高さ、リピートする枠の幅や高さ、水玉の数、不透過度を調節できます。
「水玉個別設定」では、全体的な設定で指定した「水玉の数」分の、水玉の半径、位置を設定します。
最初にこのページを開いた時点では、水玉の半径は8px、位置は中央（50% 50%）で設定されています。
そして今回の新要素！
「水玉0」などの部分をクリックすると、その下に一行、「#ffffff 白 赤 青 緑 黄 黒」というのが出てきます。
色名をクリックする事で、水玉ごとに色をつける事ができるようになりました^^
※水玉はナンバーの少ない方が手前に表示されます。
色違いの水玉を重ねる時には注意する必要があります。
設定の下に、１枠分の水玉模様と、それをリピート配置したボックスが表示されていて、そのボックスを再現するためのコードが表示されています。
これらは「設定」の内容がリアルタイムに反映されています。
お気に入りの水玉模様が完成したら、「コード」の内容をコピーして、はてなブログのHTML編集画面に貼り付けると利用できますよ^^
作成例
ぱんだちゃんコード
<div style="background-color:lightblue;width:300px;height:200px;background-size:50px 50px;background-image:radial-gradient(circle 3px at 33% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 17% 24%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 20% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 28% 24%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 36% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 13% 15%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 83% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 67% 74%,#000000ff 99%,transparent 0%),radial-gradient(circle 7px at 70% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 7px at 78% 74%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 86% 65%,#000000ff 99%,transparent 0%),radial-gradient(circle 5px at 63% 65%,#000000ff 99%,transparent 0%);"></div>
はにわコード
<div style="background-color:lightblue;width:300px;height:200px;background-size:50px 50px;background-image:radial-gradient(circle 3px at 32% 50%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 50% 50%,#000000ff 99%,transparent 0%),radial-gradient(circle 3px at 41% 66%,#000000ff 99%,transparent 0%),radial-gradient(circle 12px at 41% 53%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 12px at 41% 67%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 12px at 41% 78%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 12px at 41% 90%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 3px at 68% 68%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 3px at 73% 61%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 3px at 73% 51%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 3px at 15% 68%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 3px at 8% 73%,#ffff00ff 99%,transparent 0%),radial-gradient(circle 3px at 8% 83%,#ffff00ff 99%,transparent 0%);"></div>
色を使えるようにはなりましたが
- 色を自由に設定できない（後からコード書き換えによっての変更は可能）
- 背景として使うなら薄い色のほうが良いかも？
など、残念な点が残ります^^;
ただ、それでもがっつり使ってくださっている方もおられ、
後からコード変更するにしても、目印としての色指定があったほうがだいぶ楽かな、と思い、この状態で公開させていただきます^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
