作り方講座

Step4.作成したソースに貼り付け

■「吹き出し」の使い方講座■

Step.2でコピーしたものをStep.0で作成したソース(index.htm)に貼り付けます。
ここの作業はテキストエディタ系のソフトで編集してください。
「ここに吹き出しを入れる。」と書いておいた場所に貼り付けます。

テキストエディタ系のソフトで、index.htmを開きます。
「ここに吹き出しを入れる。」と書いた部分を探します。
「ここに…入れる。」を消して、「ここに…入れる。」があった部分にStep.2でコピーしたソースを貼り付けます。

Step.1のソースにStep.2でコピーしたものを貼り付けたあとのソースです。
ごちゃごちゃしてて抵抗あるかもしれませんが、ここはぐっとこらえて次ぎの工程へ。

<TABLE BORDER="3">
<TR>
	<TD><IMG SRC="m_b01.png" ALT="キャラクター" WIDTH="32" HEIGHT="32"></TD>
	<TD>
		<!-- ここから吹き出し -->
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR><TD HEIGHT="1"></TD><TD HEIGHT="1"></TD><TD HEIGHT="1"></TD><TD BGCOLOR="BLACK" HEIGHT="1"><IMG src="white/dummy01.png" BORDER="0" WIDTH="1" HEIGHT="1"></TD><TD HEIGHT="1"></TD><TD HEIGHT="1"></TD></TR>
<TR><TD></TD><TD></TD><TD><IMG src="white/fuki201.png" BORDER="0"></TD><TD BGCOLOR="WHITE"><IMG src="white/dummy01.png" BORDER="0" WIDTH="1" HEIGHT="1"></TD><TD><IMG src="white/fuki202.png" BORDER="0"></TD><TD></TD></TR>
<TR><TD><IMG src="white/fuil209.png" BORDER="0" WIDTH="16" HEIGHT="16"></TD>
    <TD BGCOLOR="BLACK"><IMG src="white/dummy04.png" BORDER="0" WIDTH="1" HEIGHT="16"></TD>
    <TD BGCOLOR="WHITE"><IMG src="white/dummy01.png" BORDER="0" WIDTH="1" HEIGHT="1"></TD><TD BGCOLOR="WHITE">
<!-- 台詞 -->
	##############################</TD>
    <TD BGCOLOR="WHITE"><IMG src="white/dummy01.png" BORDER="0" WIDTH="1" HEIGHT="1"></TD>
    <TD BGCOLOR="BLACK"><IMG src="white/dummy01.png" BORDER="0" WIDTH="1" HEIGHT="1"></TD></TR>
<TR><TD></TD><TD></TD><TD><IMG src="white/fuki203.png" BORDER="0"></TD><TD BGCOLOR="WHITE"><IMG src="white/dummy01.png" BORDER="0" WIDTH="1" HEIGHT="1"></TD><TD><IMG src="white/fuki204.png" BORDER="0"></TD><TD></TD></TR>
<TR><TD HEIGHT="1"></TD><TD HEIGHT="1"></TD><TD HEIGHT="1"></TD><TD BGCOLOR="BLACK" HEIGHT="1"><IMG src="white/dummy01.png" BORDER="0" WIDTH="1" HEIGHT="1"></TD><TD HEIGHT="1"></TD><TD HEIGHT="1"></TD></TR>
</TABLE>
		<!-- ここまで吹き出し -->
	</TD>
</TR>
</TABLE>



			##############################

保存してブラウザで確認してみましょう。
うまく出来ましたでしょうか？

上のソースを見て「うっ…(-_-lll」と、なられたかもしれませんが作業自体は簡単だった…でしょ？

吹き出しの形が崩れていたら、ブラウザの「更新」ボタンを一度押してみてください。
それでもうまく表示されない場合は、もう一度一番最初（Step.0）からやり直すか見直してみてください。

Step4.作成したソースに貼り付け

<<戻る　　次へ>>