gooブログに写真を貼る 第７日目

■説明を下に入れる（表組み）

ここからは結構難しいです。7日目の目的は写真の下に説明を入れる方法です。何が難しいのかと言うと表組みを使う点です。

これができるようになると、写真、文章を好きな位置に設定できます。ここでは簡単に1行・2列の表（写真が2つ横に並ぶ）について考えましょう。表を構成している主なタグは<table>、<th>、<tr>、<td>の４種類です。（他にもあるようですが、ここでは4つだけ書きます）

タグ名	役 目	終わりのタグ
<table>	表のエリアを指定する	</table>
<th>	表の見出し	</th>
<tr>	表の行を指定する	</tr>
<td>	表のデータ部分を指定する	</td>

【表作成の考え方】
１．表は<table>タグで始めます。
２．写真を入れるだけなら<th>タグは必要ありません。
３．行の始めは<tr>タグで始まり、</tr>で終わります。
４．各セルは<td>で始まり、</td>で終わります。
５．最後は</table>タグで終わります。

【基本的な形】
<table>
　　<tr><td></td><td></td></tr>
　　<tr><td></td><td></td></tr>
</table>
このような形をとります。ただし、gooブログではやみくもに改行、インデントをすると形が変わりますから、必要な部分だけ改行を行います。最初は上のような形にして、あとから改行、インデントを消します。

4日目と同じようにタグを作ります。 必要な属性も加えておきます。
<a href="http://blogimg.goo.ne.jp/user_image/3b/35 /9167c98c9601e04e791ef0dad16a6183.jpg" target="_blank"><img src="http://blogimg.goo.ne.jp/user_image/3b/35 /9167c98c9601e04e791ef0dad16a6183.jpg" width="120" border="0"></a>
このタグの集合をここでは仮にタグ群と呼ぶ事にします。

ですから、1行、2列の表のタグは
<table><tr><td align="center">『写真1のタグ群』←ここでEnterしておく
写真1の題名</td><td align="center">『写真2のタグ群』←ここもEnterしておく
写真2の題名</td></tr></table>
とこのような形になります。<td>タグに『align="center"』属性を加えておくと<td>～</td>内が中央揃えになり見やすいでしょう。

また、タグ群の最後にEnterキーを1度押しておくと写真の下に題名がきます。押さないと写真の横に題名がきます。（結構重要だと思います）

サムネイル1

サムネイル2

今回で『gooブログに写真を貼る』の記事はおしまいにするつもりです。これを読んでいる方の参考になれば幸いです。

おしまい　1日目に戻る

---

【補足１】
表全体を中央揃えにするには<table>～</table>の前後を<center></center>タグで囲うと良いでしょう。

サムネイル1

サムネイル2

【書式１】（このまま使えるよ）
<center><table><tr><td align="center"><a href="写真1のURL" target="_blank"><img src="サムネイル1のURL" width=120></a>
写真1の題名</td><td align="center"><a href="写真2のURL" target="_blank"><img src="サムネイル2のURL" width=120></a>
写真2の題名</td></tr></table></center>

サムネイル

【補足２】
表自体の周りに文字を回りこませる方法。例えば、1行1列の表の回りに文字を回り込ませるのには<table>タグの中に『align="center"』属性を書けばよいです。（ととちはこれをよく使います）

【書式２】（これもこのまま使えるよ）
<table align="right"><tr><td align="center"><a href="写真のURL" target="_blank"><img src="サムネイルのURL" width=120></a>
写真の題名</td></tr></table>

---

修正）（2009/08/09）
書式2のタグの<center>～</center>タグを削除。