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

編集

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

概要

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

目次

編集テクニック

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

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

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

▲目次へ

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

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

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

<pre style="margin: 1em 30px; padding: 1em; overflow: auto; border: 1px solid #333333; color: #000000;"><code>[内容]</code></pre>
<pre style="margin: 1em 30px; padding: 1em; overflow: auto; border: 1px solid #ff9966; color: #000000;"><code>[内容]</code></pre>
<pre style="margin: 1em 30px; padding: 1em; overflow: auto; border: 1px solid #8cc700; color: #000000;"><code>[内容]</code></pre>
<pre style="margin: 1em 30px; padding: 1em; 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','MSゴシック',sans-serif;">
</p>

表示サンプル

      ,────ヽ
           
     /  .| /
     | | の  の | | |
     ノ (  ワ   レ′し
     ̄/| ̄ ̄ ̄ ̄\ ̄
     / .|      |) )
     し|      ε
      .|      |  スッ
      |  /⌒ヽ .|

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

▲目次へ

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

ただし、見出しを変更することで逆に見づらくなったり(コントラスト、装飾の記事と統一感がなくなるなど)、他の編集者が扱いづらくなったり(記事内デザインを統一することが困難もしくは手間であるために、<li>, <h3>などを新規導入しづらいなど)することが考えられるので、導入の際は必要性を考え、自己満足に終わらないよう配慮すること。

ソースコード

<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
大百科デフォルトスタイルシートでは
h2h4に padding-left: 20px;
h5に padding-left: 18px;

が、それぞれ定されています
padding:w x y z 文字余白
線を変更した場合に、線との間隔を調整する為に変更します。
w=上 x=右 Y=下 Z=左
上部、下部など個別定も可です。
※旧リビジョンにて紹介されていた、text-indentを用いた場合、見出しの文字数や、他レイアウトによるwidth(横幅)をしてる場合、個々の閲覧環境による既定のフォントサイズの影により、レイアウトが崩れてしまう場合があります。
見出しの文字数によるレイアウトが崩れる例(テスト記事過去リビジョン)

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

▲目次へ

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

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

ソースコード

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

表示サンプル

項目の2列化

▲目次へ

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

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

ソースコード

<table style="border: 0px; 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>

表示サンプル

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

表示サンプル

2008年8月
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

装飾付きの枠

▲目次へ

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

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

表示サンプル

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

原宿タグ登録画面風

原宿タグ登録画面Zeroから外見が変わってしまったため使いドコロが難しい

表示サンプル

登録タグを編集中 … 
編集を了する
もっと評価されるべき
登録
空白で区切ると一度に複数タグ登録されます

ボタン風

▲目次へ

ニコニコ大百科ボタンリンク。ただしスタイルシートの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: 108px; height: 108px; background: url(/oekaki/669536.png) no-repeat right bottom;">
<div style="margin: 0; padding: 0; width: 100px; height: 100px; overflow: hidden; border: solid 1px #666666; background: #ffffff;"><iframe style="margin-top: -66px; margin-left: -8px;" class="nicoichiba2" height="210" src="http://ext.ichiba.nicovideo.jp/thumb/商品ID" frameborder="0" width="312" scrolling="no"></iframe></div>
</div>

表示サンプル

ソースコード(タグなし)

<div style="margin: 15px; padding: 0; width: 108px; height: 108px; background: url(/oekaki/669536.png) no-repeat right bottom;">
<div style="margin: 0; padding: 0; width: 100px; height: 100px; overflow: hidden; border: solid 1px #666666; background: #ffffff;"><iframe style="margin-top: -37px; margin-left: -8px;" class="nicoichiba2" height="210" src="http://ext.ichiba.nicovideo.jp/thumb/商品ID" frameborder="0" width="312" scrolling="no"></iframe></div>
</div>

表示サンプル

ニコニコ市場サムネイル表示(影なし)

▲目次へ

ニコニコ市場の商品サムネイル表示。タグのあり・なし双方に対応。

ソースコード

<div style="margin-top: 8px; width: 105px; height: 155px; overflow: hidden;">
<iframe style="margin-top: -30px; margin-left: -7px;" class="nicoichiba2" src="http://ext.ichiba.nicovideo.jp/thumb/
商品ID" frameborder="0" height="210" scrolling="no" width="312"></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="176">
</iframe>
</div>

表示サンプル

編集記事の一時保存

▲目次へ

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

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

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

画像の貼り付けについて

▲目次へ

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

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

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

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

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

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

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

画像を縮小表示した場合の美しさはウェブブラウザ依存しており、ほとんどの場合は線の滑らかさが失われギザギザした線になってしまう。サムネイルだと予めなめらかに縮小された画像が等倍で表示されるため、どのブラウザでも同じような表示となる。サムネイル画質ソフト寄りなため、代償としてコントラストが悪くなり、わずかだがピンぼけしたような印になる。

サムネ画像の特徴

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

動画サムネイルを貼り付ける場合にはお絵カキコURLの代わりに下のどれかを入する。

表示サンプル

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

今後も上記のURLに加えバリエーションが増えるかもしれませんが、サーバー番号がい一番上のURLが確実。

・・・あれ?ということは記事に貼り付けたい絵は動画にしてうpして、サムネをそれに定すれば自由に・・・うわなにをするやめくぁwせdrftgyふじこlp

ただし、標準のサムネイルは画像サイズが小さいため、サイズを大きく表示するとドット立ってしまう。
一部の動画に限定されるが、サムネイルURL末尾に「.L」をつけることで、360×270ピクセルの大きいサイズサムネイルを表示可動画も存在する。

表示サンプル

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





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

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

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

コミュニティ おっぱいすごく…大きいです……。

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

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

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

samune

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

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

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

ヘブン状態!ヘブン状態

ニコニコモンズのサムネイルの特徴
128×128ピクセルの場合
40400ピクセルの場合

ニコニコ動画の各サービスの貼り方

▲目次へ

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

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

<iframe width="312" height="176" class="nicovideo" src="http://ext.nicovideo.jp/thumb/sm9" frameborder="0" scrolling="no"></iframe>
<iframe width="155" height="260" class="nicoichiba" src="http://ichiba.nicovideo.jp/parts/item/az406214767X" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="210" class="nicoichiba2" src="http://ext.ichiba.nicovideo.jp/thumb/az406214767X" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="http://ext.nicovideo.jp/thumb_mylist/6342698" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="http://live.nicovideo.jp/embed/lv8931212" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="http://ext.nicovideo.jp/thumb_community/co1" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="http://ext.seiga.nicovideo.jp/thumb/sg1" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="http://ext.seiga.nicovideo.jp/thumb/im355089" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="http://ext.seiga.nicovideo.jp/thumb/mg10940" frameborder="0" scrolling="no"></iframe>
296
<img src="/img/pikoplayer.png" alt="296" height="18" width="86" />
<iframe width="312" height="160" class="nicovideo" src="http://ext.nicovideo.jp/thumb_user/4" frameborder="0" scrolling="no"></iframe>
<iframe width="312" height="176" class="nicovideo" src="http://ext.nicovideo.jp/thumb_channel/ch2525" frameborder="0" scrolling="no"></iframe>
<iframe class="nicovideo" src="http://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="http://3d.nicovideo.jp/externals/widget?id=td1" frameborder="0" scrolling="no"></iframe>

商品の貼り付け

貼り付ける商品IDニコニコ市場のものを使う方法とAmazonYahoo!ショッピングの各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は架の商品コードである)

その他

▲目次へ

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

関連項目

▲目次へ

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

▲目次へ

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

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

【スポンサーリンク】

携帯版URL:
http://dic.nicomoba.jp/k/a/%E3%83%8B%E3%82%B3%E3%83%8B%E3%82%B3%E5%A4%A7%E7%99%BE%E7%A7%91%3Ahtml%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9B%86
ページ番号: 435535 リビジョン番号: 2310617
読み:ニコニコダイヒャッカエイチティーエムエルテンプレートシュウ
初版作成日: 08/08/06 11:53 ◆ 最終更新日: 16/01/09 14:29
編集内容についての説明/コメント: ニコニコ漫画のテンプレート追加、属性順変更
記事編集 / 編集履歴を閲覧

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


市場サムネイル用影

てすと

test

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

ピコカキコがありません

ニコニコ大百科:HTMLテンプレート集について語るスレ

169 : ななしのよっしん :2016/04/17(日) 00:41:44 ID: hfIjQ5JG1Y
>>168 なるほどtdに塗るよりは少し楽になりますね ありがとうございます
調べたら<table class="table-striped">やら.table-striped tbody tr:nth-child(even) …やらが出てきたのですがニコ百では非対応みたいですね…
170 : ななしのよっしん :2016/05/16(月) 23:46:47 ID: 2pvd5xwlUU
静画クリップは貼り付けられませんでしょうか。
171 : ななしのよっしん :2016/05/17(火) 21:02:04 ID: b3ojeY+p0X
>>170
クリップフレームいですね
マイリストみたいに表示できればいいんですが
172 : ななしのよっしん :2016/05/18(水) 17:04:01 ID: 2pvd5xwlUU
ありがとうございます
困りました…
173 : ななしのよっしん :2016/06/23(木) 20:29:26 ID: eLU2jMuThO
すみません
smidのついていないニコニコ動画サムネイルって
http://tn-skr.smilevideo.jp/smile?i=
URLだと記事上で表示できないんですか?
skr1~4の数字も試してみたんですが表示されないので
174 : ななしのよっしん :2016/06/23(木) 20:44:59 ID: tLQ0zI9FHX
>>173
そんなことないでしょ。
ニコニコで配信されてるアニメの記事に行けばわかるけど、配信エピソードリンクにそのエピソードサムネイルを使っているのが普通
公式配信アニメにはsm付かないけど、きちんとサムネ表示はできてるよ。
175 : ななしのよっしん :2016/06/23(木) 21:28:14 ID: b3ojeY+p0X
>>173
>>156でも書いたけど、公式動画サムネURLに入る数字が動画IDと違う

例えばwatch/1365403220の場合、サムネURLhttp://tn-skr.smilevideo.jp/smile?i=20556419

動画ページの「この動画の記事」っていうリンククリックすると、http://dic.nicovideo.jp/v/so20556419へ飛ぶ。
この「so20556419」のsoを除いた数字がサムネURLに入る

176 : ななしのよっしん :2016/06/23(木) 21:30:08 ID: yWzz4eIaxZ
>>173
どのブラウザを使っているかによりますが
動画サムネイルの上で右クリック
②「画像のURLコピー」を左クリック
htmlエディタの「画像の挿入・編集」ボタンを左クリックし、「画像のソース」のところにURLを「貼り付け」する。

以上の3つの手段を経て、記事上に公式動画サムネイルを貼り付けることができます。
177 : 173 :2016/06/24(金) 06:13:21 ID: eLU2jMuThO
>>174 >>175 >>176
ありがとうございます
解決しました。
178 : ななしのよっしん :2017/06/28(水) 17:00:53 ID: dF+FJCWxxB
ここで書くべきなのかは分かんないけど、
トーナメントをうまく編集する方法ってあるんだろうか
  JASRAC許諾番号: 9011622001Y31015