EXCELを利用したhtml文作成テクニック単語

• リンク付きサムネ画像のhtml文作成方法
• テーブル作成方法
• スタイルシートのパラメータ値として活用
• 補足
• 関連項目
• 掲示板

ここではEXCELを利用したhtml文の作成方法を紹介しています。
あくまでも一例でありサンプル程度なので、ニコニコ大百科の編集時においての参考程度でお願いします。

他にも方法等があれば情報よろしくお願いします。

リンク付きサムネ画像のhtml文作成方法

リンク付きのサムネイル画像のhtml文については一つ一つテキストエディタ等で作ると時間がかかるので、表計算ソフトを利用して作成していきます。動画IDを"A1"とします。動画IDの上2桁（smとかnmとか）を除く部分がサムネイルのIDになりますのでMID関数を使って抽出します。あとは文字列を組み立ててhtml文を作成します。

リンク先	EXCEL上での記述
ニコニコ大百科の記事	="<a rel="&""""&"nofollow"&""""&" target="&""""&"_blank"&""""&"  href="&""""&"https://dic.nicovideo.jp/v/"&A1&""""&"><img width="&""""&"130"&""""&" src="&""""&"http://tn-skr.smilevideo.jp/smile?i="&MID(A1,3,8)&""""&" height="&""""&"100"&""""&" /></a>"
ニコニコ動画	="<a rel="&""""&"nofollow"&""""&" target="&""""&"_blank"&""""&" href="&""""&"http://www.nicovideo.jp/watch/"&A1&""""&" style="&""""&"padding-right: 0; background-image: none;"&""""&"><img width="&""""&"130"&""""&" src="&""""&"http://tn-skr.smilevideo.jp/smile?i="&MID(A1,3,8)&""""&" height="&""""&"100"&""""&" /></a>"
リンクなし	="<img width="&""""&"130"&""""&" src="&""""&"http://tn-skr.smilevideo.jp/smile?i="&MID(A1,3,8)&""""&" height="&""""&"100"&""""&" /></a>"

複数ある場合は、カット＆ペーストで行数を増やしていきます（A2,A3～）。
作成したhtml文を記事にまとめて貼りつければ、出来上がりです。
この場合「htmlエディタの有効と無効を切り替える」ボタンでhtml文での編集モードで行います。
またサムネ画像の拡大／縮小（width,height）の設定値も上記内容を少しいじればできるようになります。

又、リンク先がニコニコ大百科内であれば"http://dic.nicovideo.jp"の部分については省略可能です。
例えば"https://dic.nicovideo.jp/v/sm9"なら"/v/sm9"でも記載OKです。

例）A1の結果をB1（リンク先はニコニコ大百科の記事）、A2の結果をB2（リンク先はニコニコ動画）に求めます。

	A	B
1	sm1097445	<a rel="nofollow" target="_blank" href="https://dic.nicovideo.jp/v/sm1097445"><img width="130" src="https://nicovideo.cdn.nimg.jp/thumbnails/1097445/1097445" height="100" /></a>
2	sm9	<a rel="nofollow" target="_blank" href="https://www.nicovideo.jp/watch/sm9" style="padding-right: 0; background-image: none;"><img width="130" src="https://nicovideo.cdn.nimg.jp/thumbnails/9/9" height="100" /></a>

計算した結果は以下の通りです。クリックすればB1はニコニコ大百科の記事、B2はニコニコ動画に飛びます。

B1：　　　　B2：

上記の例は画像のサムネイルの場合ではあるが、同様にインラインフレーム（<iframe>～</iframe>）の場合でも
応用可能です。

 

テーブル作成方法

EXCEL上で作成した表からでも簡単な形式であれば一応作成できます。
ヘッダーを"A1～J1"、データ"A2～J2"、"A3～J3"…をとします。
IF関数やtr,th,tdタグを用いてhtml文を作成します。

行	EXCEL上での記述
1行目	="<TABLE BORDER="&""""&"1"&""""&"><tr><th>"&A1&"</th><th>"&B1&"</th>"&IF(C1="","","<th>"&C1&"</th>")&IF(D1="","","<th>"&D1&"</th>")&IF(E1="","","<th>"&E1&"</th>")&IF(F1="","","<th>"&F1&"</th>")&IF(G1="","","<th>"&G1&"</th>")&IF(H1="","","<th>"&H1&"</th>")&IF(I1="","","<th>"&I1&"</th>")&IF(J1="","","<th>"&J1&"</th>")&"</tr>"
2行目以降	="<tr><th>"&A2&"</th><td>"&B2&"</td>"&IF(C2="","","<td>"&C2&"</td>")&IF(D2="","","<td>"&D2&"</td>")&IF(E2="","","<td>"&E2&"</td>")&IF(F2="","","<td>"&F2&"</td>")&IF(G2="","","<td>"&G2&"</td>")&IF(H2="","","<td>"&H2&"</td>")&IF(I2="","","<td>"&I2&"</td>")&IF(J2="","","<td>"&J2&"</td>")&"</tr>"
最終行目	</TABLE>

上記の場合、2～10列までの表形式に対応しています。
2行目以降の一番左列はヘッダ扱いになっています（データにする場合は"th"を"td"に置換します）。
あとはお好みに応じて背景色や文字色なども入れていきます。

例）表A1～G7をhtml文にする場合、上記計算式を列Kに入れてそれぞれの行の結果を求めていきます。

	A	B	C	D	E	F	G	H	I	J	K
1		カイ	メイ	ミク	リン	レン	がく				<TABLE BORDER="1"><tr><th></th><th>カイ</th><th>メイ</th><th>ミク</th><th>リン</th><th>レン</th><th>がく</th></tr>
2	カイ		カイメイ	カイミク	カイリン	カイレン	カイがく				<tr><th>カイ</th><td></td><td>カイメイ</td><td>カイミク</td><td>カイリン</td><td>カイレン</td><td>カイがく</td></tr>
3	メイ	メイカイ		メイミク	メイリン	メイレン	メイがく				<tr><th>メイ</th><td>メイカイ</td><td></td><td>メイミク</td><td>メイリン</td><td>メイレン</td><td>メイがく</td></tr>
4	ミク	ミクカイ	ミクメイ		ミクリン	ミクレン	ミクがく				<tr><th>ミク</th><td>ミクカイ</td><td>ミクメイ</td><td></td><td>ミクリン</td><td>ミクレン</td><td>ミクがく</td></tr>
5	リン	リンカイ	リンメイ	リンミク		リンレン	リンがく				<tr><th>リン</th><td>リンカイ</td><td>リンメイ</td><td>リンミク</td><td></td><td>リンレン</td><td>リンがく</td></tr>
6	レン	レンカイ	レンメイ	レンミク	レンリン		レンがく				<tr><th>レン</th><td>レンカイ</td><td>レンメイ</td><td>レンミク</td><td>レンリン</td><td></td><td>レンがく</td></tr>
7	がく	がくカイ	がくメイ	がくミク	がくリン	がくレン					<tr><th>がく</th><td>がくカイ</td><td>がくメイ</td><td>がくミク</td><td>がくリン</td><td>がくレン</td><td></td></tr>
8											</TABLE>

列K1～8の結果をhtmlエディタにて貼り付けを行います。結果は以下の通りです。

	カイ	メイ	ミク	リン	レン	がく
カイ		カイメイ	カイミク	カイリン	カイレン	カイがく
メイ	メイカイ		メイミク	メイリン	メイレン	メイがく
ミク	ミクカイ	ミクメイ		ミクリン	ミクレン	ミクがく
リン	リンカイ	リンメイ	リンミク		リンレン	リンがく
レン	レンカイ	レンメイ	レンミク	レンリン		レンがく
がく	がくカイ	がくメイ	がくミク	がくリン	がくレン

 

スタイルシートのパラメータ値として活用

スタイルシート（styleで定義した部分）上のパラメータ値も違うセル上で定義し、そこから呼び出す形でhtml文を組み立てるという手段もあります。例えば以下の通り作成したとします。

	A	B	C	D	E	F	G
1
2	あ		<span style="color: #ff0000;">	=A2	</span>		=C2&D2&E2
3	い		<span style="color: #ff0000;">	=A3	</span>		=C3&D3&E3
4	う		<span style="color: #ff0000;">	=A4	</span>		=C4&D4&E4

C2～4までの設定値を"#ff0000"から"#ff00ff"に変更したい場合、その値を記述しているセルの値を置換する必要があります。少ないようであれば一括置換だけで済みますが、他のセルでも同じ値があってしまうと誤って違うところまで変更してしまう恐れがあります。その為には予め設定値用のセルを設けて、そこからリンクさせる方法をとります。

	A	B	C	D	E	F	G
1			#ff00ff;
2	あ		="<span style="&""""&"color: "&$C1&"&""""&">"	=A2	</span>		=C2&D2&E2
3	い		="<span style="&""""&"color: "&$C1&"&""""&">"	=A3	</span>		=C3&D3&E3
4	う		="<span style="&""""&"color: "&$C1&"&""""&">"	=A4	</span>		=C4&D4&E4

上記の通りで行うと、C1の値を変更するだけでC2～4までの値が全て自動変更されます。

 

補足

html文にある「"」について

EXCEL上では「""""」という形に置き換える必要があるのでご注意下さい。

 

関連項目

• ニコニコ大百科:編集者向けのページ
• ニコニコ大百科:HTMLタグ一覧