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

• 概要
• サンプルコード・例などを囲むブロック
• AAを正しく表示する
• 見出しのデザインを変更する
• 外部リンク・動画リンクのアイコンを消す
• 項目の2列化
• 50音順の表
• カレンダー
• 装飾付きの枠
• 右上風
• ボタン風
• フィルム風
• 角丸ボックス
• ニコニコ市場サムネイル表示（影付き）
• ニコニコ静画サムネイル表示
• 編集記事の一時保存
• 画像の貼り付けについて
• ニコニコ動画の各サービスの貼り方
• その他
• 関連項目
• この記事でテンプレートを紹介するためのテンプレート
• 掲示板

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

概要

編集者がよく使う記述を共有するといろいろ好都合じゃないかな、と思って作ってみました。
皆様のテンプレートをどんどん投稿していってください。 → この記事でテンプレートを紹介するためのテンプレート

目次

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

編集テクニック

• 編集記事の一時保存
• 画像の貼り付けについて
• ニコニコ動画の各サービスの貼り方

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

末尾にリンク集があります。

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

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

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

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

<pre style="margin: 1em auto; padding: 1em; width: 650px; overflow: auto; border: 1px solid #333333; color: #000000;"><code>[内容]</code></pre>

<pre style="margin: 1em auto; padding: 1em; width: 650px; overflow: auto; border: 1px solid #ff9966; color: #000000;"><code>[内容]</code></pre>

<pre style="margin: 1em auto; padding: 1em; width: 650px; overflow: auto; border: 1px solid #8cc700; color: #000000;"><code>[内容]</code></pre>

<pre style="margin: 1em auto; padding: 1em; width: 650px; overflow: auto; border: 1px solid #99ccff; color: #000000;"><code>[内容]</code></pre>

▲目次へ

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>

表示サンプル

▲目次へ

見出しのデザインを変更する

見出しに画像を使ったり、線の色を変えるなど少し凝ったデザインにすることができる。<h3>や<h4>にも使えるが、見出しのランクごとにデザインを変更する等して見やすくしておこう。

ソースコード

<h2 style="border-bottom: #CC3333 double medium; border-top: #FFC819 dotted 2px; background-image: url(/oekaki/22700.png); background-repeat: no-repeat; padding: 10px 0px 0px 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=左 上部、下部など個別指定も可能です。

▲目次へ

外部リンク・動画リンクのアイコンを消す

「KAKU-tail3」や「エロゲーっぽいアイマス」の項目など、表のセルにリンクをたくさん詰め込む場合とかに活用。

大百科の見た目の統一感を乱してしまうので、無意味な多様は厳禁。レイアウトが崩れてしまうと困る場合など、最小限の利用にとどめるべき。

ソースコード

<a href="hoge" style="padding-right: 0; background-image: none;">hagehage</a>

表示サンプル

▲目次へ

項目の2列化

項目が多くなったときtableで2，3列にしたほうが記事が短く、すっきりする。

単純に枠を無くしたい場合、<td>を<td style="border-style: none;">にすれば良い。

ソースコード

<table style="border: 0;"><tbody> <tr>
      <td style="border-style: none; width: 50%;"> 
 </td>
     <td style="border-style: none; width: 50%;"> 
     </td>
 </tr>
 </tbody>
</table>

表示サンプル

▲目次へ

一覧ページでよく使う感じのアレ。<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>
 2008年8月
 </caption>
 <thead>
 <tr>
 <th style="text-align:center; background-color: #ffdddd; color: #ff0000;">
 日
 </th>
 <th style="text-align:center; background-color: #ffffdd;">
 月
 </th>
 <th style="text-align:center; background-color: #ffffdd;">
 火
 </th>
 <th style="text-align:center; background-color: #ffffdd;">
 水
 </th>
 <th style="text-align:center; background-color: #ffffdd;">
 木
 </th>
 <th style="text-align:center; background-color: #ffffdd;">
 金
 </th>
 <th style="text-align:center; background-color: #ddddff; color: #0000ff;">
 土
 </th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td style="text-align:center; background-color: #ffdddd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 1
 </td>
 <td style="text-align:center; background-color: #ddddff;">
 2
 </td>
 </tr>
 <tr>
 <td style="text-align:center; background-color: #ffdddd;">
 3
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 4
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 5
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 6
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 7
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 8
 </td>
 <td style="text-align:center; background-color: #ddddff;">
 9
 </td>
 </tr>
 <tr>
 <td style="text-align:center; background-color: #ffdddd;">
 10
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 11
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 12
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 13
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 14
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 15
 </td>
 <td style="text-align:center; background-color: #ddddff;">
 16
 </td>
 </tr>
 <tr>
 <td style="text-align:center; background-color: #ffdddd;">
 17
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 18
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 19
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 20
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 21
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 22
 </td>
 <td style="text-align:center; background-color: #ddddff;">
 23
 </td>
 </tr>
 <tr>
 <td style="text-align:center; background-color: #ffdddd;">
 24
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 25
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 26
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 27
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 28
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 29
 </td>
 <td style="text-align:center; background-color: #ddddff;">
 30
 </td>
 </tr>
 <tr>
 <td style="text-align:center; background-color: #ffdddd;">
 31
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ffffdd;">
 </td>
 <td style="text-align:center; background-color: #ddddff;">
 </td>
 </tr>
 </tbody>
</table>

表示サンプル

「ニコニコ大百科:素材集」の使用例。

その1

ソースコード

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

表示サンプル

その2

ソースコード

<div style="background-color: #99cc66;">
 <img src="http://dic.nicovideo.jp/oekaki/13801.png" alt=" " style="vertical-align: top;" />
</div>
<div style="border: 18px solid #99cc66; border-top-width: 0; border-bottom-width: 0;">
 <div style="text-align: left;">
 <img src="http://dic.nicovideo.jp/oekaki/13806.png" alt=" " style="vertical-align: top;" />
 </div>
 <div>
 <p>[内容]</p>
 </div>
 <div style="text-align: right;">
 <img src="http://dic.nicovideo.jp/oekaki/13801.png" alt=" " style="vertical-align: bottom;" />
 </div>
</div>
<div style="background-color: #99cc66; text-align: right;">
 <img src="http://dic.nicovideo.jp/oekaki/13806.png" alt=" " style="vertical-align: bottom;" />
</div>

表示サンプル

ニコニコ動画の上部デザインを再現。右上風の文章が可能に。

ソースコード

<div>
 <img src="http://dic.nicovideo.jp/oekaki/15333.png" style="vertical-align: middle;" height="28" width="100%" />
 <table style="border-width: 0px; margin-top: -28px;" width="100%">
 <tbody><tr>
 <td style="margin: 0; padding: 0 5px; border-width: 0; color: white;">
 <img src="http://dic.nicovideo.jp/oekaki/15335.png" alt="動画投稿数:" style="vertical-align: middle;" height="28" width="34" />:2,525,250
 <img src="http://dic.nicovideo.jp/oekaki/15338.png" alt="再生数:" style="vertical-align: middle;" height="28" width="34" />:2,525,252,525
 <img src="http://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; margin: 0px auto 20px; padding: 4px 0px;">
<div style="line-height: 0px; padding: 4px 4px; border-top: #ffffff dashed 3px; border-bottom: #ffffff dashed 3px;">
<img style="margin-right: 4px;" src="[1枚目のサムネイルのURL]" width="130" height="100" />
<img style="margin-right: 4px;" src="[2枚目のサムネイルのURL]" width="130" height="100" />
<img style="margin-right: 4px;" src="[3枚目のサムネイルのURL]" width="130" height="100" />
<img style="margin-right: 4px;" src="[4枚目のサムネイルのURL]" width="130" height="100" />
<img src="[5枚目のサムネイルのURL]" width="130" height="100" /></div>
</div>

表示サンプル

▲目次へ

角丸ボックス

▲目次へ

四隅の角を丸くした色付きボックス。記事中のアクセントに。

ソースコード

<div style="background: 背景色; height: 1px; margin: 0px 14px; overflow: hidden;"></div>
<div style="background: 背景色; height: 1px; margin: 0px 12px; overflow: hidden;"></div>
<div style="background: 背景色; height: 1px; margin: 0px 11px; overflow: hidden;"></div>
<div style="background: 背景色; height: 2px; margin: 0px 10px; overflow: hidden;"></div>
<div style="background: 背景色; margin: 0px 10px; padding: 5px; color: 文字色;">
<p>本文</p>
</div>
<div style="background: 背景色; height: 2px; margin: 0px 10px; overflow: hidden;"></div>
<div style="background: 背景色; height: 1px; margin: 0px 11px; overflow: hidden;"></div>
<div style="background: 背景色; height: 1px; margin: 0px 12px; overflow: hidden;"></div>
<div style="background: 背景色; height: 1px; margin: 0px 14px; overflow: hidden;"></div>

表示サンプル

ニコニコ市場サムネイル表示（影付き）

▲目次へ

ニコニコ市場の商品サムネイルのみの表示。影付き。アルバムのアートワーク風な表現に。

ソースコード

<div style="margin: 15px; padding: 0; width: 132px; height: 132px; background: url('http://dic.nicovideo.jp/oekaki/491419.png') no-repeat right bottom;">
<div style="margin: 0; padding: 0; width: 125px; height: 125px; overflow: hidden; border: solid 1px #666666; background: #ffffff;">
<iframe style="margin-top: -6px; margin-left: -15px;" class="nicoichiba" height="260" src="http://ichiba.nicovideo.jp/parts/item/商品ID" frameborder="0" width="155" scrolling="no"></iframe>
</div>
</div>

表示サンプル

ニコニコ静画サムネイル表示

▲目次へ

ニコニコ静画のサムネイルの表示。サムネイルの周囲に文章が置かれる場合、余白部分のでき方を考慮すると正方形の絵が望ましい。ブラウザの種類や拡大率によっては微妙にずれて表示される可能性あり。

ソースコード

 <div style="overflow: hidden; width: 153px; height: 153px; ">
 <iframe style="margin-left: -15px; margin-top: -13px;" class="nicovideo" src="http://ext.seiga.nicovideo.jp/thumb/静画ID" scrolling="no" width="312" frameborder="0" height="100">
 </iframe>
 </div>

表示サンプル

編集記事の一時保存

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

大百科の記事の編集フォームでhtmlエディタを無効にして使用する場合、改行が無いので非常に見づらいし、タグの関係もわかりにくい。（※動作環境はIE6.0でのみ確認）大掛かりにタグを編集するのであれば、外部エディタでタグ付きの文章を作成して編集フォームに貼り付ける方法を推奨する。

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

現在のニコニコ大百科では記事に貼り付けられる画像は大百科内のお絵カキコおよびそのサムネ、動画のサムネ、ニコニコミュニティのシンボルマーク、ニコニ・コモンズのサムネ画像に限られる。

お絵カキコのサムネの貼り付けについて

お絵カキコを記事に貼り付ける際に元の大きさから縮小するとどうしても画像の劣化が発生する（特に線画の場合）。また、大量のお絵カキコを記事に貼った場合、記事が非常に重くなる。

これに対応するために現在ではお絵カキコのサムネが取得できるようになっている。サムネを貼り付ける場合、通常のお絵カキコのアドレス

http://dic.nicovideo.jp/oekaki/*****.png を

http://dic.nicovideo.jp/oekaki_thumb/*****.png

に変更すればよい。比較はこちら。

通常のお絵カキコ	サムネイル

縮小しただけのものは線にゆがみが生じるが、サムネだとなめらかに表示される。その代償としてコントラストが悪くなり、わずかだがピンぼけしたような印象になる。

サムネ画像の特徴

• サムネのサイズは元のお絵カキコの長いほうの辺が120となる。
• 元の絵が120×120サイズより小さい場合はそのままのサイズで表示される。
• 拡大するとドットが目立ち始めるのでできるだけそのままのサイズでの使用をオススメする。
• 長いほうの辺に120が割り当てられるため、縦長・横長のキャンパスでかかれたお絵カキコは縮小される割合が大きい。

動画サムネの貼り付けについて

動画サムネを貼り付ける場合にはお絵カキコのアドレスの代わりに下のどれかを入力する。

• http://tn-skr.smilevideo.jp/smile?i=～
• http://tn-skr1.smilevideo.jp/smile?i=～
• http://tn-skr2.smilevideo.jp/smile?i=～
• http://tn-skr3.smilevideo.jp/smile?i=～
• http://tn-skr4.smilevideo.jp/smile?i=～

～には動画ID（sm～、nm～）の数字のみを入力する。
削除された動画のサムネはしばらくすると消えてしまうようです。
記事にサムネを使う際は削除される可能性があることを考慮のうえ貼り付けてください。
削除されてしまった場合などに備え、レイアウト維持のために画像サイズの指定（HTMLに「height="100" width="130"」など）をしておくといいでしょう。

今後もアドレスが増えるかもしれません。サーバー番号が無い一番上のアドレスが確実。

・・・あれ？ということは記事に貼り付けたい絵は動画にしてうｐして、サムネをそれに指定すれば自由に・・・うわなにをするやめくぁｗせｄｒｆｔｇｙふじこｌｐ

ただし、サムネの画像はもともとの大きさが小さいため、サイズを大きく表示するとドットが目立ってしまう。拡大のし過ぎは禁物。

サムネイル画像を組み合わせると、↓こんなこともできる。

実際の使用例→魔理沙は大変なものを盗んでいきました

ニコニコミュニティのシンボルマークも使えるよ！

http://icon.nicovideo.jp/community/co番号.jpgでおｋ

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

こちらも拡大のしすぎには注意。

ついでに、ニコニコチャンネルのサムネも使えます。

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

ニコニ・コモンズのサムネも使えるようになったよ！

http://deliver.niconicommons.jp/thumbnail/nc番号　128 ×128px

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

ヘブン状態！

現在グニャラくんがいろいろ検討してるっぽい。

ニコニコモンズのサムネイルの特徴

128×128ピクセルの場合

• 大きさは128×128ピクセルの正方形。
• 元の画像のサイズがこれより大きい場合は長辺が128ピクセルに縮小される。
• 元の画像サイズがこれより小さい場合は小さいままサムネイルが作成され、周囲に余白ができる。
• アスペクト比が保持されるので、長方形の場合は長辺側に余白ができる。
• サムネイル画像を組み合わせたい場合は各パーツの元画像が一辺が128以上の正方形であるとよい。

400×400ピクセルの場合

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

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

通常の環境であれば、動画・マイリスト・生放送・コミュニティ・静画（お題・イラスト）・ユーザー・チャンネルは横に2つまで、商品は旧フォーマットは横に4つまで、新フォーマットでは横に2つまで並べることができます。

	<iframe class="nicovideo" frameborder="0" height="176" scrolling="no" src="http://ext.nicovideo.jp/thumb/sm9" width="312"></iframe>
	<iframe class="nicoichiba" frameborder="0" height="260" scrolling="no" src="http://ichiba.nicovideo.jp/parts/item/az406214767X" width="155"></iframe>
	<iframe class="nicoichiba2" frameborder="0" height="210" scrolling="no" src="http://ext.ichiba.nicovideo.jp/thumb/az406214767X" width="312"></iframe>
	<iframe class="nicovideo" frameborder="0" height="176" scrolling="no" src="http://ext.nicovideo.jp/thumb_mylist/6342698" width="312"></iframe>
	<iframe class="nicovideo" frameborder="0" height="176" scrolling="no" src="http://live.nicovideo.jp/embed/lv8931212" width="312"></iframe>
	<iframe class="nicovideo" frameborder="0" height="176" scrolling="no" src="http://ext.nicovideo.jp/thumb_community/co1" width="312"></iframe>
	<iframe class="nicovideo" frameborder="0" height="176" scrolling="no" src="http://ext.seiga.nicovideo.jp/thumb/sg1" width="312"></iframe>
	<iframe class="nicovideo" frameborder="0" height="176" scrolling="no" src="http://ext.seiga.nicovideo.jp/thumb/im355089" width="312"></iframe>
	<img src="/img/pikoplayer.png" alt="296" height="18" width="86" />
	<iframe class="nicovideo" frameborder="0" height="160" scrolling="no" src="http://ext.nicovideo.jp/thumb_user/4" width="312"></iframe>
	<iframe class="nicovideo" frameborder="0" height="176" scrolling="no" src="http://ext.nicovideo.jp/thumb_channel/ch2525" width="312"></iframe>

商品の貼り付け

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

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

商品IDは、 ニコニコ動画TOPページ下方→ニコニコ市場→目当ての商品を検索→表示された商品のURL中、/item/以降の文字列を使用する。amazonなら"az"で始まる文字列、yahooショッピングなら"ys*****_"で始まる文字列が商品IDである（*****にはショップ名を表す文字数不定の英文字が入る）。

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

【Amazonの場合】

書式：[az]+[ASINコード又はISBN-10コード]

生成法
Amazonの場合、「商品の詳細」欄に書かれている10桁の英数字から成る、ASINコード（書籍類の場合は10桁の数字から成るISBN-10コード）の先頭に購入先サイト識別子"az"を付加する。これで、Amazon商品の貼付け用商品IDが完成する。上に挙げた例を用いると次のようになる。

IDの例：az1234567890（なお、1234567890は架空のASINコードである）

【Yahoo!ショッピングの場合】

書式：[ys]+[URL内に記載されたショップ名]+[ _ ]+[ショップ内での商品コード]

生成法
1.ショップ名に関して
Yahoo!ショッピングの場合、ショップのURL"http://store.shopping.yahoo.co.jp"に続く、二つの”/”で挟まれた英文字がショップを表す固有の文字列となる。仮に、ショップのURLが”http://store.shopping.yahoo.co.jp/hogehoge/index.html”ならば、"hogehoge"が固有のショップ名を表す文字列である。（この場合、日本語の屋号・店舗名はID生成に一切関係がない）

2.商品コードに関して
そのショップ内の商品説明欄にある商品コード（桁数はショップによって不定。英字・数字・記号[ハイフン等]が混ざるコードも存在する。また、商品コードの直下にある「JANコード」と間違えないこと）を調べ、先に書いたショップ名を表す文字列の後ろに"_"を加え、その後ろに商品コードを続けて記述。

3.購入先のサイト識別子を付加する
文字列先頭に"ys"を付加することでYahoo!ショッピング商品の貼付け用IDが完成する。

上に挙げた例を用いると次のようになる。

IDの例：yshogehoge_ABC123（なお、hogehogeは架空の店名、ABC123は架空の商品コードである）

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

↑の記事にもたくさんサンプルがあるよ！

• ニコニコ大百科:編集者向けのページ
• ニコニコ大百科:HTMLタグ一覧
• ニコニコ大百科:記事の編集方法
• ニコニコ大百科:仕様
• ニコニコ大百科:よくある質問
• HTML
• Cascading Style Sheets

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

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

ページ番号: 435535 リビジョン番号: 1498458
読み：ニコニコダイヒャッカエイチティーエムエルテンプレートシュウ
初版作成日: 08/08/06 11:53 ◆ 最終更新日: 12/04/12 20:50
編集内容についての説明/コメント: ニコニコ静画のサムネ・クリッピング表示を追加
記事編集 / 編集履歴を閲覧 / Twitterで紹介