画像・フレームに関する要素

ニコニコ大百科:HTMLタグ一覧 HTMLタグの一覧 画像・フレームに関する要素

画像・フレームに関する要素一覧

• 画像を貼る<img src="【画像URL】" alt="【代替テキスト】">
• インラインフレーム（及びピコカキコ）を貼る<iframe></iframe>

クリックするとジャンプします

画像を貼る

↑

---

書式は<img src="【画像のURL】" alt="【画像の代替テキスト】"/>です。

src属性及びalt属性は必須です。alt属性は画像が表示されなかった場合に、そこに本来画像があることを示すためのものです。

alt属性はツールチップ（カーソルを重ねた時に表示されるテキスト）ではありません。ツールチップを使いたい場合は、以下のようにtitle属性（title="【ツールチップとなる文字】"）を追加してください。

ソースコード
<img alt="ピカチュウ" src="https://dic.nicovideo.jp/oekaki/12060.png" /> 　　　<img alt="ピカチュウ" src="https://dic.nicovideo.jp/oekaki/12060.png" title="ピカチュウ" />
表示結果

また、width属性（width="【画像の横幅(px単位)】"）、height属性（height="【画像の縦幅(px単位)】"）を指定する事で、画像の大きさを変更する事が出来ます。ただし、元の画像を拡大・縮小するだけなので画像が粗くなる場合があります。

ソースコード
<p><img alt="ニコニコ大百科（小）" src="/oekaki/164733.png" width="128" height="25"/></p> <p><img alt="ニコニコ大百科（中）" src="/oekaki/164733.png"/></p> <p><img alt="ニコニコ大百科（大）" src="/oekaki/164733.png" width="512" height="100"/></p>
表示結果

なお大百科で使える画像は、

• お絵カキコの絵（https://dic.nicovideo.jp/oekaki/【お絵カキコID】.png）
• お絵カキコの絵のサムネイル（https://dic.nicovideo.jp/oekaki_thumb/【お絵カキコID】.png）
• 動画サムネイル（http://tn-skr.smilevideo.jp/smile?i=【sm、nm抜きの動画ID】）
• ニコニコミュニティのシンボル（http://icon.nicovideo.jp/community/co【コミュニティID】.jpg）
• ニコニコチャンネルのシンボル（http://icon.nicovideo.jp/channnel/ch【チャンネルID】.jpg）
• ニコニ・コモンズのサムネイル（http://deliver.niconicommons.jp/thumbnail/nc【コモンズID】）

のみです。お絵カキコのサムネイルとは、お絵カキコの縦横長い方の一片を120pxに等比縮小した画像です。お絵カキコに比べて線が滑らかになる一方、画像がブレた様な印象になります。

※工夫をすればニコニコ静画のサムネイルやニコニコ市場の画像も利用できます。詳しくはニコニコ大百科:HTMLテンプレート集のニコニコ市場サムネイル表示（影付き）やニコニコ静画サムネイル表示をご覧ください。

ソースコード
<p> <img alt="ニコニコ大百科（お絵カキコ）" src="https://dic.nicovideo.jp/oekaki/1.png" width="120" height="120"/>　 <img alt="ニコニコ大百科（お絵カキコサムネ）" src="https://dic.nicovideo.jp/oekaki_thumb/1.png" width="120" height="120"/> </p> <p> <img alt="sm9動画サムネ" src="https://nicovideo.cdn.nimg.jp/thumbnails/9/9"/>　 <img alt="co1コミュシンボル" src="https://secure-dcdn.cdn.nimg.jp/comch/community-icon/128x128/co1.jpg"/>　 <img alt="ch1チャンネルシンボル" src="https://secure-dcdn.cdn.nimg.jp/comch/channel-icon/128x128/ch1.jpg"/>　 <img alt="ヘブン状態！" src="https://deliver.commons.nicovideo.jp/thumbnail/nc1620"/> </p>
表示結果

img要素はインライン置換要素という特殊な要素で、文法的な扱いはインライン要素ですが、ブロックレベル要素と同じように幅や高さを指定できます。

大百科では、お絵カキコの画像には自動的に元画像へのリンクが張られます。それを避けたい場合には適当なhref属性を指定するか、空要素（divなど）の背景に画像を指定し、幅と高さを調整してください。

インラインフレーム（及びピコカキコ）を貼る

↑

---

大百科では動画・静画・生放送・コミュニティ・チャンネル・マイリスト・ユーザーページ・商品をインラインフレームを利用して、またピコカキコをimgタグを利用して張り付ける事が出来ます。

各々のHTMLソースの赤太字の部分を変更して使用してください。なお商品を張り付ける場合は、ページ下方の商品の張り付け方の説明を参照してください。

ソースコード	表示結果
<iframe frameborder="0" height="176" scrolling="no" src="https://ext.nicovideo.jp/thumb/sm9" width="312"></iframe>
<iframe frameborder="0" height="176" scrolling="no" src="https://ext.nicovideo.jp/thumb_mylist/6342698" width="312"></iframe>
<iframe frameborder="0" height="176" scrolling="no" src="https://ext.seiga.nicovideo.jp/thumb/sg1" width="312"></iframe>
<iframe class="nicovideo" frameborder="0" height="176" scrolling="no" src="https://ext.seiga.nicovideo.jp/thumb/im355089" width="312"></iframe>
<iframe width="320" height="160" src="https://ext.nicovideo.jp/thumb_user/4" scrolling="no" frameborder="0"></iframe>
<iframe frameborder="0" height="176" scrolling="no" src="https://live.nicovideo.jp/embed/lv8931212" width="312"></iframe>
<iframe frameborder="0" height="176" scrolling="no" src="https://ext.nicovideo.jp/thumb_community/co1" width="312"></iframe>
<iframe frameborder="0" height="176" scrolling="no" src="https://ext.nicovideo.jp/thumb_channel/ch1" width="312"></iframe>
<iframe class="nicoichiba" frameborder="0" height="260" scrolling="no" src="https://ichiba.nicovideo.jp/parts/item/az406214767X" width="155"></iframe>
<iframe class="nicoichiba2" frameborder="0" height="210" scrolling="no" src="https://ext.ichiba.nicovideo.jp/thumb/az406214767X" width="312"></iframe>
<img src="/img/pikoplayer.png" alt="296" height="18" width="86" />

商品の貼り付け方

貼り付ける商品IDは、ニコニコ市場のものを使う方法と、AmazonあるいはYahoo!ショッピングの各IDを元に手打ちで生成する方法の2通りがあります。

• ニコニコ市場の商品IDを使う

  商品IDは、 ニコニコ動画TOPページ下方→ニコニコ市場→目当ての商品を検索→表示された商品のURL中、/item/以降の文字列を使用します。amazonなら"az" で始まる文字列、yahooショッピングなら"ys*****_" で始まる文字列が商品IDです（*****にはショップ名を表す文字数不定の英文字が入る）。

• AmazonのIDを元に生成する

  書式：[az]+[ASINコード又はISBN-10コード]

  Amazonの場合、「商品の詳細」欄に書かれている 10桁の英数字から成る、ASINコード（書籍類の場合は10桁の数字から成るISBN-10コード）の先頭に購入先サイト識別子"az"を付加して作成します。

  IDの例：az1234567890（なお、1234567890 は架空のASINコードである）

• Yahoo!ショッピングのIDを元に生成する

  書式：[ys]+ [URL内に記載されたショップ名]+[ _ ]+[ショップ内での商品コード]

  • ショップ名に関して

    Yahoo!ショッピングの場合、ショップの URL"http://store.shopping.yahoo.co.jp" に続く、二つの”/”で挟まれた英文字がショップを表す固有の文字列となります。仮に、ショップのURLが”http://store.shopping.yahoo.co.jp/hogehoge/index.html” ならば、"hogehoge"が固有のショップ名を表す文字列です（この場合、日本語の屋号・店舗名はID生成に一切関係がない）。

  • 商品コードに関して

    そのショップ内の商品説明欄にある商品コード（桁数はショップによって不定。英字・数字・記号[ハイフン等]が混ざるコードも存在する。また、商品コードの直下にある「JANコード」と間違えないこと）を調べ、先に書いたショップ名を表す文字列の後ろに"_"を加え、その後ろに商品コードを続けて記述します。

  • 購入先のサイト識別子を付加する

    文字列先頭に"ys"を付加することでYahoo!ショッピング商品の貼付け用IDが完成します。

  • IDの例：yshogehoge_ABC123（なお、hogehogeは架空の店名、ABC123は架空の商品コードである）

iframe要素に関しては今の所、width・heightプロパティは設定できません。仮に規定値以外の値にしても、投稿する際に元に戻ってしまいます。

ニコニコ大百科:HTMLタグ一覧

この記事に関するご意見・ご要望は元記事にお願い致します。