■説明を下に入れる(表組み)
ここからは結構難しいです。7日目の目的は写真の下に説明を入れる方法です。何が難しいのかと言うと表組みを使う点です。
これができるようになると、写真、文章を好きな位置に設定できます。ここでは簡単に1行・2列の表(写真が2つ横に並ぶ)について考えましょう。表を構成している主なタグは<table>、<th>、<tr>、<td>の4種類です。(他にもあるようですが、ここでは4つだけ書きます)
タグ名
| 役 目
| 終わりのタグ
|
---|
|
<table> | 表のエリアを指定する
| </table> |
<th> | 表の見出し | </th> |
<tr> | 表の行を指定する | </tr> |
<td> | 表のデータ部分を指定する | </td> |
【表作成の考え方】
1.表は<table>タグで始めます。
2.写真を入れるだけなら<th>タグは必要ありません。
3.行の始めは<tr>タグで始まり、</tr>で終わります。
4.各セルは<td>で始まり、</td>で終わります。
5.最後は</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
|
【書式1】(このまま使えるよ)
<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> サムネイル
|
【補足2】
表自体の周りに文字を回りこませる方法。例えば、1行1列の表の回りに文字を回り込ませるのには<table>タグの中に『align="center"』属性を書けばよいです。(ととちはこれをよく使います)
【書式2】(これもこのまま使えるよ)
<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>タグを削除。