あなたのブログをきれいにする方法教えます～ブログデザイナーヒナによるブログデザインＱ＆Ａ～

今日は、写真などの画像をならべて表示する書き方を説明しますね！

たとえば…

写真1	写真2	写真3
写真1の説明	写真２の説明	写真３の説明

こんなかんじに写真などの画像を掲載したい場合には…

テーブル<table>タグというのを使います。

こういう↓かんじの表をつくって、その中に、画像などを貼り付けるというわけです。

写真1	写真2	写真3
写真1の説明	写真２の説明	写真３の説明

これを作るには、まず…



のように書きます。




テーブルの書式は↑のように

border="0" : 罫線の太さ（０にすると表示されません）
cellspacing="0" : 罫線と罫線の間隔
cellpadding="10" : 罫線から、文字や画像までの距離。

指定できます。そして上の表は　二行三列。


行は、↑のようにテーブルタグの内側に　trで表します。

列は、行の中に作ります。

これで、一行一列の表ができました。



<td></td>を三つコピーしました…。これで三列になります。

２行にするには…


<tr>から</tr>までをコピーして


こうします…。一行目と二行目で、同じ列数になるように書いてください。

改行されてると、もうちょっと見やすいのですが、楽天広場で日記に書き込む場合には<table>タグの内側で改行するとまずいことになるので注意してください。（文章自体の改行以外）

そして、


と、<td>タグの間に、コンテンツを書き込みます。

全部、テキストで手打ちするとけっこう大変ですね…（説明のためにたくさん書いたらつかれる…ううう）

ソフトを使うとちょっとらくに書けるのですが、改行を勝手に入れてHTMLを作成するので、楽天で表示するには、改行を全部削除しないといけなくて、それはそれでまた面倒です…。

たぶん上のソースをコピーしてメモ帳に貼り付け、★～★のところを書き換えるのが一番楽かも…。

★と★の間いがいのところでは、改行しないよう、くれぐれもご注意を…。


【 ★今日の日記はいかがでしたか？　お役に立てましたら、一日一票お願いします♪ 】

---

日記のFAQ更新情報をメルマガ配信始めましたメルマガサンプルとバックナンバー＆配信登録はここをクリックしてください。週１回ていど発行です。

---

【質問募集しまス】

・楽天広場のhtmlで困ったこと、質問があれば、2005年4月はこちらの記事にコメントしてください。自分の日記に質問を書いてトラックバックしていただいてもけっこうです。


【 ★人気ブログランキング参加中。ただいまの順位は？ 】

【ビジネス系のみの新しい注目ブログランキングにも登録してみました：鬼ブログランキング！】
↑他の役立つブログも見に行ってみては？？（クリックするとこのブログの応援になります！ヨロシク！）