ニコニコ大百科:HTMLテンプレート集とは、大百科を編集する際に役に立ちそうなテクニックを集めた記事である。
【注意】
あくまで大百科の編集用のテンプレートです。大百科以外ではもっと便利なタグが使える場合があります。大百科以外では一般的な記述ではない場合があります。ベタ書きだとメンテナンス性が損なわれやすいです。
編集者がよく使う記述やテクニックの共有を目的としています。使う場所が限られるテクニックについてはあまり記載されていません。皆様のテンプレートを追加してください。
デフォルトのフォントがMS ゴシックではない環境ではAAの表示が崩れるため、以下のような記述をする必要がある。編集する際、style属性が自動的に消去されてしまうことがあるが、何度か編集し直せば使えるようになる。
スマホ環境までは考慮されていないので過信は禁物。
閲覧環境によるフォントの違いによるレイアウト崩れを軽減するために使用する場合もある。
<p style="font-size: 16px; line-height: 18px; font-family: 'Mona','IPAMonaPGothic','IPA モナー Pゴシック','MS PGothic AA','MS PGothic','MS Pゴシック',sans-serif;">
[ここにアスキーアート]
</p>
,────ヽ
∞ ∞ )
/ 凵凵凵凵 .| /
| | の の | | |
ノ ( ワ レ′し
 ̄/| ̄ ̄ ̄ ̄\ ̄
/ .| |) )
し| ε/
.| | スッ
| /⌒ヽ .|
表のセルにリンクをたくさん詰め込む場合とかに活用。レイアウトが崩れてしまうと困る場合など、最小限の利用にとどめること。
<a href="[URL]" style="background-image: none;">[リンク文章]</a>
ソースコードや出力結果の表示など、地の文から分離してそれと分かるように表示させる時に便利。ソースコード以外のものを表示するときは<div>や<p>に差し替えて<code></code>を削除するとよい。
誰得情報だが、プログラムによる出力であることを示す<samp></samp>や入力を示す<kbd></kbd>というタグもある。
<pre style="margin: 1em 30px; padding: 1em; overflow: auto; border: 1px solid #333333; color: #000;">
<code>[内容]</code>
</pre>
<pre style="margin: 1em 30px; padding: 1em; overflow: auto; border: 1px solid #ff9966; color: #000;">
<code>[内容]</code>
</pre>
<pre style="margin: 1em 30px; padding: 1em; overflow: auto; border: 1px solid #8cc700; color: #000;">
<code>[内容]</code>
</pre>
<pre style="margin: 1em 30px; padding: 1em; overflow: auto; border: 1px solid #99ccff; color: #000;">
<code>[内容]</code>
</pre>
見出しに画像を使ったり、線の色を変えるなど少し凝ったデザインにすることができる。<h3>や<h4>にも使えるが、見出しのランクごとにデザインを変更する等して見やすくしておこう。スマホ版では仕様の違いにより表示が崩れるため、<h3>などの見出しタグを使わない場合もある。
ただし、見出しを変更することで逆に見づらくなったり、他の編集者が扱いづらくなることがあるので、自己満足に終わらないよう配慮すること。
<h3 style="background-image: url(/oekaki/22700.png);background-repeat: no-repeat; border-bottom: #c33 double medium; border-top: #ffc819 dotted 2px; padding: 10px 0 0 40px;">[内容]</h3>
<h3 style="background-image: none; background-color: #e6e6fa; border-top: ridge 10px #d3d3e5; border-right: groove 15px #d3d3e5; border-bottom: groove 10px #d3d3e5; border-left:ridge 15px #d3d3e5; padding-left: 10px;">[内容]</h3>
<h3 style="background-image: url('https://dic.nicovideo.jp/oekaki/110538.png'); background-repeat: no-repeat; border-bottom: #000 solid thin;">[内容]</h3>
プロパティ | 意味 | 要素・値 | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
border-bottom:x y z | 見出しの下側に境界線を引く | x = 色の指定 y = 線の種類を指定
thick(太い)、medium(普通)、thin(細い)、またはpxで数値指定 |
||||||||||||||||
border-top:x y z | 見出しの上側に境界線を引く | |||||||||||||||||
border-left:x y z | 見出しの左側に境界線を引く | |||||||||||||||||
border-right:x y z | 見出しの右側に境界線を引く | |||||||||||||||||
background-image: | 見出しのアイコン画像を指定 | url(/oekaki/xxx.png) xxx=アイコン画像のID |
||||||||||||||||
background-repeat: | アイコン画像を繰り返す 省略すると繰り返さないが、 一部ブラウザやスマホ版では繰り返してしまう |
画像の繰り返し
|
||||||||||||||||
padding-left:x | 文字の左側の余白を指定 | 使用画像の横幅によって変更 画像の幅が32pxの場合 x=40px デフォルトと同サイズの場合は不要 |
||||||||||||||||
大百科のデフォルト設定は [h2~h4] padding-left: 20px; [h5] padding-left: 18px; |
||||||||||||||||||
padding:w x y z | 文字の余白を指定 罫線との間隔を調整する |
w=上 x=右 y=下 z=左 上部、下部など個別指定も可能 |
<div style="border: 18px solid [枠の色]; overflow: hidden;">
<div style="border-top: 18px solid [枠の色]; border-right: 18px solid white; width: 0px;"></div>
<div>
<p>[内容]</p>
</div>
<div style="border-bottom: 18px solid [枠の色]; border-left: 18px solid white; width: 0px; float: right;"></div>
</div>
<div style="border-bottom: 18px solid [枠の色]; border-left: 18px solid white; background-color: [枠の色]; height: 0px;"></div>
<div style="border: 18px solid [枠の色]; border-top-width: 0; border-bottom-width: 0; overflow: hidden;">
<div style="border-top: 18px solid [枠の色]; border-right: 18px solid white; width: 0px;"></div>
<div>
<p>[内容]</p>
</div>
<div style="border-bottom: 18px solid [枠の色]; border-left: 18px solid white; width: 0px; float: right;"></div>
</div>
<div style="border-top: 18px solid [枠の色]; border-right: 18px solid white;"></div>
四隅の角を丸くした色付きボックス。記事中のアクセントに。border-radiusの数値で角丸のサイズを調整できる。
<div style="background: [背景色]; border-radius: [数値]; margin: 1em; padding: 1em;"><p>[本文]</p></div>
[本文]
[本文]
[本文]
角丸を応用して丸や楕円を作ることができる。リンクのボタンなどに。応用としてborder-radiusを画像に対して使用することもできる。
<div style="background: #fc9; border-radius: 50px; width: 100px; height: 100px; line-height: 100px; text-align: center; margin: auto;">[内容]</div>
<div style="background: #fc9; border-radius: 50px / 25px; width: 100px; height: 50px; line-height: 50px; text-align: center; margin: auto;">[内容]</div>
<div style="background: #fc9; border-radius: 25px / 50px; width: 50px; height: 100px; line-height: 100px; text-align: center; margin: auto;">[内容]</div>
項目が多くなったときtableで2,3列にしたほうが記事が短くスッキリする。単純に枠を無くしたい場合、<td>を<td style="border: none;">にすれば良い。
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 50%; border: none;">
<ul>
<li>[内容]</li>
<li>[内容]</li>
<li>[内容]</li>
</ul>
</td>
<td style="width: 50%; border: none;">
<ul>
<li>[内容]</li>
<li>[内容]</li>
<li>[内容]</li>
</ul>
</td>
</tr>
</tbody>
</table>
一覧ページでよく使う感じのアレ。<th>を使う人が少なすぎてげんなり。
<table style="width: 100%;">
<colgroup span="3" style="width: 33%;"></colgroup>
<tbody>
<tr style="text-align: center;">
<th>ア行</th>
<th>カ行</th>
<th>サ行</th>
</tr>
<tr>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
</tr>
<tr style="text-align: center;">
<th>タ行</th>
<th>ナ行</th>
<th>ハ行</th>
</tr>
<tr>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
</tr>
<tr style="text-align: center;">
<th>マ行</th>
<th>ヤ行</th>
<th>ラ行</th>
</tr>
<tr>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
</tr>
<tr style="text-align: center;">
<th>ワ行</th>
<th>その他</th>
<th></th>
</tr>
<tr>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
<td>
<ul>
<li>[内容]</li>
</ul>
</td>
<td></td>
</tr>
</tbody>
</table>
ア行 | カ行 | サ行 |
---|---|---|
タ行 | ナ行 | ハ行 |
マ行 | ヤ行 | ラ行 |
ワ行 | その他 | |
|
|
<table style="background: #ffd;">
<caption>2020年5月</caption>
<thead>
<tr style="text-align: center;">
<th style="color: #f00;">日</th>
<th>月</th>
<th>火</th>
<th>水</th>
<th>木</th>
<th>金</th>
<th style="color: #00f;">土</th>
</tr>
</thead>
<tbody>
<tr style="text-align: center;">
<td style="background: #fdd;"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td style="background: #ddf;">2</td>
</tr>
<tr style="text-align: center;">
<td style="background: #fdd;">3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td style="background: #ddf;">9</td>
</tr>
<tr style="text-align: center;">
<td style="background: #fdd;">10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td style="background: #ddf;">16</td>
</tr>
<tr style="text-align: center;">
<td style="background: #fdd;">17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td style="background: #ddf;">23</td>
</tr>
<tr style="text-align: center;">
<td style="background: #fdd;">24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td style="background: #ddf;">30</td>
</tr>
<tr style="text-align: center;">
<td style="background: #fdd;">31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="background: #ddf;"></td>
</tr>
</tbody>
</table>
日 | 月 | 火 | 水 | 木 | 金 | 土 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
<div>
<img src="https://dic.nicovideo.jp/oekaki/15333.png" style="vertical-align: middle;" height="28" width="100%" />
<table style="border-width: 0; margin-top: -28px;" width="100%">
<tbody><tr>
<td style="margin: 0; padding: 0 5px; border-width: 0; color: white;">
<img src="https://dic.nicovideo.jp/oekaki/15335.png" alt="動画投稿数:" style="vertical-align: middle;" height="28" width="34" />:2,525,250
<img src="https://dic.nicovideo.jp/oekaki/15338.png" alt="再生数:" style="vertical-align: middle;" height="28" width="34" />:2,525,252,525
<img src="https://dic.nicovideo.jp/oekaki/15341.png" alt="コメント数:" style="vertical-align: middle;" height="28" width="34" />:2,525,252,525
</td>
<td style="font-weight: bold; text-align: right; margin: 0; padding: 0 5px; border-width: 0; color: white;">
右上風文章
</td>
</tr></tbody>
</table>
</div>
ニコニコ大百科のボタン風なリンク。スタイルシートのfloatプロパティを理解していないと扱うのが難しい。
<div style="margin-left: 0.5em;">
<div style="float: left; height: 22px;">
<div style="background-image: url(/oekaki/15638.png); width: 16px; background-repeat: no-repeat; float: left; height: 22px;"></div>
<div style="background-image: url(/oekaki/15647.png); background-repeat: repeat-x; float: left; height: 22px; color: #603000; font-size: 14px; padding-top: 3px;">
<b>ニコニコ大百科:素材集</b>
</div>
<div style="background-image: url(/oekaki/15657.png); width: 16px; background-repeat: no-repeat; float: left; height: 22px;"></div>
</div>
</div>
サムネイルをオシャレに飾るのに最適。使用するには「動画サムネの貼り付けについて」を必読すること。
画像が改行表示されてしまう場合は改行によるタグ間の半角スペースを除去すると良い。
<div style="background-color: #404040; width: 674px; max-width: 100%; margin: 0 auto; padding: 4px 0; font-size: 0;">
<div style="line-height: 0; padding: 4px; border-top: #fff dashed 3px; border-bottom: #fff dashed 3px; text-align: center;">
<img style="width: 19%; margin-right: 4px;" src="[1枚目のサムネイルのURL]" />
<img style="width: 19%; margin-right: 4px;" src="[2枚目のサムネイルのURL]" />
<img style="width: 19%; margin-right: 4px;" src="[3枚目のサムネイルのURL]" />
<img style="width: 19%; margin-right: 4px;" src="[4枚目のサムネイルのURL]" />
<img style="width: 19%;" src="[5枚目のサムネイルのURL]" />
</div>
</div>
<table>タグを利用して、キャラクターが吹き出し付きでしゃべるテキストボックスを表示します。
ソースコード上で、「しゃべるキャラクターの画像URL」「吹き出しの色(根元と本体の2か所)」「キャラクターにしゃべらせたいセリフ」の計4か所を指定します。
<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 style="width: 0px; height: 0px; border: 7.5px solid #fff; border-left: none; border-right: 15px solid [吹き出し(根元の三角部分)の色];"></div></td>
<td style="border: none; padding: 10px; border-radius: 6px; background: [吹き出し(本体)の色]; vertical-align: middle;">[キャラクターにしゃべらせたいセリフ]</td>
</tr>
</tbody>
</table>
<table style="margin: 1em 0.5em;">
<tbody>
<tr>
<td style="border: none; padding: 10px; border-radius: 6px; background: [吹き出し(本体)の色]; vertical-align: middle;">[キャラクターにしゃべらせたいセリフ]</td>
<td style="border: none; padding-left: 0; vertical-align: middle;"><div style="width: 0px; height: 0px; border: 7.5px solid #fff; border-left: 15px solid [吹き出し(根元の三角部分)の色]; border-right: none;"></div></td>
<td style="border: none; vertical-align: middle;"><img src="[しゃべるキャラクターの画像URL]" /></td>
</tr>
</tbody>
</table>
<table>タグを利用して、キャラクターが吹き出し付きでしゃべるテキストボックスを表示します。
ソースコード上で、「しゃべるキャラクターの画像URL」「キャラクターにしゃべらせたいセリフ」の計2か所を指定します。
<table style="margin: 1em 0.5em; background: #fff;">
<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, #fff 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, #fff 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>
<table style="margin: 1em 0.5em; background: #fff;">
<tbody>
<tr>
<td style="border: none; padding: 0px; vertical-align: middle;">
<div style="border: solid 1px #000; padding: 10px; border-radius: 6px; background: #fff;">
[キャラクターにしゃべらせたいセリフ]
</div>
</td>
<td style="border: none; padding-left: 0; vertical-align: middle;">
<div style="float: left; margin-left: -1px;">
<div style="margin-top: 1px; margin-left: -0.75px; background: #fff; width: 2px; height: 14px; float: left; border-radius: 0px 8px 8px 0px;"></div>
<div style="margin-top: 0px; margin-left: 0px; background: linear-gradient(26deg, #fff 5.9px, #000 6.7px, #000 7.1px, #fff 7.7px); width: 16px; height: 7.8px;"></div>
<div style="margin-top: 0px; margin-left: 0px; background: linear-gradient(154deg, #fff 5.9px, #000 6.7px, #000 7.1px, #fff 7.7px); width: 16px; height: 7.8px;"></div>
</div>
</td>
<td style="border: none; vertical-align: middle;"><img src="[しゃべるキャラクターの画像URL]" /></td>
</tr>
</tbody>
</table>
<div style="margin: 15px -10px; padding: 15px 10px; background: [背景色]; color: [文字色];">
[記事内容]
</div>
<div style="margin: 0 -10px; height: 50px; background: linear-gradient(to bottom,#fff,[背景色]);"></div>
<div style="margin: 0 -10px; padding: 15px 10px; background: [背景色]; color: [文字色];">
[記事内容]
</div>
<div style="margin: 0 -10px; height: 50px; background: linear-gradient(to bottom,[背景色],#fff);"></div>
お絵カキコを記事に貼り付ける際に元の大きさから縮小すると画像の劣化が発生する(特に線画の場合)。
大量のお絵カキコを記事に貼った場合、記事が非常に重くなる。そのため縮小して使用する場合はお絵カキコのサムネイルを利用する。サムネイルを貼り付ける場合は、下記のようにURLの"/oekaki/"の部分を"/oekaki_thumb/"に変更する。
https://dic.nicovideo.jp/oekaki/*****.png
https://dic.nicovideo.jp/oekaki_thumb/*****.png
通常のお絵カキコ (縮小表示) |
サムネイル |
---|---|
![]() |
![]() |
動画サムネイルを貼り付ける場合には、以下のいずれかのURLを入力する。対象サムネイルの動画が投稿された時期によってURLの規則が異なるため、ニコニコ動画上で動画サムネイルを右クリックして画像を別タブで開き、URLを確認する方法が望ましい。
https://nicovideo.cdn.nimg.jp/thumbnails/[動画ID]/[動画ID]
https://nicovideo.cdn.nimg.jp/thumbnails/[動画ID]/[動画ID].XXXXXX
[動画ID]は、冒頭のsmやnmを除いた数字部分のみを入力する。".XXXXXX"は、2018年12月中旬以降に投稿・サムネイル変更された動画に付与されている。
2011年12月頃以降に投稿された動画は、URL末尾に".L"を付記することで360×270px版(Lサイズ)のサムネイルを表示できる。また、2014年5月頃以降に投稿された動画は、前述の".L"のほか、URL末尾に".M"を付記することで320×180px版(Mサイズ)のサムネイルを表示できる。
https://nicovideo.cdn.nimg.jp/thumbnails/[動画ID]/[動画ID].L
https://nicovideo.cdn.nimg.jp/thumbnails/[動画ID]/[動画ID].M
https://nicovideo.cdn.nimg.jp/thumbnails/[動画ID]/[動画ID].XXXXXX.L
https://nicovideo.cdn.nimg.jp/thumbnails/[動画ID]/[動画ID].XXXXXX.M
https://lohas.nicoseiga.jp/thumb/[id][size]
上記[id]には静画の「im」を除いた数値のみを指定する。[size]で指定可能なものは下表を参照(縮小時の基準などがsize指定により異なるため、状況により使い分けると良い場合もある)。
size | 規定サイズ | 規定サイズ以上 | 規定サイズ未満 | 透過部分 |
---|---|---|---|---|
s | 96x72px | 長辺基準で縮小 黒埋め固定サイズ |
左上固定サイズ | 黒 |
q | 160x160px | 長辺基準で縮小 | デフォ | 白 |
t | 170x170px | 横幅基準で縮小 縦長の場合規定サイズを超過 |
48x48px | 黒 |
c | 176x176px | 固定サイズで切り抜き | 中央固定サイズ | 白 |
u | 180x180px | 長辺基準で縮小 | デフォ | 白 |
m | 240x240px | 縦幅基準で縮小 横長の場合規定サイズを超過 規定値から外れた縮小がされることがある |
48x48px | 黒 |
i | 600x600px | 長辺基準で縮小 規定値から外れた縮小がされることがある |
デフォ | 白 |
[size]に"m"を指定した場合。
http://icon.nicovideo.jp/community/[co番号].jpg
http://icon.nicovideo.jp/channel/[ch番号].jpg
ニコニ・コモンズのサムネイルを貼り付ける場合には、以下のいずれかのURLを入力する。前者は128x128pxの正方形、後者の"?size=l"が付記されている方は400x400pxの正方形で表示される。
https://deliver.commons.nicovideo.jp/thumbnail/[nc番号]
https://deliver.commons.nicovideo.jp/thumbnail/[nc番号]?size=l
<div style="margin: 0; padding: 0; width: 100px; height: 100px; overflow: hidden; border: solid 1px #666; background: #fff;">
<iframe style="margin-top: -22px; margin-left: -5px;" class="nicoichiba2" src="https://ext.ichiba.nicovideo.jp/thumb/[商品ID]" scrolling="no" frameborder="0" height="210" width="312"></iframe>
</div>
右側のHTMLソースをコピペして赤太字の部分を変更すれば貼り付けられる。基本的にはURLの末尾の文字列に置き換えればよい。
通常のPC環境であれば、横長のものは横に2つまで、縦長のサイドバータイプのものは横に4つまで並べられる。
スマホ版サイトではサイズに変動が生じる謎仕様。「style="border: solid 1px #ccc;"」を設定することで、PC版と同様の表示に固定することが可能。
<iframe width="312" height="176" class="nicovideo" src="https://ext.nicovideo.jp/thumb/sm9" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="https://ext.nicovideo.jp/thumb_mylist/6342698" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" src="https://ext.nicovideo.jp/thumb_series/39795" frameborder="0" scrolling="no" style="border: solid 1px #ccc;" ></iframe>
<iframe width="312" height="176" class="nicovideo" src="https://ext.seiga.nicovideo.jp/thumb/im355089" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="https://ext.seiga.nicovideo.jp/thumb/mg10940" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="https://ext.nicovideo.jp/thumb_community/co1" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="https://ext.nicovideo.jp/thumb_channel/ch2525" frameborder="0" scrolling="no"></iframe>
<iframe class="nicovideo" src="https://ext.nicovideo.jp/thumb_channel/ch2525?type=2" frameborder="0" scrolling="no" style="width: 160px; height: 300px;"></iframe>
<iframe width="312" height="176" class="nicovideo" src="https://live.nicovideo.jp/embed/lv8931212" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="160" class="nicovideo" src="https://ext.nicovideo.jp/thumb_user/4" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="https://3d.nicovideo.jp/externals/widget?id=td1" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="https://game.nicovideo.jp/atsumaru/externals/thumb/gm3" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="195" class="nicovideo" src="https://q.nicovideo.jp/external/embed_player?question_book_id=1120" style="max-width: 100%; border: none;" scrolling="no"></iframe>
<img src="/img/pikoplayer.png" alt="296" height="18" width="86" />
<iframe width="312" height="128" class="nicoichiba2" src="https://ext.ichiba.nicovideo.jp/thumb/az406214767X" frameborder="0" scrolling="no"></iframe>
商品の"az"以降の番号は、当該商品のASINコードまたはISBN-10コードを指定する(ISBN-10コードは対象商品が書籍の場合に使用)。
<iframe width="155" height="155" class="nicoichiba" src="https://ichiba.nicovideo.jp/parts/item/az406214767X" frameborder="0" scrolling="no"></iframe>
商品の"az"以降の番号は、当該商品のASINコードまたはISBN-10コードを指定する(ISBN-10コードは対象商品が書籍の場合に使用)。
記事の編集を途中保存できないが、htmlエディタをオフにしてソースを表示することで、メモ帳などにコピペしローカル保存できる。途中からはじめるにはローカルで保存していたものをコピペで貼り付け。
JavaScriptをオフにしていると、改行やインデントが付いた状態で表示されるので、htmlエディタを使用しない場合はJavaScriptをオフにしての作業を推奨する。
大百科の記事の編集フォームでhtmlエディタを無効にして使用する場合、改行やインデントが無いので非常に見づらく、タグの関係もわかりにくい。大掛かりにタグ編集するのであれば、外部エディタでタグ付きの文章を作成して編集フォームに貼り付ける方法を推奨する。
外部エディタでタグを記述する際に改行やインデントをつかって見やすく整形しても、大百科の編集フォームに貼り付けた後にhtmlエディタを有効にした時点か、投稿内容を確認した時点で改行なしのコードに変換される。改行や空白でのインデント等は編集履歴への影響はほぼない。
htmlエディタを使用すると空のspanが発生する。これを除去するには、htmlエディタをオフにしてソースを表示し、メモ帳などにコピペし<span>を置換して消してしまうとよい。閉じタグに該当する</span>についてはニコ百側で除去される。空のspanタグを表示調整に使用しているなど特殊な場合レイアウトが崩れるため表示のチェックはすること。
![]() 編集者向けページ |
|
---|---|
マニュアル | 記事の編集方法 - HTMLタグ一覧 - HTMLエディタヘルプ - スマホエディタヘルプ - ピコカキコヘルプ - お絵カキコヘルプ - パンくずリスト - パンくずリストのガイドライン |
マナー | 編集時のマナー - 編集合戦 - 編集競合 - 楽しく過ごすために |
素材 | 素材集 - 素材集2 - ニコニコテレビ君 - キャラアイコン - ドットキャラ - 外字・特殊フォント |
テンプレ | お知らせ表示 - ユーザーボックス - テンプレートボックス - 作品テンプレート - HTMLテンプレート集 - Twitter引用 |
カラー | HTMLカラーコード - CSSでの色指定 |
仕様 | 仕様 - デフォルトCSS - 自動リンク - ページ番号 - リビジョン番号 - 初版作成日 - 最終更新日 - 編集履歴 |
依頼 | 一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼 - 要編集記事 - 未作成タグ - 話題の単語 |
公式企画 | 百チャレ - 大百科グランプリ |
ヘルプ | よくある質問 - エラー・不具合情報 |
編集者 | 編集者一覧 - ★ - ∞ - ♢ |
その他 | 今週のオススメ記事 - おすすめトレンド - 急上昇ワード改 |
r20231215 | ve
▶もっと見る
掲示板
298 ななしのよっしん
2024/04/24(水) 23:02:02 ID: 2PXsSjiypo
ニコ生ブログパーツ変更したまではいいけどもしかしなくてもツールバーを使った場合の変更は未反映なのかこれ
299 ななしのよっしん
2024/05/07(火) 11:18:12 ID: 2PXsSjiypo
ニコ生ブログパーツについて
→ツールバーから貼ろうとする場合
<iframe width="312" height="176" src="https://" scrolling="no" frameborder="0" class="nicovideo">lv8931212</iframe>
問題点としてwidth="312" height="176" をwidth="237" height="262" に手動で変更する必要がある
→放送ページ共有から引用する場合
<iframe width="237" height="262" src="https://
(省略しています。全て読むにはこのリンクをクリック!)
300 ななしのよっしん
2024/11/20(水) 18:31:23 ID: 8oYdc+mm2r
ニコ生ブログパーツ、ツールバーからの貼り付けとついでに掲示板レスでの縦横が修正された模様
急上昇ワード改
最終更新:2025/02/14(金) 05:00
最終更新:2025/02/14(金) 05:00
ウォッチリストに追加しました!
すでにウォッチリストに
入っています。
追加に失敗しました。
ほめた!
ほめるを取消しました。
ほめるに失敗しました。
ほめるの取消しに失敗しました。