ニコニコ大百科

>>237>>238
今更なんですが、まずHTML・CSSに詳しい人を雇うところから、って感じでしたね
記憶が正しければどちらにも詳しい人がいないとおっしゃってたはずなので
こういうCSSが欲しいと言ってもそりゃ分からないよねと…
あとお絵カキコも「レイヤーは甘え」とおっしゃっていたのも地味にショックでした
ネタかもしれませんがやる気なくしますわ(´・ω・｀)

>>239 もっと簡単な方法は
動画検索から右クリックで「画像アドレスをコピー」

ちなPCのchromeの場合ね 他ブラウザも同様の方法があればできると思うが知らん

>>229-235
>>231で示した例ですがwidthとmax-widthのプロパティの値が逆でした。
今更で申し訳ないのですが

<table style="border: 0; width: 100%;">
<tbody><tr>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul></td>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
<ul>
<li>2-1</li>
<li>2-2</li>
</ul></td>
</tr></tbody>
</table>

でPC版と同じ720px以上横幅のある環境(タブレット端末、スマホ横画面、PC版を含む)では横2列
それ以下の環境では縦並びになるようになります。

>>231で示したパターンだと320pxの横幅の旧iPhone SEなどで横スクロールの発生してしまいます…。

横並びで見せる文章、例えばAとBの会話のようなものも下記のようにtrで区切ることにより
[A-1][B-1]
[A-2][B-2]
の横並びから
[A-1]
[B-1]
[A-2]
[B-2]
の縦並びへと対応させることが可能です。
<table style="border: 0; width: 100%;">
<tbody><tr>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
<p>A-1</p>
</td>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
<p>B-1</p>
</ul></td>
</tr><tr>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
<p>A-2</p>
</td>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
<p>B-2</p>
</td>
</tr>
</tbody>
</table>
tableで組みtdにfloat: left;を付与する利点としては
table自体の枠組みがdivでfloatを使用した場合にありがちな他の編集者によって不意にclear指定が消されてしまい
レイアウトが崩壊するのを防いでくれます。

今回の編集での関連項目の「おすすめ」表記削除について
「おすすめ」項目が多いという意見もごもっともですが、そもそも、テンプレートや関連項目が多過ぎなため最低限どの記事を見たらよいか分からない人用の表記です。
削除するのであれば、関連項目を減らすなど、別の方法での配慮がないと、どの記事に何が書いてあるのか把握していない人は、関連項目を虱潰しにチェックしなければならなくなります。

その辺りまで考えていない編集と思われますので、「掲示板で」ご意見を頂きたいところです。

ところで、「おすすめ」削除だけでなく、今回の編集者自身が作成された偽機能記事を関連項目に追加されています。
これは公式機能では無い偽○○の亜種のため他の編集者を騙すつもりが無いのであれば、偽掲示板などに並べて追記するべきものですので、追記する場所としても不適切です。
編集コメントに関連項目を追加したことの記載も無く、今回の編集者にとって自身が作成した記事へ誘導するのに不都合なので「おすすめ」表記を削除した自分本位の編集に感じました。

関連項目の整理は必要かもしれませんけど、それなら「ニコニコ大百科:グラフ機能」の優先度はだいぶ低そうです。消すのであればその筆頭候補になるでしょうし、残すのであればその他テンプレートへの移設が妥当。
ユーザー記事で本文検索しましたが、備忘録としてグラフ機能のリンク載せているユーザー皆無でしたし、偽グラフを活用している記事もほとんどないのでは？
ちなみに、仕様やスタイルシート活用など他の関連項目にある記事は複数件ヒットしました。

>>245
「おすすめ」表記を追加した本人かどうかで対応が異なりますので、まずはその点を明らかにして下さい。

>>246
仕様変更の予定もあったので積極的に宣伝してこなかったですし、歴史も浅いので当然そうなるかと。

鼻にかけるようなことを言うのは避けたかったのですが、他者からの評価を要求なさるのであれば、ニコニコ大百科:グラフ機能の記事で百ッカデミー賞2021を受賞しておりますので、ユーザーからの評価以上に十分な資格を得ているかと思います。

その他テンプレートへの移設については反対まではしませんのでしていただいて結構ですが、後でテンプレートじゃないと言って消すのはなしにして下さい。

「おすすめ」は多すぎて参考にならないので消してくれて良かったと思います。こういうの、追加する方は何も言われないのに戻すときは文句言われがちなのがすごく疑問。

border-radiusのおかげで、ドラクエのメッセージウィンドウが画像使わずに再現できたので助かる

今テンプレート集を見返してみると、「右上風」「ボタン風」はニコニコ大百科のデザインが変わっちゃったので風化気味かも。
あと「フィルム風」も他と比べてちょっと浮いてる感じがする

更新お疲れ様です。
各サービスはスマホ版からじゃ貼れないから、スマホで発生する記事全体の横スクロール防止なら、
前みたいにtableにしといてtable全体をoverflow: auto;枠で囲うのでもいいかも。

あと「装飾付きの枠」のやつ、自分のユーザー記事にレスあったから画像をborderに置き換えて色変更しやすくしたのあるけど載せ変えておいたほうがいい？

https://dic.nicovideo.jp/b/u/10450913/661-#669

ついでの角丸のやつはスマホ表示とか外側の角丸半径としてはこっちのほうがいいかな。
<div style="background: #000000; border-radius: 1.7em; padding: 1em;">
<div style="background: #ffffff; border-radius: 1em; padding: 1px 5px;">
<p>[本文]</p></div></div>

>>251
「装飾付きの枠」、確かに画像使わなくて済む分、border使ったバージョンのが汎用性高いですね！
というか、装飾付き枠とか角丸とか、他の編集者さんが書かれたサンプルなので変えちゃっても良いか悩みますね

「niconicoの各サービス貼り付け」の項目、他のとフォーマット合わせる形でtable形式から変更しましたけど、ちょっと記事が縦に長くなりすぎたかもですね

装飾付き枠は、吹き出し枠とかと同じように色々な使い方ができるので、
編集の自由度が高くなるように変えてしまってもいいかもしれないですね。
カラーコードだけ変えれば枠の内側も色変えれたりしますし。

各サービスは、他の項目と合わせるのが目的だったら問題ないと思います。

各項目のフォーマット統一化完了しました。お騒がせしました。

>>255
お疲れさまです。統一してあると全体的に見やすいですね。GJです。

「記事の背景色を変更」というのを新しく追加してみました。

応用版のグラデーションの方は、linear-gradientの設定でもっとシンプルにできた気がするんですが、ニコニコ大百科上だとうまく反映されない模様…（そのためdivを連ねる仕様にしました）

お疲れ様です。linear-gradientなら

<div style="background: linear-gradient(to bottom, #ffffff, #99ccff 20%, #99ccff 80%, #ffffff);">
<div style="margin: 0 -10px; padding: 15px 10px; color: #000000;">[記事内容]</div></div>

という形で省略することもできますが、
この方法だとheightが固定サイズじゃないとパーセントでグラデーションする範囲を指定しなきゃいけないのでグラデーションの幅が変わってしまうので………

本来であれば
background: linear-gradient(A), linear-gradient(B), linear-gradient(C);
という形で複数指定する方法とtransparent（透明）を使って

linear-gradient(to bottom, #ffffff, #99ccff 15px, #99ccff 50%, transparent 50%), linear-gradient(to top, #ffffff, #99ccff 15px, #99ccff 50%, transparent 50%);
といった形で上端から15pxのグラデーションと上半分の背景、下端から15pxのグラデーションと下半分の背景のようにすると一括指定できていいのですが、大百科だと
複数指定→×　transparent→×　で使えないので、テンプレで導入された形か

<div style="margin: 0 -10px; background: linear-gradient(to bottom, #ffffff, #99ccff 50px, #99ccff);">
<div style="padding: 65px 10px 15px; color: #000;">
<p style="text-align: center;">背景色：水色　文字色：黒<br>
<img src="/oekaki/887081.png" style="width: 87px; height: 87px;"></p>
</div>
<div style="height: 50px; background: linear-gradient(to bottom,#9cf,#fff);"></div>
</div>
と上端のグラデーションのdivに子要素として[記事内容]と下端のグラデーションのdivを入れてしまうような形しか現実的ではないです…。

子要素にすると同じ部分でも内容枠のpaddingの値を見ればわかりますが、少し複雑になるので現状の形がいいと思います。

別の考え方の方向性としてbox-shadowプロパティでboxに影を付けるのを応用して背景色と同じ色の影をつけてぼかすという方法が考えられます。以下のように

<p>範囲に重なる文字</p>
<div style="box-shadow: 0px -10px 30px 15px #99ccff; margin: 0 -10px;">
<div style="box-shadow: 0px 10px 30px 15px #99ccff; background-color: #99ccff; color: #000000; padding: 0 10px;">
<p style="text-align: center;">背景色：水色　文字色：黒<br>
<img src="/oekaki/887081.png" style="width: 87px; height: 87px;"></p>
</div>
</div>
<p>範囲に重なる文字</p>

とすると上側にぼかしている背景色と同色の影、下側にぼかしている背景色と同色の影の二つを使って同じような効果が得られます。
この場合、記事全体の背景色を指定してある場合でもぼかしによって拡散している影がつくので背景色によって指定を変更する手間はありません。

しかし上下のpタグ「範囲に重なる文字」のように影の部分が独自の領域を持たないことで周囲の文章などに干渉してしまう場合があるので
<div style="padding: 45px 0px;">～</div>
といった形のdivで更に囲って干渉しない領域を確保してあげないといけません………。

ニコニコ大百科でのlinear-gradient複数指定やtransparentの解禁を求む…
transparentの方はborderでも活用したいので解禁してくれないかなあ

>>261
できることの幅が広がるので使えるようになるといいですよねー

ソースコードに変換できる方法を教えてください

>>263
この記事の「ソースコード」に載せる用に、HTMLの文字コードを変換するという意味ですかね？であれば
「<」→「&lt;」
「>」→「&gt;」
上記2文字を置換するだけでいけるかと思います

>>263
記事で紹介するための紹介用のソースコードに変換させたいなら、タグの「<」や「>」を特殊文字に置き換えるので
エディタ無効にした状態でソースをコピーして、有効に切り替えて挿入したい箇所にペーストすると
エディタが勝手に特殊文字に変換してくれるので便利ですよ。

あ、かぶってましたね。すみません。

吹き出しの記事で出てた黒線枠白背景の吹き出し。仮に組んでみただけなのでちょっと微妙かも。
枠線色#000　背景色#fffで既に入れてある状態。
2つある#fff 9.6px,の色と省略してるセリフのtdの背景色は外側
それ以外の#fffは吹き出しの中

<table style="margin: 1em 0.5em;">
<tbody>
<tr>
<td style="border: none; vertical-align: middle;"><img src="[しゃべるキャラクターの画像URL]" /></td>

<td style="border: none; padding-right: 0; vertical-align: middle;">
<div>
<div style="width: 1px; height: 13px; background: #fff; margin-right: -1px; margin-top: 5px; float: right;"></div>
<div style="margin-top: -0px; margin-left: 0px; background: linear-gradient(154deg, #fff 9.6px, #000 10.4px, #000 10.7px, #fff 11.5px); width: 15px; height: 11.4px;"></div>
<div style="margin-top: -0px; margin-left: 0px; background: linear-gradient(26deg, #fff 9.6px, #000 10.4px, #000 10.7px, #fff 11.5px); width: 15px; height: 11.4px;"></div>
</div></td>

<td style="border: none; padding: 0px; vertical-align: middle;">
<div style="border: solid 1px #000; padding: 10px; border-radius: 6px; background: #fff;">
[キャラクターにしゃべらせたいセリフ]
</div></td>
</tr>
</tbody>
</table>

>>267
すごいとしか！
吹き出しの根元の部分をどう再現してるのか、ソースコード読んでもイメージできないっす
「吹き出し」の記事はこれで差し替え、当記事は追加する感じで行きますかね？

>>268
粗を見つけたのでもう少し手直しさせてください。
「吹き出し」の記事はお任せしますが、せっかくオススメにもなったのだし、あの形でいいんじゃないでしょうかね？

簡単に説明するとborderの組み合わせだと、全体が四角のうちの一部を見えるようにしてるので
どう頑張っても再現するのは無理なので線形グラデーションのlinear-gradientを使って
角度と色経由点を調整してグラデーションさせないで線として表示させている感じです。

手直ししました。whiteが記事の背景色、#fffが吹き出し枠内の背景色になってます。

<table style="margin: 1em 0.5em; background: white;"><tbody><tr>
<td style="border: none; vertical-align: middle;"><img src="[しゃべるキャラクターの画像URL]" /></td>

<td style="border: none; padding-right: 0; vertical-align: middle;">
<div style="float: right; margin-right: -1px;">
<div style="margin-top: 1px; margin-right: -0.75px; background: #fff; width: 2px; height: 14px; float: right; border-radius: 8px 0px 0px 8px;"></div>
<div style="margin-top: 0px; margin-left: 0px; background: linear-gradient(154deg, white 6.4px, #000 7.2px, #000 7.6px, #fff 8.2px); width: 16px; height: 7.8px;"></div>
<div style="margin-top: 0px; margin-left: 0px; background: linear-gradient(26deg, white 6.4px, #000 7.2px, #000 7.6px, #fff 8.2px); width: 16px; height: 7.8px;"></div>
</div></td>

<td style="border: none; padding: 0px; vertical-align: middle;">
<div style="border: solid 1px #000; padding: 10px; border-radius: 6px; background: #fff;">
[キャラクターにしゃべらせたいセリフ]
</div></td></tr></tbody></table>