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

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

概要

編集者がよく使う記述やテクニックの共有を目的としている。
皆様のテンプレートを追加してください。 → この記事でテンプレートを紹介するためのテンプレート

目次

• AAを正しく表示する
• 外部リンク・動画リンクのアイコンを消す
• サンプルコード・例などを囲むブロック
• 装飾付きの枠
• 見出しのデザイン変更
• 角丸ボックス
• 丸・楕円
• 項目の2列化
• 50音順の表
• カレンダー
• 右上風
• ボタン風
• フィルム風

• 画像の貼り付けについて
  • お絵カキコのサムネイルの貼り付け
  • 動画サムネイルの貼り付け
  • ニコニコ静画の画像の貼り付け
  • ニコニコミュニティのシンボルマーク貼り付け
  • ニコニ・コモンズのサムネイル貼り付け
  • ニコニコ市場サムネイル表示
  • niconicoの各サービスの貼り方
  • 商品の貼り方
    • ニコニコ市場の商品IDを使う
    • AmazonのIDから生成する
    • Yahoo!ショッピングのIDから生成する

• 編集テクニック
  • 編集記事の一時保存
  • インデントや改行を付ける
  • 空のspanタグを除去する

その他のテンプレート記事

末尾にリンク集があります。
使用できるタグはニコニコ大百科：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="hoge" style="background-image: none;">hagehage</a>

表示サンプル

Before

• 外部リンク
• ニコニコ動画へのリンク

After

• 外部リンク
• ニコニコ動画へのリンク

サンプルコード・例などを囲むブロック

▲目次へ

ソースコードや出力結果の表示など、地の文から分離してそれと分かるように表示させる時に便利。

ソースコード以外のものを表示するときは<div>や<p>に差し替えて<code></code>を削除するとよい。

ソースコード兼、表示サンプル

<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>にも使えるが、見出しのランクごとにデザインを変更する等して見やすくしておこう。
スマホ版では仕様の違いにより表示が崩れるため、<h2>などの見出しタグを使わない場合もある。

ただし、見出しを変更することで逆に見づらくなったり、他の編集者が扱いづらくなることがあるので、自己満足に終わらないよう配慮すること。

ソースコード

<h2 style="border-bottom: #c33 double medium; border-top: #ffc819 dotted 2px; background-image: url(/oekaki/22700.png); background-repeat: no-repeat; padding: 10px 0 0 40px;"></h2>

表示サンプル

サンプル1

アイコン画像を使用せずに、境界線のみを用いたレイアウトの例

サンプル2

アイコン画像と下部境界線の配色を合わせた例

解説

プロパティ	意味	要素・値
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 #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>

表示サンプル

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

その2

ソースコード

<div style="background-color: #9c6;">
 <img src="https://dic.nicovideo.jp/oekaki/13801.png" alt=" " style="vertical-align: top;" />
</div>
<div style="border: 18px solid #9c6; border-top-width: 0; border-bottom-width: 0;">
 <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>
<div style="background-color: #9c6; text-align: right;">
 <img src="https://dic.nicovideo.jp/oekaki/13806.png" alt=" " style="vertical-align: bottom;" />
</div>

表示サンプル

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

角丸ボックス

▲目次へ

四隅の角を丸くした色付きボックス。記事中のアクセントに。
border-radiusの数値で角丸のサイズを調整できる。

ソースコード

<div style="background: 背景色; border-radius: 数値; margin: 1em 30px; 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-style: none;">にすれば良い。

ソースコード

<table style="border: 0; width: 100%; table-layout: fixed;">
 <tbody><tr>
  <td style="border-style: none;"><ul>
   <li>1-1</li>
   <li>1-2</li>
   <li>1-3</li>
  </ul></td>
  <td style="border-style: none;"><ul>
   <li>2-1</li>
   <li>2-2</li>
  </ul></td>
 </tr></tbody>
</table>

表示サンプル

ニコニコ大百科:HTMLタグ一覧 ニコニコ大百科:HTML各要素のデフォルトCSS ニコニコ大百科:仕様 ニコニコ大百科:ガイドブック ニコニコ大百科:Wikipediaとの相違点 ニコニコ大百科:HTMLテンプレート集 ニコニコ大百科:お知らせ表示の一覧 ニコニコ大百科:ユーザーボックスの一覧 ニコニコ大百科:素材集 ニコニコ大百科:ピコカキコ曲一覧

お絵カキコ関連記事の一覧 要編集記事の一覧 要編集生放送主記事の一覧 五十音順記事数一覧 今週の一覧 自動リンク スマートフォン版ニコニコ大百科 自分で書けない人のための記事作成依頼 自分で修正できない人のための加筆希望記事一覧

50音順の表

▲目次へ

一覧ページでよく使う感じのアレ。<th>を使う人が少なすぎてげんなり。

横3列版

<table width="100%">
 <tbody><tr>
  <th width="33%" align="center">ア行</th>
  <th width="33%" align="center">カ行</th>
  <th width="33%" align="center">サ行</th>
 </tr>
 <tr>
  <td><ul>
    <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
 </tr>
 <tr>
  <th align="center">タ行</th>
  <th align="center">ナ行</th>
  <th align="center">ハ行</th>
 </tr>
 <tr>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
 </tr>
 <tr>
  <th align="center">マ行</th>
  <th align="center">ヤ行</th>
  <th align="center">ラ行</th>
 </tr>
 <tr>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
 </tr>
 <tr>
  <th align="center">ワ行</th>
  <th align="center">その他</th>
  <th align="center"></th>
 </tr>
 <tr>
  <td><ul>
   <li></li>
 </ul></td>
 <td><ul>
  <li></li>
 </ul></td>
 <td></td>
 </tr></tbody>
</table>

横4列版

<table width="100%">
 <tbody><tr>
  <th width="25%" align="center">ア行</th>
  <th width="25%" align="center">カ行</th>
  <th width="25%" align="center">サ行</th>
  <th width="25%" align="center">タ行</th>
 </tr>
 <tr>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
 </tr>
 <tr>
  <th align="center">ナ行</th>
  <th align="center">ハ行</th>
  <th align="center">マ行</th>
  <th align="center">ヤ行</th>
 </tr>
 <tr>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
 </tr>
 <tr>
  <th align="center">ラ行</th>
  <th align="center">ワ行</th>
  <th align="center">その他</th>
  <th align="center"></th>
 </tr>
 <tr>
  <td><ul>
  <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td><ul>
   <li></li>
  </ul></td>
  <td></td>
 </tr></tbody>
</table>

表示サンプル

ア行	カ行	サ行
アメリカ アラブ首長国連邦	カナダ カメルーン	ザイール (現、コンゴ) サウジアラビア
タ行	ナ行	ハ行
タジキスタン	ナミビア	パキスタン
マ行	ヤ行	ラ行
マレーシア	ヨルダン	リビア
ワ行	その他
ワルシャワ	なし

カレンダー

▲目次へ

よくあるカレンダーをtableで実現したものです。あらかじめ各セルに背景色指定をしています。

ソースコード

<table>
 <caption>2020年5月</caption>
 <thead><tr>
  <th style="text-align:center; background-color: #fdd; color: #f00;">日</th>
  <th style="text-align:center; background-color: #ffd;">月</th>
  <th style="text-align:center; background-color: #ffd;">火</th>
  <th style="text-align:center; background-color: #ffd;">水</th>
  <th style="text-align:center; background-color: #ffd;">木</th>
  <th style="text-align:center; background-color: #ffd;">金</th>
  <th style="text-align:center; background-color: #ddf; color: #00f;">土</th>
 </tr></thead>
 <tbody><tr>
  <td style="text-align:center; background-color: #fdd;"></td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #ffd;">1</td>
  <td style="text-align:center; background-color: #ddf;">2</td>
 </tr>
 <tr>
  <td style="text-align:center; background-color: #fdd;">3</td>
  <td style="text-align:center; background-color: #ffd;">4</td>
  <td style="text-align:center; background-color: #ffd;">5</td>
  <td style="text-align:center; background-color: #ffd;">6</td>
  <td style="text-align:center; background-color: #ffd;">7</td>
  <td style="text-align:center; background-color: #ffd;">8</td>
  <td style="text-align:center; background-color: #ddf;">9</td>
 </tr>
 <tr>
  <td style="text-align:center; background-color: #fdd;">10</td>
  <td style="text-align:center; background-color: #ffd;">11</td>
  <td style="text-align:center; background-color: #ffd;">12</td>
  <td style="text-align:center; background-color: #ffd;">13</td>
  <td style="text-align:center; background-color: #ffd;">14</td>
  <td style="text-align:center; background-color: #ffd;">15</td>
  <td style="text-align:center; background-color: #ddf;">16</td>
 </tr>
 <tr>
  <td style="text-align:center; background-color: #fdd;">17</td>
  <td style="text-align:center; background-color: #ffd;">18</td>
  <td style="text-align:center; background-color: #ffd;">19</td>
  <td style="text-align:center; background-color: #ffd;">20</td>
  <td style="text-align:center; background-color: #ffd;">21</td>
  <td style="text-align:center; background-color: #ffd;">22</td>
  <td style="text-align:center; background-color: #ddf;">23</td>
 </tr>
 <tr>
  <td style="text-align:center; background-color: #fdd;">24</td>
  <td style="text-align:center; background-color: #ffd;">25</td>
  <td style="text-align:center; background-color: #ffd;">26</td>
  <td style="text-align:center; background-color: #ffd;">27</td>
  <td style="text-align:center; background-color: #ffd;">28</td>
  <td style="text-align:center; background-color: #ffd;">29</td>
  <td style="text-align:center; background-color: #ddf;">30</td>
 </tr>
 <tr>
  <td style="text-align:center; background-color: #fdd;">31</td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #ffd;"></td>
  <td style="text-align:center; background-color: #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: 100%; margin: 0 auto; padding: 4px 0;">
 <div style="line-height: 0; padding: 4px 4px; border-top: #fff dashed 3px; border-bottom: #fff dashed 3px; text-align: center;">
  <img style="width: 18%;" src="[1枚目のサムネイルのURL]" />
  <img style="width: 18%;" src="[2枚目のサムネイルのURL]" />
  <img style="width: 18%;" src="[3枚目のサムネイルのURL]" />
  <img style="width: 18%;" src="[4枚目のサムネイルのURL]" />
  <img style="width: 18%;" src="[5枚目のサムネイルのURL]" />
 </div>
</div>

表示サンプル

画像の貼り付けについて

▲目次へ

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

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

大量のお絵カキコを記事に貼った場合、記事が非常に重くなる。
そのため縮小して使用する場合はお絵カキコのサムネイルを利用する。
サムネイルを貼り付ける場合は、下記のように修正するとよい。

https://dic.nicovideo.jp/oekaki/*****.png　　　　　317×317px（デフォルト時、元画像次第）
https://dic.nicovideo.jp/oekaki_thumb/*****.png　120×120px

通常のお絵カキコ （縮小表示）	サムネイル

サムネイル画像の特徴

• 元のお絵カキコのサイズが120pxより大きい場合、サムネイルは長辺を基準に縮小され120pxになる。
• 元のお絵カキコのサイズが120×120pxより小さい場合はそのままのサイズで表示される。
• サムネイルは拡大するとドットが目立ち始めるのでできるだけそのままのサイズでの使用をオススメする。
• 画像の縮小表示処理はブラウザ依存のため、線の滑らかさが失われギザギザした線になる。サムネイルだと予めなめらかに縮小された画像が等倍で表示されるため、どのブラウザでも同じような表示となる。
• サムネイルの画質はコントラストが悪くなり、わずかにピンぼけしたようになる。そのぶん軽量。

動画サムネイルの貼り付け

表示サンプル（130×100）

動画サムネイルを貼り付ける場合には以下のURLを入力する。

• https://tn.smilevideo.jp/smile?i=動画ID

2019年5月下旬頃以降の動画は以下のURL

• https://nicovideo.cdn.nimg.jp/thumbnails/動画ID

動画IDのsmやnmを除いた********の数字部分のみを入力する。
2018年12月中旬以降の動画は数字部分の後ろに「.XXXXXX」という不定桁の数字が必要。

XXXXXX部分の調べ方
該当のサムネイル上で右クリックし「新しいタブで画像を開く」
→URLを確認すると「～thumbnails/動画ID/動画ID.XXXXXX.M」の様に表示されている。

2011年12月頃以降の動画は、URL末尾に「.L」をつけると、360×270pxのサムネイルを表示できる。
2014年5月頃以降の動画は、URL末尾に「.M」をつけると、320×180pxのサムネイルを表示できる。

• https://tn.smilevideo.jp/smile?i=********.L
• https://nicovideo.cdn.nimg.jp/thumbnails/********.XXXXXX.L

表示サンプル（M 320×180）

表示サンプル（L 360×270）

削除された動画のサムネイルはしばらくすると消えてしまう。
削除された場合に備え、レイアウト維持のために画像サイズの指定しておくとよい。

ニコニコ静画の画像貼り付け

2018年1月より静画の画像を直接埋め込めるようになった。

https://lohas.nicoseiga.jp/thumb/[id][size]

idには静画の「im」を除いた数値のみを指定する。
sizeで指定可能なものは以下の通り。
s: 96x72, q: 160x160, t: 170x170, c: 176x176, u: 180x180, m: 240x240, i: 600x600
「i」の仕様として、元サイズが600pxを超える画像は600pxで表示される。600px以下の場合は元サイズでの表示になる。

それぞれのサイズ指定で、アスペクト比の保持の仕方が異なったり、元画像の透過状況の反映の仕方が異なるため、レイアウトにこだわる場合は、サイズ以外も考慮するとよい。

ニコニコミュニティのシンボルマーク貼り付け

http://icon.nicovideo.jp/community/co番号.jpg　128×128px

すごく…大きいです……。

ニコニコチャンネルのサムネも使えます。

http://icon.nicovideo.jp/channel/ch番号.jpg　128×128px

ニコニ・コモンズのサムネイル貼り付け

http://deliver.niconicommons.jp/thumbnail/nc番号　　　 　 128×128pxの正方形

http://deliver.niconicommons.jp/thumbnail/nc番号?size=l　400×400pxの正方形

ヘブン状態！

• 元の画像のサイズが大きい場合は長辺を基準に縮小される。
• 元の画像サイズが小さい場合は小さいままサムネイルが作成され、周囲に余白ができる。
• 長方形の場合はアスペクト比が保持され長辺側に余白ができる。

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

▲目次へ

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

ソースコード

<div style="margin: 0; padding: 0; width: 100px; height: 100px; overflow: hidden; border: solid 1px #666; background: #fff;">
 <iframe style="margin-top: -37px; margin-left: -8px;" class="nicoichiba2" src="https://ext.ichiba.nicovideo.jp/thumb/商品ID" scrolling="no" frameborder="0" height="210" width="312"></iframe>
</div>

表示サンプル

niconicoの各サービスの貼り方

▲目次へ

右側のHTMLソースをコピペして赤太字の部分を変更すれば貼り付けられる。
基本的にはURLの末尾の文字列に置き換えればよい。関連商品を貼るときは「商品の貼り付け」も参照。

通常の環境であれば、横長のものは横に2つまで、縦長のサイドバータイプのものは横に4つまで並べられる。

スマホ版サイトではサイズに変動が生じる謎仕様。

	<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>
	<img src="/img/pikoplayer.png" alt="296" height="18" width="86" />
	<iframe width="312" height="210" class="nicoichiba2" src="https://ext.ichiba.nicovideo.jp/thumb/az406214767X" frameborder="0" scrolling="no"></iframe>
	<iframe width="155" height="260" class="nicoichiba" src="https://ichiba.nicovideo.jp/parts/item/az406214767X" frameborder="0" scrolling="no"></iframe>

商品の貼り付け

貼り付ける商品IDは『ニコニコ市場』のものを使う方法と、Amazon、Yahoo!ショッピングの各IDを元に手打ちで生成する方法がある。

2020年1月にニコニコ市場サイトが閉鎖され、Amazon以外の商品は貼り付けできなくなる予定。

1.ニコニコ市場の商品IDを使う方法

商品IDは、ニコニコ市場の商品ページ内の商品IDを使用。
目当ての商品がニコニコ市場から見つからない場合はamazonやyahooショッピングから登録することでも使用可能になる。

amazonなら"az"で始まる文字列、yahooショッピングなら"ys*****_"で始まる文字列が商品ID（*****はショップ名コード）。

2.AmazonのIDを元に生成する方法

書式：[az]+[ASINコード又はISBN-10コード]
IDの例：az1234567890（1234567890は架空のASINコード）

生成法
Amazonの場合、先頭に購入先サイト識別子"az"を付ける。
「商品の詳細」欄記載の10桁の英数字のASINコード（書籍類の場合はISBN-10コード）を付加する

3.Yahoo!ショッピングのIDを元に生成する方法

書式：[ys]+[ショップ名コード]+[ _ ]+[ショップ内での商品コード]
IDの例：yshogehoge_ABC123（hogehogeは架空の店名、ABC123は架空の商品コード）

生成法
1.購入先のサイト識別子
Yahoo!ショッピングの場合、文字列先頭に"ys"を付加する。

2.ショップ名コードに関して
”https://store.shopping.yahoo.co.jp/hogehoge/index.html”なら、"hogehoge"がショップ名コード。

3.商品コードに関して
"_"と、そのショップ内の商品説明欄にある商品コードを記述。
桁数はショップによって不定。英数字や記号が混ざるコードも存在する。
商品コードの直下の「JANコード」と間違えないこと。

編集テクニック

▲目次へ

編集記事の一時保存

記事の編集を途中保存できないが、htmlエディタをオフにしてソースを表示することで、メモ帳などにコピペしローカル保存できる。途中からはじめるにはローカルで保存していたものをコピペで貼り付け。

インデントや改行を付ける

JavaScriptをオフにしていると、改行やインデントが付いた状態で表示されるので、htmlエディタを使用しない場合はJavaScriptをオフにしての作業を推奨する。

大百科の記事の編集フォームでhtmlエディタを無効にして使用する場合、改行やインデントが無いので非常に見づらく、タグの関係もわかりにくい。大掛かりにタグ編集するのであれば、外部エディタでタグ付きの文章を作成して編集フォームに貼り付ける方法を推奨する。

外部エディタでタグを記述する際に改行やインデントをつかって見やすく整形しても、大百科の編集フォームに貼り付けた後にhtmlエディタを有効にした時点か、投稿内容を確認した時点で改行なしのコードに変換される。改行や空白でのインデント等は編集履歴への影響はない。

空のspanタグを除去する

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

その他テンプレート

▲目次へ

• 凝ったレイアウトを作りたい人向け:スタイルシート活用講座
• ニコニコ大百科:お知らせ表示の一覧
• ニコニコ大百科:ユーザーボックスの一覧
• 偽ニコニコ動画
• 偽ニコニコ市場
• 偽掲示板
• VOCALOIDのP記事用のテンプレートK
• UTAU音声ライブラリ記事用テンプレート
• UTAU、VOCALOIDオリジナル曲の記事テンプレート（β）
• Template:動画記事ナビゲーションテンプレート
• 植物テンプレートについて
• 日付の一覧:記事のフォーマット
• ニコニコ大百科で使える駅名標テンプレ
• ふたば☆ちゃんねる再現用テンプレート
• Excelを利用したHTML文作成テクニック

関連項目

▲目次へ

• ニコニコ大百科:編集者向けのページ
• ニコニコ大百科:HTMLタグ一覧
• ニコニコ大百科:HTML各要素のデフォルトCSS
• ニコニコ大百科:記事の編集方法
• ニコニコ大百科:仕様
• ニコニコ大百科:よくある質問
• スマートフォン版ニコニコ大百科
• HTML
• Cascading Style Sheets

この記事でテンプレートを紹介するためのテンプレート

▲目次へ

[hoge]の部分を置き換えてご利用ください。<h2>テンプレ名</h2>

<p>[概要]</p>
<h3>ソースコード</h3>
<pre style="border: 1px solid #8cc700; margin: 1em 30px; padding: 1em; overflow: auto; color: #000; font-size: 12px;"><code>[ソースコード]</code></pre>
<h3>表示サンプル</h3>
<div style="border: 1px solid #99ccff; margin: 1em 30px; padding: 1em; overflow: auto;">
 [サンプル]
</div>