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

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

141
0

掲示板をみる(244)

ほめる(141)

その他

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

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

概要

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

目次

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

画像の貼り付けについて
編集テクニック

その他のテンプレート記事リンク集
ニコニコ大百科：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

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

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

ソースコード以外のものを表示するときは<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>などの見出しタグを使わない場合もある。

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

ソースコード

<h2 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;">サンプル</h2>
<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;">サンプル1</h3>
<h3 style="background-image: url('https://dic.nicovideo.jp/oekaki/110538.png'); background-repeat: no-repeat; border-bottom: #000 solid thin;">サンプル2</h3>

表示サンプル

アイコン画像を使用した例

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

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

解説

プロパティ

意味

要素・値

border-bot tom:x y z

見出しの下側に境界線を引く

x = 色の指定
y = 線の種類を指定

sol id	実線
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

見出しの右側に境界線を引く

back ground-image:

見出しのアイコン画像を指定

url(/oek aki/xxx.png)
xxx=アイコン画像のID

back ground-repe at:

アイコン画像を繰り返す

省略すると繰り返さないが、
一部ブラウザやスマホ版では
繰り返してしまう

画像の繰り返し

repe at-x	横方向にのみ繰り返し
repe at-y	縦方向にのみ繰り返し
no-repe at	繰り返しなし
repe at	全面に繰り返し

文字の左側の余白を指定

使用画像の横幅によって変更
画像の幅が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>

表示サンプル

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>

表示サンプル

右上風

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

ソースコード

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

表示サンプル

画像の貼り付けについて

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

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

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

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

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

サムネイル画像の特徴

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

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

表示サンプル（130×100）

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

https://nico video.cdn.nimg.jp/thum bnails/動画ID/動画ID

動画IDのsmやnmを除いた********の数字部分のみを入力する。
サムネイル画像を変更した動画、2018年 12月中旬以降の動画は数字部分の後ろに「.XXX XXX」という不定桁の数字が必要で下のようになる。

https://nico video.cdn.nimg.jp/thum bnails/動画ID/動画ID .XXX XXX

XX XX XX部分の調べ方
該当のサムネイル https://ext.nicovideo.jp/thumb/sm ******のサムネイル画像上で右クリックし「新しいタブで画像を開く」
→URLを確認すると「～thum bnails/動画ID/動画ID .XXX XXX」の様に表示されている。

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

https://nico video.cdn.nimg.jp/thum bnails/動画ID/動画ID .XXX XXX.L

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

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

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

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

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

https://lohas .nico sei ga.jp/thumb/[id][size]

idには静画の「im」を除いた数値のみを指定する。
sizeで指定可能なものは以下の通り。
縮小時の基準などがsize指定により異なるため、状況により使い分けると良い場合もある。

size	規定サイズ	規定サイズ以上	規定サイズ未満	透過部分
s	96x72px	長辺基準で縮小黒埋め固定サイズ	左上固定サイズ	黒
q	160 x1 60px	長辺基準で縮小	デフォ	白
t	170 x1 70px	横幅基準で縮小縦長の場合規定サイズを超過	48 x48px	黒
c	176x176px	固定サイズで切り抜き	中央固定サイズ	白
u	180 x1 80px	長辺基準で縮小	デフォ	白
m	240x240px	縦幅基準で縮小横長の場合規定サイズを超過規定値から外れた縮小がされることがある	48 x48px	黒
i	60 0x 600px	長辺基準で縮小規定値から外れた縮小がされることがある	デフォ	白

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

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

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

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

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

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

http://deliver.nico nico mmo ns.jp/thum bnail/nc番号　　　　 128×128pxの正方形

http://deliver.nico nico mmo ns.jp/thum bnail/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: -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の末尾の文字列に置き換えればよい。関連商品を貼るときは「商品の貼り付け」も参照。

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

スマホ版サイトではサイズに変動が生じる謎仕様。
style="border: sol id 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>`
	`<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のIDを元に手打ちで生成する方法がある。

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

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

書式：[az]+[ASINコード又はISBN-10コード]
IDの例：az123 45 67 890（123 45 67 890は架空のASINコード）

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

編集テクニック

編集記事の一時保存

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

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

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

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

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

空のspanタグを除去する

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

その他テンプレート

関連項目

編集者向けページ
マニュアル	記事の編集方法 - HTMLタグ一覧 HTMLエディタヘルプ - スマホエディタヘルプピコカキコヘルプ - お絵カキコヘルプ
マナー	編集時のマナー - 編集合戦 - 楽しく過ごすために
素材	素材集 - 素材集2 - ニコニコテレビ君キャラアイコン - ドットキャラ - 外字・特殊フォント
テンプレ	お知らせ表示 - ユーザーボックステンプレートボックス - 作品テンプレート HTMLテンプレート集 - Twitter引用
カラー	HTMLカラーコード - CSSでの色指定
仕様	仕様 - デフォルトCSS
依頼	一般会員依頼スレ - 記事作成依頼 - 記事加筆依頼要編集記事 - 未作成タグ
公式企画	百チャレ - 大百科グランプリ - 話題の単語
ヘルプ	よくある質問 - エラー・不具合情報

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

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

この記事を編集する

掲示板

242ななしのよっしん

2020/09/01(火) 03:54:18 ID: gyBA+PgxLd

>>239 もっと簡単な方法は
動画検索から右クリックで「画像アドレスをコピー」

ちなPCのchromeの場合ね他ブラウザも同様の方法があればできると思うが知らん
243ななしのよっしん

2020/11/14(土) 01:34:32 ID: y9acepTk49

>>229-235
>>231で示した例ですがwidthとmax-widthのプロパティの値が逆でした。
今更で申し訳ないのですが

<table style="border: 0; width: 100%;">
<tb ody><tr>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul></td>
(省略しています。全て読むにはこのリンクをクリック！)
244ななしのよっしん

2020/11/14(土) 02:08:44 ID: y9acepTk49

横並びで見せる文章、例えばAとBの会話のようなものも下記のようにtrで区切ることにより
[A-1][B-1]
[A-2][B-2]
の横並びから
[A-1]
[B-1]
[A-2]
[B-2]
の縦並びへと対応させることが可能です。
<table style="border: 0; width: 100%;">
<tb ody><tr>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
(省略しています。全て読むにはこのリンクをクリック！)

掲示板をみる

おすすめトレンド

急上昇ワード改

最終更新：2021/04/15(木) 12:00

一覧をみる

ほめられた記事

方向幕[単語]
- 94
- 19
Pokémon 25 Years of Non-stop Adventure[単語]
- 74
- 11
ウマ娘プリティーダービー[単語]
- 103
- 1.6万
スイ(とんでもスキルで異世界放浪メシ)[単語]
- 54
- 11
クコ（花騎士）[単語]
- 35
- 2

最終更新：2021/04/15(木) 12:00

一覧をみる

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

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

追加に失敗しました。

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

キャンセル

ほめた！

すでにほめています。

ほめるを取消す

すでにほめています。

ほめるを取消す

ほめるを取消しました。

ほめるに失敗しました。

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

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

キャンセル

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

キャンセル

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

キャンセル

利用規約を読む

TOP