ニコニコ大百科

76×25

同じく仕様変更により
この絵を基にしています！ 記事内参照用URL :

3段目 2番目
36×30
この絵を基にしています！ 記事内参照用URL :

3段目 3番目
36×30
NEW
この絵を基にしています！ 記事内参照用URL :

3段目 4番目
36×30
RENEWAL
この絵を基にしています！ 記事内参照用URL :

3段目 6番目
36×30
RENEWAL
この絵を基にしています！ 記事内参照用URL :

■訂正■
>>664
37×30
>>665
38×30

透過率5%刻みしかないから面倒
記事内参照用URL :

<div style="border: 18px solid #9c6;">
<div style="text-align: left"><img src="https://dic.nicovideo.jp/oekaki/13806.png" alt=" " style="vertical-align: top;" /></div>
<div>
<p>[内容]</p>
</div>
<div style="text-align: right"><img src="https://dic.nicovideo.jp/oekaki/13801.png" alt=" " style="vertical-align: bottom;" /></div>
</div>

>>668

<div style="border: 18px solid #000000; overflow: hidden;">
<div style="border-top: 18px solid #000000; border-right: 18px solid white; width: 0px;"></div>
<div>
<p>[内容]</p>
</div>

<div style="border-bottom: 18px solid #000000; border-left: 18px solid white; width: 0px; float: right;"></div>
</div>

ほい。#000000;のところを好きな色に変えればええで。これで画像使わなくても済む。

>>668 ちなみにテンプレ集のその2のほうだとこんな感じ

<div style="border-bottom: 18px solid #000000; border-left: 18px solid white; background-color: #000000;"></div>
<div style="border: 18px solid #000000; border-top-width: 0; border-bottom-width: 0; overflow: hidden;">
<div style="border-top: 18px solid #000000; border-right: 18px solid white; width: 0px;"></div>
<div>
<p>[内容]</p>
</div>
<div style="border-bottom: 18px solid #000000; border-left: 18px solid white; width: 0px; float: right;"></div>
</div>
<div style="border-top: 18px solid #000000; border-right: 18px solid white;"></div>

なんで俺のユーザー記事のレスで書いてるのか知らんけど、ついでだから角丸の枠も組んどいてあげる。

<div style="background: #000000; border-radius: 1em; padding: 1em;">
<div style="background: #ffffff; border-radius: 1em; padding: 1px 0;">
<p>[本文]</p>
</div>
</div>

(790400.png+790571.png)/2
記事内参照用URL :

(https://dic.nicovideo.jp/oekaki_id/790400.png+https://dic.nicovideo.jp/oekaki_id/790571.png)/2
この絵を基にしています！ 記事内参照用URL :

　透過　　8×4px
非透過　白8×4px
8×8px
記事内参照用URL :

スマホ版のアレ
50×50

記事内参照用URL :

スマホ版のアレ
同じく50×50
この絵を基にしています！ 記事内参照用URL :

スマホ版のアレ
同じく50×50
横並びにするにはpadding 0 border none　table-layout fixed使ってborder-right 1px #d6d6d6 solidにしたtable
集中力切れたからここで一旦終わり
この絵を基にしています！ 記事内参照用URL :

50×50
この絵を基にしています！ 記事内参照用URL :

スマホ版のアレ
50×50
この絵を基にしています！ 記事内参照用URL :

50×50
この絵を基にしています！ 記事内参照用URL :

memo
<h2 style="background-image: url('/oekaki/268945.png'); background-position: right bottom; background-repeat:
no-repeat; border: none; color: #ff35cd; letter-spacing: 0em; max-width: 500px; margin: 10px auto; padding-bottom: 10px; padding-left: 0;">
<span style="display: block; margin-left: 2.5em; margin-right: 3.5em;">作者コミュニティ・ユーザーページ</span></h2>

透過率100% 30×10 縦横比3:1用
記事内参照用URL :

3段目 4番目
36×30
NEW
この絵を基にしています！ 記事内参照用URL :

>>668-671
角を四半円に切り抜くのも追加しとく。

<div style="height: 1em; background: radial-gradient(circle at top left, #ffffff 1em, #cccccc 0);">
<div style="height: 1em; margin-left: 1em; background: radial-gradient(circle at top right, #ffffff 1em, #cccccc 0);"></div>
</div>

<div style="background: #cccccc; margin: -1em 0;">
<div style="margin: 1em 0;">
<p>[本文]</p>
</div>
</div>

<div style="height: 1em; background: radial-gradient(circle at bottom left, #ffffff 1em, #cccccc 0);">
<div style="height: 1em; margin-left: 1em; background: radial-gradient(circle at bottom right, #ffffff 1em, #cccccc 0);"></div>
</div>

「料理の天災」の2列組に関して、スマホ対応を念頭にしているという差し戻しに関しては了解しましたが、
現状Chrome90.0.4430.212、Edge90.0.818.56（いずれもWin10x64）で機能していないようです。
ブラウザ側のバグ、あるいはニコ百側の仕様変更いずれも考えられますので、検証お願いできませんでしょうか？

>>685
Win10 64bit Chrome同最新verにて確認しましたがPCで2列が崩れるといった現象は当方では起きていません。
これは基本的に現在の各ブラウザでのレンダリングに差異が出ない範囲であり、フォントサイズの如何などでも変化するものでもありませんので、
特殊な拡張機能やユーザースクリプトといったユーザースタイルシートを変更するような何かをインストールされていないでしょうか？

また「ニコニコ大百科」の記事の関連項目は2列で表示されていますでしょうか？

お教えいただけませんでしょうか…。

>>686
特にユーザースクリプトやユーザーCSSを組み込んでいるわけでもありませんし、拡張機能も広告ブロックなどを外した状態で改めて確認しても変わりません
「ニコニコ大百科」の記事の関連項目は2列表示になっています
参考になればと思います

>>687
ありがとうございます。
ということはdivで組んでいるところは大丈夫でtableで組んでいるところだけが崩れているんですよね、うーん…

<td style="border: 0; padding: 0; width: 99%; max-width: 350px; float: left;">

で編集画面で表示確認してみてもらえないでしょうか？

初めまして、KS60と申します。

「健康と美容のために、食後に一杯の紅茶」の作成時に、記事変化のテクニックを使用させていただきました。
直接参考にさせていただいた記事の当該編集者様に感謝を伝えたところ、お返事でぎみっくさんが発案されたものということを恥ずかしながら初めて知りまして、遅ればせながらお礼に参った次第です。
ありがとうございました。

>>689
KS60さん、ありがとうございます。
素敵な記事をしっかり拝見させていただきました。

表現するためにソースをいじってCSSで出来ることは、誰がどの記事に使ってもいいですし
遠慮なくどんどん使ってください。

今は不具合でiPhoneなどから正常に表示されなくなっていますが、
不具合が解消された際に表示が変わるような場合には、対策を考えますので、少々お待ちください。