ニコニコ大百科モバイル

7/2(月)よりスマホまたはPCでアクセスした場合、各デバイス向けのサイトへ自動で転送致します


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


ヨミ: ニコニコダイヒャッカエイチティーエムエルテンプレートシュウ
掲示板をミル!
216カキコ!

ニコニコ大百科: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>

表示サンプル

Before
After

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

▲目次へ

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

ソースコード以外のものを表示するときは<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を画像に対して使用することもできる。

ソースコード


次へ»
最終更新日: 19/10/13 00:00
タグ検索 パソコン版を見る


[0]TOP
ニコニコ動画モバイル
運営元:ドワンゴ