今注目のニュース
ドイツで犬、猫、猿などに「暴力的な」動物実験 「犬は殺されるために檻から出されても尻尾を振っていた」
寝ていると鳥たちがあつまる止まり木としての猫
37歳、年収900万円の非モテ男性「アラフォー女性しか寄ってこず、20代は手応えがない。青春に未練がある」という嘆き

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

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

掲示板をみる(216)
  • twitter
  • facebook
  • はてな
  • LINE

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

概要

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

目次

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

末尾にリンク集があります。
使用できるタグニコニコ大百科: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ゴシック',sans-serif;">
(ここにアスキーアート
</p>

表示サンプル

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

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

▲目次へ

表のセルリンクをたくさん詰め込む場合とかに活用
レイアウトが崩れてしまうと困る場合など、最小限の利用にとどめること。

ソースコード

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

表示サンプル

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

▲目次へ

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

ソースコード以外のものを表示するときは<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
デフォルトと同サイズの場合は不要
大百科デフォルト設定は
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: 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

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

サムネイル画像の特徴

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

表示サンプル130×100

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

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

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

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

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で定可なものは以下の通り。
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

samune

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

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

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

ヘブン状態!ヘブン状態

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

▲目次へ

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

ソースコード

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

商品の貼り付け

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

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

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

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

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

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

書式:[az]+[ASINコード又はISBN-10コード]
IDの例az12345678901234567890は架ASINコード

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

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

書式:[ys]+[ショップコード]+[ _ ]+[ショップ内での商品コード]
IDの例yshogehoge_ABC123hogehogeは架の店名、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タグを表示調整に使用しているなど特殊な場合レイアウトが崩れるため表示のチェックはすること。

その他テンプレート

▲目次へ

関連項目

▲目次へ

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

▲目次へ

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

掲示板

急上昇ワード

最終更新:2019/10/17(木) 12:00

ほめられた記事

最終更新:2019/10/17(木) 12:00

☆オススメの関連コンテンツ

動画

この記事名で動画を検索

静画(イラスト)

この記事名で静画を検索

ニュース

この記事名でニュースを検索

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

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

OK

追加に失敗しました。

OK

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

           

ほめた!

すでにほめています。

すでにほめています。

ほめるを取消しました。

OK

ほめるに失敗しました。

OK

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

OK

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

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

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

TOP