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

ニコニコダイヒャッカエイチティーエムエルテンプレートシュウ
2.1万文字の記事
  • 150
  • 0pt
掲示板へ

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

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

概要

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

目次

AAを正しく表示する

▲目次へ

デフォルトフォント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 = 線の種類を
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
デフォルトと同サイズの場合は不要
大百科デフォルト設定は
[h2h4] 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]は、冒頭のsmnmを除いた数字部分のみを入する。".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
関連記事

親記事

子記事

  • なし

兄弟記事

【スポンサーリンク】

  • 150
  • 0pt
記事編集 編集履歴を閲覧

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

この記事の掲示板に最近描かれたお絵カキコ

この記事の掲示板に最近投稿されたピコカキコ

ピコカキコがありません

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

290 削除しました
削除しました ID: xovencO+pF
削除しました
291 ななしのよっしん
2023/08/29(火) 16:52:10 ID: /RdIJlrfBN
👍
高評価
0
👎
低評価
0
292 ななしのよっしん
2023/09/09(土) 02:43:24 ID: fCMRR97tRU
とある記事に外部サイトの画像を引用して貼りたいんだが理なのだろうか?
👍
高評価
0
👎
低評価
0
293 ななしのよっしん
2023/09/09(土) 03:31:55 ID: aEnwtO8MAc
>>292 ニコニコ投稿された画像の引用が原則です。
👍
高評価
0
👎
低評価
0
294 ななしのよっしん
2023/09/14(木) 00:28:14 ID: dF+FJCWxxB
ニコニコ動画サムネイル貼るの不可能になっている?
👍
高評価
0
👎
低評価
0
295 ななしのよっしん
2023/09/14(木) 00:34:35 ID: aEnwtO8MAc
>>294 貼れるサムネとそうでないのがあります
動画ブログパーツに使われてるサムネなら貼れるはず
👍
高評価
0
👎
低評価
0
296 ななしのよっしん
2024/03/05(火) 17:24:24 ID: 8oYdc+mm2r
なんかニコ生の埋め込み内容変わった?
>>lv344243313exit_nicolive

https://live.nicovideo.jp/embed/lv344243313exit_nicolive
縦横固定のiframe埋め込みで利用されてるもののサイズを途中で変えるとか信じられないんだが
👍
高評価
0
👎
低評価
0
297 ななしのよっしん
2024/03/11(月) 01:54:37 ID: 8oYdc+mm2r
>>296
自己レス、今気づいたけど遅れてブロマガ出てたのね
https://blog.nicovideo.jp/niconews/217771.htmlexit
過去ブログパーツを貼っているものは幅と高さが違うため、下記のように両端に余白があり潰れた状態の表示となっております。
>このままでも表示されている番組へ遷移することはできますが、新しいブログパーツへの変更をお勧めいたします

既存のものの表示が不自然になるのは仕様であり各自対応せよということですか
記事に使われてるぶんは余白のあるままで残すか一つずつ書き換えるかの二択になるのかね
掲示板での埋め込みサイズもそのうち変わるんだろうか
(元のURLは元のサイズで機するまま残して新しく追加するという方法をとらなかったのは管理コストの問題なのかなぁ)
👍
高評価
0
👎
低評価
0
298 ななしのよっしん
2024/04/24(水) 23:02:02 ID: 2PXsSjiypo
ニコ生ブログパーツ変更したまではいいけどもしかしなくてもツールバーを使った場合の変更は未反映なのかこれ

👍
高評価
0
👎
低評価
0
299 ななしのよっしん
2024/05/07(火) 11:18:12 ID: 2PXsSjiypo
ニコ生ブログパーツについて

ツールバーから貼ろうとする場合
<iframe width="312" height="176" src="https://live.nicovideo.jp/embed/lv8931212exit_nicolive" scrolling="no" frameborder="0" class="nicovideo">lv8931212</iframe>
問題点としてwidth="312" height="176" をwidth="237" height="262" に手動で変更する必要がある

→放送ページ共有から引用する場合
<iframe width="237" height="262" src="https://live.nicoexit
(省略しています。全て読むにはこのリンクをクリック!)
👍
高評価
0
👎
低評価
0