ニコニコ大百科:素材集

4921 ななしのよっしん
2022/05/25(水) 18:43:58 ID: foV50ZeIp/
見出し2 #666633
h2アイコン(#666633)
タイトル:h2アイコン(#666633)
この絵を基にしています!
Twitterで紹介する

4922 ななしのよっしん
2022/05/25(水) 18:47:05 ID: foV50ZeIp/
見出し3 #666633
h3アイコン(#666633)
タイトル:h3アイコン(#666633)
この絵を基にしています!
Twitterで紹介する

4923 ななしのよっしん
2022/05/25(水) 18:50:07 ID: foV50ZeIp/
見出し4 #666633
h4アイコン(#666633)
タイトル:h4アイコン(#666633)
この絵を基にしています!
Twitterで紹介する

4924 ななしのよっしん
2022/05/25(水) 18:53:11 ID: foV50ZeIp/
見出し5 #666633
h5アイコン(#666633)
タイトル:h5アイコン(#666633)
この絵を基にしています!
Twitterで紹介する

4925 ななしのよっしん
2022/05/25(水) 18:56:17 ID: foV50ZeIp/
リスト #666633
liアイコン(#666633)
タイトル:liアイコン(#666633)
この絵を基にしています!
Twitterで紹介する

4926 ななしのよっしん
2022/05/25(水) 18:59:19 ID: foV50ZeIp/
リスト2 #666633
li2アイコン(#666633)
タイトル:li2アイコン(#666633)
この絵を基にしています!
Twitterで紹介する

4927 ななしのよっしん
2022/05/25(水) 19:02:24 ID: foV50ZeIp/
リスト3 #666633
li3アイコン(#666633)
タイトル:li3アイコン(#666633)
この絵を基にしています!
Twitterで紹介する

4928 ななしのよっしん
2022/05/25(水) 19:05:48 ID: foV50ZeIp/
リスト4 #666633
li4アイコン(#666633)
タイトル:li4アイコン(#666633)
この絵を基にしています!
Twitterで紹介する

4929 ななしのよっしん
2022/05/25(水) 23:50:33 ID: AbTSqmFOK3
横からですみませんが、一応グラデ素材は利点がまったくないわけでもないんですよね
VTuberテンプレートボックスを見ればすごくわかりやすいのですが、差し替える場所が最小限で済むので、記事編集初心者の方には向いてます

一方でlinear-gradient素材がなくてもいくらでも調節できるのが強みです 使い方がめちゃくちゃ難しいわけでもないので、欲しい色を調べて打ち込めれば一番確実ですね
4930 ななしのよっしん
2022/05/26(木) 03:03:53 ID: R7orcCrzp6
そもそも連投自体がマナー違反と言われかねない行為なのはご存知ですよね?
今回みたいにレスを押し流してしまいますし

話のっ最中に当事者がやりますと、自分の不利益になるレスを意図的に押し流したとしか認識されません
過去にも同様のことをされていますので故意かもしれませんが、お気をつけ下さい
4931 ななしのよっしん
2022/05/26(木) 18:30:51 ID: foV50ZeIp/
>>4913

これはレスじゃありませんが、こんなレスをつければ流れたとしても戻れますし、そもそも数年前から素材投稿する場で、議論をやろうにも向いていません。

ですが出かけていた最中に思いついていたのですが、「 ニコニコ大百科:素材集ニコニコ大百科関連の再現(+アレンジ素材」を記事として立てて素材をそこで作るとして、ここで議論の続きやりましょうか。
4932 ななしのよっしん
2022/05/27(金) 00:50:39 ID: bffiwSrPrX
まず「ニコニコ大百科:素材集について語るスレ」なのでお絵描きは別にして
素材お絵カキコ投稿する掲示板ではありますが、議論の場でもあります。

>>4929
一長一短はありますが、そもそもお絵カキコの画像を探したりするのも容易ではないだろうし、
路線テンプレートボックス」のように既にlinear-gradientに切り替わっているものもあります。
VTuber系記事も個別の記事ではlinear-gradient使ってたりしますし。

そこでfoV50ZeIp/氏が>>4931で別記事を…と言われていますが、記事を作るなら各テンプレートから参照できるように
linear-gradientお絵カキコ画像を取り扱うテンプレートの「一部のテンプレート」になる記事を作りませんか?

>>4920で示したように画像側の特徴を再現することも可ですし………って、それすら見られてないんじゃ?

そもそも画像を使うならbackground-size: contain;を付与しておかないと環境によってはズレるし。

>>4930で言われているのは>>4931で言うように「他所で好きに描くからそれで」ってことじゃなくて
お絵カキコ全体での素材お絵カキコの立ち位置でもあるんですよ。
4933 ななしのよっしん
2022/05/27(金) 01:07:31 ID: foV50ZeIp/
気持ちは分からんじゃないんですがねグランデーションはお絵カキコ投稿されて作られたものじゃないから素材とは違うんですよ。だから素材系の記事で載せるのはちょっと違うんじゃないかって。
4934 ななしのよっしん
2022/05/27(金) 08:37:01 ID: R7orcCrzp6
まず、議論というよりも、ID:foV50ZeIp/ さんがlinear-gradient仕様を正しく理解できたかどうかの確認が必要です。
かなりの固定観念をお持ちのようですので、ここで確認しなかった場合、また繰り返す可性があります。

>>4931
レスをつければ戻れるとされるのは連投荒らし例えば「2019年5月大百科荒らし事件」なども擁護することになることを理解されていますでしょうか。
また、議論に向かない場にした一因がID:foV50ZeIp/ さんであることぐらいはご自覚ください。
別記事を立ててといった対応ができるのであれば、『ニコニコテレビ君の旗の一覧』などは別記事となっているように、これだけ大量に投稿する前に、最初に個別記事で素材の作成すれば迷惑度は少なく済んでいました。

>>4933
記事の素材と言う点ではお絵カキコだろうがCSSであろうが記事を構成する一部で手段の違いでしかありません。
確かに、普段からlinear-gradientを使っている人からすれば、単純なグラデーションでしかないため、この程度で素材と言うのは鼻で笑われるかもしれません。
当記事で扱うなら記載の仕方次第だと思います。古いやり方としてお絵カキコを使ったものを紹介し、CSSを使ってより美しく表示することもできますよとすれば問題ありません。

>>4932
連投していた見出しやリスト画像についても、透過画像が作れた頃であれば、毎回描かなくてもCSSを組み合わせることで再現できたんですよね。
複数やり方はありますが、例えば抜きで色部分をbackground-color定するものを各種作っておけば、数個の画像だけで大部分をカバーできましたし。
グラデーションについても、半透明白色体で作成していれば、数個の画像で使いまわせましたしね。
当然ながら、画像を探す手間もなくなります。

そもそもの話、大量の見出しアイコンが作られたことにより、当記事内に投稿された素材を探すのも困難な状況に陥っていますし。
必要な素材検索ユーザー記事でまとめている方経由で見つけてみたら、当記事の過去レスの中に記事に反映されないまま埋もれていたということもありましたから…。
4935 ななしのよっしん
2022/05/27(金) 11:33:06 ID: foV50ZeIp/
だったら編集者がいちく反応して記事にも更新していく必要があるのでしょう。
ここ最近は必要なのが大体出ったこともあり頻度が減っているのでちょうどいいですが、もしも作る必要が出てきた場合に上みたいに8つは作ることになりますから。

あとこれ感じたの私だけではないと思いますが、私から見ればR7orcCrzp6さんの方が長文で書くぐらいこだわりすぎであるように見えます。
4936 ななしのよっしん
2022/05/27(金) 11:56:44 ID: bffiwSrPrX
みんな優しいからはっきり言わないだけで
表示箇所に合わせて線形の色変化を持った「画像を生成」するlinear-gradient
お絵カキコで単一のグラデーションさせた素材png画像を作るのでは

優劣をつけるならpng画像の方が固定サイズになるため劣です。

素材お絵カキコをするのがそんなに偉いんですかね?
どうみてもfoV50ZeIp/さんのほうが固執されていると思いますが…。


>>4934
と透過部分使ってアンチエイリアス部分までしっかりやっても>>4832のように埋もれるんですよ。
使い方のテンプレまで用意してても…
4937 ななしのよっしん
2022/05/27(金) 21:19:19 ID: cSRMJQvZ5+
すいません、元々の話の着地点から外れてきてる気がしたので。

元々私が言い出した内容って、
スタイルシートを使えば、お絵カキコを使用せずとも、ソースコードだけグラデーション効果を実現できますよ」(採用するかは別として)
というTIPS解説でしたので…。
上記括弧書きの部分を最初からお伝えしていればよかったですね、すいません。

それを踏まえた後の、テンプレートボックスやパンくずリスト等で用いるグラデーションはどう作るのか、というのは各編集者さんが判断すれば良いかなって思っております。

ここから以降の話は元々の話題とは別の議題になるかと…。
4938 ななしのよっしん
2022/05/28(土) 16:51:43 ID: /1jqhfINQV
自分用
見出し(左)
タイトル:見出し(左)
Twitterで紹介する

4939 ななしのよっしん
2022/05/28(土) 16:55:20 ID: /1jqhfINQV
自分用その2
見出し(右)
タイトル:見出し(右)
この絵を基にしています!
Twitterで紹介する

4940 ななしのよっしん
2022/06/13(月) 07:19:02 ID: bffiwSrPrX
>>4934ID: R7orcCrzp6さんが言っている見出しアイコンのやつを
ID: foV50ZeIp/さんの>>2561の配色パターンベースにして
https://dic.nicovideo.jp/oekaki_id/919926.pngにて描かせてもらいました。

自分がずっとこれ系の使い回せる楽な方法やらなかったのも以前はlinear-gradient使えなかったからで、
楽な方法が使えるならばトコトン楽にしたいなのですよ。このほうが使う側も探し回らなくていいから楽。

使うのに必要なテンプレ部分も向こうにレスしてるので、そっちを参照してください。
4941 ななしのよっしん
2022/06/14(火) 23:54:11 ID: R7orcCrzp6
>>4940
お疲れ様です&ありがとうございます
linear-gradientが使えなかった頃であれば、グラデーション部分も半透明で薄く白色を乗せておく感じでも良かったかもしれないですね。
あとはh3版など作成されるようであれば、ひと段落した時点で当記事や、『ニコニコ大百科:HTMLテンプレート集』の見出しサンプル部分を差し替えても良いかもしれません。
4942 ななしのよっしん
2022/06/15(水) 01:22:25 ID: bffiwSrPrX
描く場所は向こうをお借りしても、素材に関することなので話すのはこちらの方がいいですね。
向こうの掲示板でもレスしましたが一応まとめておくと

1.記事背景色がの場合のみ対応
2.画像が縦長なのは背景の縦位置中央に透過部分として半透明白色を置いていて、
そこに背景色が重なるので中央のアイコン位置のみ色が変わる
3.linear-gradientで2.の背景色を縦の左端から12pxの位置で色を変えているため、
左側(アイコン)は定色、右側はになる。

2はbrによる改行フォントサイズの対策(上下の余計な部分は表示されず常に縦位置の中央がん中にくるため)
3はお絵カキコの最大サイズが600×600のため1000×1000などで横幅全体が覆えるような細工ができないから。
linear-gradientに頼らない方法としてはh2background-colorと<span style="background: white; width: 100%; display: block;">概要</span>で代用できる。
(※その場合は横幅20pxの画像にしないといけない→h2padding-leftとの兼ね合い)

12×12のサイズで作って記事背景色がじゃない場合への対応も可
(この場合はアイコン部分をimg画像として代替したりしないといけないし遅延読み込みで先に色が出てから画像が描画される)

- - - - -
リストアイコンはこの手の方法は理に近い。
h3以下h5まで同一の手法でお絵カキコすれば、見出しアイコンの記事背景色白に関しては全に同じ画像で使いまわせるけど、どうしましょ?
4943 ななしのよっしん
2022/06/23(木) 19:29:45 ID: 4Y/mqpwMwv
pixivとかBOOTHの最新のアイコンほしいなあ…絵師の記事作るときに必要なので。
4944 ななしのよっしん
2022/06/23(木) 19:31:55 ID: 4Y/mqpwMwv
あと作られた素材追加ちゃんとやらないとですね。