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

ニコニコダイヒャッカエイチティーエムエルテンプレートシュウ
1.9万文字の記事
  • 142
  • 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="hoge" style="background-image: none;">hagehage</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>などの見出しタグを使わない場合もある。

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

ソースコード

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

表示サンプル

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>

表示サンプル

画像の貼り付けについて

▲目次へ

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

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

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

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

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

サムネイル画像の特徴

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

表示サンプル130×100

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

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

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

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

表示サンプル(M 320×180
表示サンプル(L 360×270


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

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

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

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 長辺基準で縮小
規定値から外れた縮小がされることがある
デフォ

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

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

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

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

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

samune

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

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: -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: 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>
<iframe width="312" height="176" class="nicovideo" src="https://game.nicovideo.jp/atsumaru/externals/thumb/gm3" frameborder="0" scrolling="no"></iframe>
<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>
296
<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『ニコニコ市場』exit_nicoichibaから検索して使用する方法と、AmazonIDを元に手打ちで生成する方法がある。

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

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

書式:[az]+[ASINコード又はISBN-10コード]
IDの例az12345678901234567890は架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>

【スポンサーリンク】

  • 142
  • 0pt
スマホ版URL:
https://dic.nicovideo.jp/t/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

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

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

ピコカキコがありません

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

239 ななしのよっしん
2020/08/01(土) 00:41:24 ID: ExlOCrQwWV
視聴履歴からサムネイル画像取得できなくなっちゃったなー
対策あればコメントで教えてほしいです
240 ななしのよっしん
2020/08/01(土) 14:44:59 ID: b3ojeY+p0X
>>239
https://ext.nicovideo.jp/thumb/exit動画ID
で、動画フレームを表示すれば取得できるかと
241 ななしのよっしん
2020/08/15(土) 20:32:27 ID: te5lrygFLB
>>237>>238
今更なんですが、まずHTMLCSSに詳しい人を雇うところから、って感じでしたね
記憶が正しければどちらにも詳しい人がいないとおっしゃってたはずなので
こういうCSSが欲しいと言ってもそりゃ分からないよねと…
あとお絵カキコも「レイヤーは甘え」とおっしゃっていたのも地味ショックでした
ネタかもしれませんがやる気なくしますわ(´・ω・`)
242 ななしのよっしん
2020/09/01(火) 03:54:18 ID: gyBA+PgxLd
>>239 もっと簡単な方法は
動画検索から右クリックで「画像アドレスコピー

ちなPCchromeの場合ね 他ブラウザも同様の方法があればできると思うが知らん
243 ななしのよっしん
2020/11/14(土) 01:34:32 ID: y9acepTk49
>>229-235
>>231で示した例ですがwidthとmax-widthのプロパティの値が逆でした。
今更で申し訳ないのですが

<table style="border: 0; width: 100%;">
<tbody><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%;">
<tbody><tr>
<td style="border: 0; padding: 0; width: 100%; max-width: 360px; float: left;">
(省略しています。全て読むにはこのリンクをクリック!)
245 ななしのよっしん
2021/09/04(土) 21:43:00 ID: TsoOgyyPJU
今回の編集での関連項目の「おすすめ」表記削除について
「おすすめ」項が多いという意見もごもっともですが、そもそも、テンプレート関連項目が多過ぎなため最低限どの記事を見たらよいか分からない人用の表記です。
削除するのであれば、関連項目を減らすなど、別の方法での配慮がないと、どの記事に何が書いてあるのか把握していない人は、関連項目を虱潰しにチェックしなければならなくなります。

その辺りまで考えていない編集と思われますので、「掲示板で」ご意見を頂きたいところです。

ところで、「おすすめ」削除だけでなく、今回の編集者自身が作成された偽機記事を関連項目に追加されています。
これは公式ではい偽○○亜種のため他の編集者を騙すつもりがいのであれば、偽掲示板などに並べて追記するべきものですので、追記する場所としても不適切です。
編集コメント関連項目を追加したことの記載もく、今回の編集者にとって自身が作成した記事へ誘導するのに不都合なので「おすすめ」表記を削除した自分本位の編集に感じました。
246 ななしのよっしん
2021/09/04(土) 23:33:27 ID: yWzz4eIaxZ
関連項目の整理は必要かもしれませんけど、それなら「ニコニコ大百科:グラフ機能」の優先度はだいぶ低そうです。消すのであればその筆頭補になるでしょうし、残すのであればその他テンプレートへの移設が妥当。
ユーザー記事で本文検索しましたが、備忘録としてグラフリンク載せているユーザー皆無でしたし、偽グラフ活用している記事もほとんどないのでは?
ちなみに、仕様スタイルシート活用など他の関連項目にある記事は複数件ヒットしました。
247 deadbull
2021/09/05(日) 03:52:17 ID: KXvxkrtB+M
>>245
「おすすめ」表記を追加した本人かどうかで対応が異なりますので、まずはその点を明らかにして下さい。

>>246
仕様変更の予定もあったので積極的に宣伝してこなかったですし、歴史も浅いので当然そうなるかと。

鼻にかけるようなことを言うのは避けたかったのですが、他者からの評価を要さるのであれば、ニコニコ大百科:グラフ機能の記事で百ッカデミー賞2021を受賞しておりますので、ユーザーからの評価以上に十分な資格を得ているかと思います。

その他テンプレートへの移設については反対まではしませんのでしていただいて結構ですが、後でテンプレートじゃないと言って消すのはなしにして下さい。
248 ななしのよっしん
2021/09/05(日) 08:08:36 ID: hfIjQ5JG1Y
「おすすめ」は多すぎて参考にならないので消してくれて良かったと思います。こういうの、追加する方は何も言われないのに戻すときは文句言われがちなのがすごく疑問。

急上昇ワード改