TABLEタグ・・・・
いきなり何を言っているんだと思われると思いますが、
先の記事の続きで、ワタシが以前伝授したHTMLタグのことで、
「色々・・・」のkmssmintさんのBlogの表示が壊れてしまいました。
問題は、ワタシのお伝えしそびれたことにありまして、今回、この場所を使って、
改良点を説明したいと思います。
HTMLにご興味のない方は、どうか読み飛ばしてくださいましね。<m(__)m>
立花 然さん、今回はtableタグのことでスミマセンでした。
Isakuさんに確認いただいて、正常に見られるブラウザを使っている人と、そうでないブラウザがあることがわかりましたので、InternetExplorerで見ている人のために、書き変えていただきたいことを、ご説明します。
まず。Blogの記事に写真の横に文面を表示するには、主にふたつの方法があります。
ひとつは<table>を使う方法。もうひとつは画像に文章を回し込む方法です。
今回、然さんには<table>を使う方法をお教えしたのですが、ひとつ足りなかったのは、画像のサイズを指定しそびれている点にありました。
例えば <td>に横幅100pxを指定するために<td width="100">としても、実際の画像に横幅を指定しそびれた場合、アップロードした時の800pxが反映されてしまいます。
そうすると、InternetExplorerというブラウザで見ている人 ( ワタシ ) は、先のような表示になってしまうんです。
【今回の改善点】
HTML編集画面で、<table>の部分の赤字を削除、オレンジ字を追加してみてください。
<table style="height: 260px;" width="603">
<tbody>
<tr>
<td width="100" valign="top">
<p><img class="hatena-fotolife" title="f:id:kmssmint:××××××××××××:plain" src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kmssmint/×××××××/××××××××××.jpg" alt="f:id:kmssmint:××××××××××××××:plain" width="350" /></p>
</td>
<td width="210" width="240" valign="top"><p>本文</p>
</td>
</tr>
</tbody>
</table>
画像の欄の<td>にはあえてwidthの命令はせず、その代わり必ず画像<img>のカッコの最後にwidthの命令を追加してください。
これを書かないと、アップロードした時の画像の大きさ800pxの写真になってしまいます。
立花 然さんのカラム幅は、確か600pxくらいだったと思いますので、
画像のwidthと、本文のwidthの合計を590以内におさえればはみ出さないハズ。
以上のタグで ↓↓↓ のように見れるようになりました。
 |
職場の人から、大粒の梅をもらったので、7月4日、はちみつに漬け込む。 朝晩、この大きな瓶を振るのが大変でした。振らないと、腐敗が始まるようです。気温が上昇しだしたころから、保冷剤を入れたダンボール箱で管理していたのです。ようやく3週間が経ちました♪ |
上は、画像をwidth="350" 、本文を width="240" にしましたが、
画像と本文のバランスを変える場合、例えば 画像のwidth="300"にすれば、その代わり本文の width="290"と広くすることも出来るワケです。
画像を300、文面を290にしたのが ↓↓↓ です。
|
職場の人から、大粒の梅をもらったので、7月4日、はちみつに漬け込む。 朝晩、この大きな瓶を振るのが大変でした。振らないと、腐敗が始まるようです。気温が上昇しだしたころから、保冷剤を入れたダンボール箱で管理していたのです。ようやく3週間が経ちました♪ |
以上のやり方で、先日アップされたパプリカの方も同様に修正していただけますか。
立花さん、どうぞよろしくお願いします。
これでちゃんと見れるといいんだけどなあ。。ドキドキ。
