■説明を下に入れる(表組み)
ここからは結構難しいです。7日目の目的は写真の下に説明を入れる方法です。何が難しいのかと言うと表組みを使う点です。
これができるようになると、写真、文章を好きな位置に設定できます。ここでは簡単に1行・2列の表(写真が2つ横に並ぶ)について考えましょう。表を構成している主なタグは<table>、<th>、<tr>、<td>の4種類です。(他にもあるようですが、ここでは4つだけ書きます)
【表作成の考え方】
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度押しておくと写真の下に題名がきます。押さないと写真の横に題名がきます。(結構重要だと思います)
今回で『gooブログに写真を貼る』の記事はおしまいにするつもりです。これを読んでいる方の参考になれば幸いです。
【補足1】
表全体を中央揃えにするには<table>~</table>の前後を<center></center>タグで囲うと良いでしょう。
【書式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>タグを削除。
ここからは結構難しいです。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日目に戻る
【補足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>
![]() サムネイル |
表自体の周りに文字を回りこませる方法。例えば、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>タグを削除。
さすが!ととち先生