ニコニコ大百科

鶴見線のアイコン
この絵を基にしています！ 記事内参照用URL :

>>4890
お疲れ様です
以下で紹介されているユーザースタイルシートをブラウザに導入すると
HTML5版お絵カキコの拡大時のぼけが無くなってドット絵が描きやすくなりますよ
https://dic.nicovideo.jp/r/u/10450913/3027264

>>4890-4892
素材作成お疲れさまです。
ネ申Excellみたいに1ドットごとの枠線表示するのも作っておいたので使ってみてください。
https://dic.nicovideo.jp/r/u/10450913/3031424#article

>>4893
大変お世話になっております。
HTML5版お絵カキコの拡大時にドットがボケボケになるのを目の当たりにして途方に暮れていました。
ニコニコ大百科:HTML5版お絵カキコヘルプ記事を読み、そこでぎみっくさんのユーザースタイルシート知りました。この存在を知らなかったなら素材作成自体諦めていました。
枠線表示スタイルシートの制作・改良お疲れ様でした。容易にサイズ指定が出来るようになり非常に助かっています。これらのユーザースタイルシートを制作、公開していただき深く感謝しております。今後ともよろしくお願いいたします。

鶴見線 路線記号 30px
記事内参照用URL :

ブルーライン路線記号 B
この絵を基にしています！ 記事内参照用URL :

円の描き方変更
この絵を基にしています！ 記事内参照用URL :

ニューシャトル路線記号
高さ20px　幅23px
記事内参照用URL :

背景色クオリティ　#660066　縦30
この絵を基にしています！ 記事内参照用URL :

今のニコ百はスタイルシートでグラデーション表示できるから、
グラデーション系の画像素材って使わない気がするの。

例えば >>4899 だったら、styleで背景色を指定するところに

background: linear-gradient(#660066,#c580ed,#660066);

みたいな感じで設定すれば、画像を使わずに背景色をグラデーションさせられますよ！

以前から複数の方が同じ指摘をされているんですけどね…

必要になったから投稿したわけなんですが。

あとその色の見出しとリストも必要になったので、しばらくお借りします。

見出し2 #660066
この絵を基にしています！ 記事内参照用URL :

見出し3 #660066
この絵を基にしています！ 記事内参照用URL :

見出し4　#660066
この絵を基にしています！ 記事内参照用URL :

見出し5　#660066
この絵を基にしています！ 記事内参照用URL :

リスト　#660066
この絵を基にしています！ 記事内参照用URL :

リスト2　#660066
この絵を基にしています！ 記事内参照用URL :

リスト3　#660066
この絵を基にしています！ 記事内参照用URL :

リスト4　#660066
この絵を基にしています！ 記事内参照用URL :

素材作成お疲れさまです。
>>4901で言われている通り
background: url(/oekaki/1.png);
の部分をlinear-gradientに置き換えればグラデーション背景の素材お絵カキコをしなくてもグラデーションさせられます。

「INSCRYPTION」の記事などでは線形グラデーション(linear-gradient)を使われていますし

SCP系だと記事によって画像と線形グラデーションの混在しているのを確認できますので参考にされてください。
画像→SCP-096
線形グラデーション→SCP-173

ちなみに、線形グラデーションだと細かなグラデーションの仕方を変えられるので
素材お絵カキコ画像と同じ見た目にできるよ

間違ってなければそれ3色ですよね？私は6色使ってるんですよ。

>>4914
間違ってますね

>>4914
上で挙げてるスタイルシートの構文は↓の通りです。
「linear-gradient(開始色, 途中色, 終了色);」

(1) 開始色〜途中色
(2) 途中色〜終了色
上記(1)と(2)で指定した色と色の間はブラウザ側が自動的にグラデーション表示してくれる、という機能です。

なので表示される色数は6色どころではないです。
これを使えば、6色使った画像を用意しなくても同じかそれ以上のグラデーション表示ができます。

>>4914
6色でも可能ですし、>>4913でも触れている通り色変化の仕方次第で
素材お絵カキコとして描かれた背景色クォリティのように段階分けするのも可能です。

linear-gradientは「線形の色変化を持った画像」を生成するので、色の変化の仕方を設定してやればいいので。

参考用
https://developer.mozilla.org/ja/docs/Web/CSS/gradient/linear-gradient

>>4917の参考用の下の「複数の位置の色経由点があるグラデーション」の色変化をみるとわかるかと思いますが
それぞれ別の色として区切ることも可能です。

作成されている背景色クオリティのように6色で段階分けするなら
11％22％と11％刻みで色を指定してやればいいのです。

>>4914
えぇ…

>>4105 で前にlinear-gradient使えば同様のことができますよとお伝えしても2年以上画像を作り続けてた理由が3色しか使えないという思い込みだとは…
「細かく設定すれば変化の付け方とか色々できます」とも伝えてたんですけど、仕様もレス内容の理解もできていなかったようでとても残念ですね

>>4913 で比較対象に挙げられた記事も見てないようですし、今回もどこまで伝わるのか…

ごめんなさい。>>4918は6色で両端が同じで、行って帰ってになるので11分割の9％刻みでしたね。
訂正いたします。

お詫びに>>4913で出したSCPの記事で使われている>>3746の「背景色クオリティ横（黒・横66）」の例を
テスト記事にて表示してみました。
条件が同じになるように素材お絵カキコの横幅66pxに合わせる形にしてあります。

https://dic.nicovideo.jp/r/a/%E3%83%86%E3%82%B9%E3%83%88%E8%A8%98%E4%BA%8B/3033881
参考用は>>4901さんや>>4105さんが言われている通りのグラデーションです。今回は66pxに合わせているので
30色程度のグラデーションで表示されていると思います。

私も素材を作る側なので、極力手を抜きたいから、一枚でも描かずに済む線形グラデーションを多用しますし、
逆に味があるので上で示した分割を一部のアクセントとして使ってもいいかな？とも思います。