ニコニコ大百科:HTMLテンプレート集 単語

ニコニコダイヒャッカエイチティーエムエルテンプレートシュウ

2.1万文字の記事
  • twitter
  • facebook
  • はてな
  • LINE

ニコニコ大百科:HTMLテンプレート集とは、大百科を編集する際に役に立ちそうなテクニックを集めた記事である。

【注意】
あくまで大百科の編集用のテンプレートです。大百科以外ではもっと便利なタグが使える場合があります。大百科以外では一般的な記述ではない場合があります。ベタ書きだとメンテナンス性が損なわれやすいです。

概要

編集者がよく使う記述やテクニックの共有を目的としています。使う場所が限られるテクニックについてはあまり記載されていません。皆様のテンプレートを追加してください。

目次

AAを正しく表示する

▲目次へ

デフォルトのフォントがMS ゴシックではない環境ではAAの表示が崩れるため、以下のような記述をする必要がある。編集する際、style属性が自動的に消去されてしまうことがあるが、何度か編集し直せば使えるようになる。
スマホ環境までは考慮されていないので過信は禁物。

閲覧環境によるフォントの違いによるレイアウト崩れを軽減するために使用する場合もある。

ソースコード

<p style="font-size: 16px; line-height: 18px; font-family: 'Mona','IPAMonaPGothic','IPA モナー Pゴシック','MS PGothic AA','MS PGothic','ＭＳ Ｐゴシック',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 = 線の種類を指定
solid
実線
dotted
点線
dashed
破線
double
二重線
ridge
罫線が浮き出る線
groove
罫線がくぼむ線
outset
罫線の範囲内が浮き出る線
inset
罫線の範囲内がくぼむ線
z = 線の太さ(もしくは線の間隔)
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: アイコン画像を繰り返す
省略すると繰り返さないが、
一部ブラウザやスマホ版では繰り返してしまう 		画像の繰り返し
repeat-x 横方向にのみ繰り返し
repeat-y 縦方向にのみ繰り返し
no-repeat 繰り返しなし
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=左
上部、下部など個別指定も可能

装飾付きの枠

▲目次へ

その1

ソースコード

<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>

表示サンプル

こんな感じに装飾できます。

その2

ソースコード

<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>

表示サンプル

5px

[本文]

10px

[本文]

20px

[本文]

丸・楕円

▲目次へ

角丸を応用して丸や楕円を作ることができる。リンクのボタンなどに。応用として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>

表示サンプル

50px
[内容]
50px / 25px
[内容]
25px / 50px
[内容]

項目の2列化

▲目次へ

項目が多くなったとき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>

表示サンプル

50音順の表

▲目次へ

一覧ページでよく使う感じのアレ。<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で実現したものです。

ソースコード

<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>

表示サンプル

2020年5月
日 月 火 水 木 金 土
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>

表示サンプル

動画投稿数::2,525,250 再生数::2,525,252,525 コメント数::2,525,252,525 右上風文章

ボタン風

▲目次へ

ニコニコ大百科のボタン風なリンク。スタイルシートの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>

表示サンプル

吹き出し風テキストボックス（パターン1）

▲目次へ

<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>

表示サンプル

 ・キャラクター画像を変更
・吹き出し（根元の三角部分）の色を指定
・吹き出し（本体）の色を指定
・吹き出しの中のセリフを記入
上記4ステップで完成！
左のキャラクターの画像が大きいと、
それにあわせて吹き出しの縦幅も大きくなるので注意！

右向き吹き出し

ソースコード

<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>

表示サンプル

吹き出しの横幅はセリフの長さによって変動します！
左向き吹き出しと交互に並べて、
会話風に使うのもあり！

吹き出し風テキストボックス（パターン2）

▲目次へ

<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>

表示サンプル
・キャラクター画像を変更
・吹き出しの中のセリフを記入
上記2ステップで完成！

右向き吹き出し

ソースコード

<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>

表示サンプル

背景色：水色　文字色：黒

ルビを振る▲目次へ

ソースコード

ニコニコ<ruby>大百科<rp>(</rp><rt>だいひゃっか</rt><rp>)</rp></ruby>

表示サンプル

ニコニコ大百科(だいひゃっか)

画像の貼り付けについて

▲目次へ

お絵カキコのサムネイルの貼り付け

お絵カキコを記事に貼り付ける際に元の大きさから縮小すると画像の劣化が発生する（特に線画の場合）。

大量のお絵カキコを記事に貼った場合、記事が非常に重くなる。そのため縮小して使用する場合はお絵カキコのサムネイルを利用する。サムネイルを貼り付ける場合は、下記のように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月中旬以降に投稿・サムネイル変更された動画に付与されている。

表示サンプル

動画サムネイルの貼り付け（Mサイズ、Lサイズ）

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

表示サンプル


特徴

ニコニコ市場サムネイル表示

ニコニコ市場の商品サムネイルのみの表示。

※ ニコニコ市場は2023年11月30日にサービス終了

ソースコード

<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>

表示サンプル

niconicoの各サービスの貼り方

▲目次へ

右側の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>

表示サンプル

ゲームアツマール

※ ゲームアツマールは2023年6月28日にサービス終了

ソースコード

<iframe width="312" height="176" class="nicovideo" src="https://game.nicovideo.jp/atsumaru/externals/thumb/gm3" frameborder="0" scrolling="no"></iframe>

表示サンプル

ニコニコQ

ソースコード

<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" />

表示サンプル

296

ニコニコ市場（通常版）

※ ニコニコ市場は2023年11月30日にサービス終了

ソースコード

<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コードは対象商品が書籍の場合に使用）。

表示サンプル

ニコニコ市場（ミニ版）

※ ニコニコ市場は2023年11月30日にサービス終了

ソースコード

<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エディタを有効にした時点か、投稿内容を確認した時点で改行なしのコードに変換される。改行や空白でのインデント等は編集履歴への影響はほぼない。

空のspanタグを除去する

htmlエディタを使用すると空のspanが発生する。これを除去するには、htmlエディタをオフにしてソースを表示し、メモ帳などにコピペし<span>を置換して消してしまうとよい。閉じタグに該当する</span>についてはニコ百側で除去される。空のspanタグを表示調整に使用しているなど特殊な場合レイアウトが崩れるため表示のチェックはすること。

その他テンプレート

▲目次へ

関連項目

▲目次へ

編集者向けページ
マニュアル 記事の編集方法 - HTMLタグ一覧 - HTMLエディタヘルプ - スマホエディタヘルプ - ピコカキコヘルプ - お絵カキコヘルプ - パンくずリスト - パンくずリストのガイドライン
マナー 編集時のマナー - 編集合戦 - 編集競合 - 楽しく過ごすために
素材 素材集 - 素材集2 - ニコニコテレビ君 - キャラアイコン - ドットキャラ - 外字・特殊フォント
テンプレ お知らせ表示 - ユーザーボックス - テンプレートボックス - 作品テンプレート - HTMLテンプレート集 - Twitter引用
カラー HTMLカラーコード - CSSでの色指定
仕様 仕様 - デフォルトCSS - 自動リンク - ページ番号 - リビジョン番号 - 初版作成日 - 最終更新日 - 編集履歴
依頼 一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼 - 要編集記事 - 未作成タグ - 話題の単語
公式企画 百チャレ - 大百科グランプリ
ヘルプ よくある質問 - エラー・不具合情報
編集者 編集者一覧 - ★ - ∞ - ♢
その他 今週のオススメ記事 - おすすめトレンド - 急上昇ワード改
編集者向けページテンプレートver20231215
この記事を編集する
関連記事

親記事

子記事

  • なし

兄弟記事

掲示板

掲示板をみる(最新)
掲示板をみる(1レス目から)

おすすめトレンド

ニコニ広告で宣伝された記事

記事と一緒に動画もおすすめ！
まちカドまぞく[単語]

提供: まるこお（male）

5384万pt
もっと見る

急上昇ワード改

最終更新：2024/04/20(土) 09:00

一覧をみる

ほめられた記事

最終更新：2024/04/20(土) 09:00

一覧をみる

ウォッチリストに追加しました！

すでにウォッチリストに
入っています。

OK

追加に失敗しました。

OK

追加にはログインが必要です。

キャンセル

ログイン

           

ほめた！

すでにほめています。

ほめるを取消す

 

 

OK

すでにほめています。

ほめるを取消す

 

 

OK

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

ほめるの取消しに失敗しました。

OK

ほめるにはログインが必要です。

キャンセル

ログイン

タグ編集にはログインが必要です。

キャンセル

ログイン

タグ編集には利用規約の同意が必要です。

キャンセル

利用規約を読む

TOP

運営元:ドワンゴ
新しく記事を作る
PC版