HTML4.01からXHTMLへ 図形のalign属性によるWin+IEの表示の不具合を直す。

　yozoの別ブログのうさもの気が向いたと記の2006年8月9日の記事BlogPet俳句を求めて三千里?マルコyozo＆うさみちゃん編?＠後姿ラブリー同盟で、BlogPetの俳句の画像は表示されても、記事本文が表示されたりされなかったりという不具合がありました。記事内のタグの閉じ忘れやら、記述ミスのチェックをしても、これといったミスもなく、どうしようもなくなったので、シーサーサポートにメッセージを送って回答をもらいました。（実は２回メッセージのやりとりをしました。）

　背景画像を使用している箇所に、align属性の入っている画像タグを挿入した際に、Windows IEで連絡した現象が発生しており、下記方法での記事の編集をしてほしいとのこと。
・imgタグにalign属性を挿入しない
・align属性を挿入せず、tableを使用して記事の投稿を行う

BlogPet俳句を求めて三千里?マルコyozo＆うさみちゃん編?＠後姿ラブリー同盟の記事では、下のように記事にしていました。

[記事表示]

　うさみちゃんは、ここうさもの気が向いたと記のyozoんちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑）
「このしたは　選択したり　よろしけれ」
　これは、４回目のクリックで詠んだ俳句でした。
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）

[投稿内容]

<img src="画像URL" width="128" height="168" border="0" alt="usami_575.jpg" align="left"><br>
　<font color="#FF3300">うさみ</font>ちゃんは、ここ<a href="http://usamo.seesaa.net/">うさもの気が向いたと記</a>の<a href="http://www.blogpet.net/profile.php?id=efb6110af1f8aec81f5a51b33c3da27e">yozo</a>んちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑）<br>
<div align="center"><font color="#007495">「このしたは　選択したり　よろしけれ」</font></div><br>
　これは、４回目のクリックで詠んだ俳句でした。<br>
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）<br clear="all"/>

　おもいっきり、<img>の中にalign="left"が入ってますね。でも、これをなくすと、画像の右に文字が回り込みしてくれないので、tableを組むと重くなるので嫌だし･･･っとそこで、愛用の標準HTML、CSS&JavaScript辞典で調べると、CSSを使って、次のようにするとありましたので、やってみました。

<p><img src="http://?省略?" style="float:left;">･･･････････画像の右側の文章････</p>

　これでこの記事すべての<img>タグ22個を修正して、再投稿すると、見事に表示のエラーは消えてくれました。(*^-ﾟ)vｨｪｨ♪

　お友達のROOM-Mのmioさんの記事HTML4.01から、XHTMLへの記事で紹介されていたAnother HTML-lint gatewayでエラーのチェックをしました。(下は2006/08/17現在の結果です。これでも最初よりもエラーの数は200個は減ってます。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･ )

http://yozoblog2.blog63.fc2.com/ を XHTML1.0 Transitional としてチェックしました。530個のエラーがありました。このHTMLは -50点です。タグが 41種類 1521組使われています。?以下省略?

　このAnother HTML-lint gatewayは、URLを入力するだけで、ブログのエラーのチェックができて、解説もでてくるという優れものです。みなさんも是非トライしてみてくださいね。とてもいい勉強になりますよ。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ

　そして昨日(8/16)、これまたお友達の、のんびり前進じたばた生活のまゆびさんの記事HTML4.01とXHTMLによりますと、ブログの世界では、HTML4.01からXHTMLへと移行していて、XHTMLに対応させておかないと、ブラウザによっては上手く表示されない等の不具合を招くことにもなりかねないとのこと。まさしく今回のyozoのケースそのものでした。

　お二人の記事と、Another HTML-lint gatewayのチェック結果の解説により、以下の項目を修正しました。楽しくブログを続けるためにも、エラーのない記事を作成して、どのブラウザでも正しく表示できるようにしたいなぁとあらためて思いましたよ。
　また、以前のyozoの回り込みやセンタリングについての記事センタリング♪についても、全面的に修正させていただきました。m(_ _)m

• <img>の中のborderはCSSで設定するので、削除しました。
  また、align="left"については、style="float:left;"に書き換えました。
  終わりに「半角スペース+/」を挿入しました。<img />
• <font>による文字サイズや色などの設定はすべてCSSでするようにして、<font>は使わないようにしました。
• <div align="center">は<p style="text-align:center;">としました。
• 不要な<br>は削除しました。必要な分は<br />に変更しました。
• <br clear="all"/>は<br style="clear:both;" />に変更しました。

<p><img src="画像URL" width="128" height="168" alt="usami_575.jpg" style="float:left;" />　<span style="color:#ff3300;">うさみ</span>ちゃんは、ここ<a href="http://usamo.seesaa.net/">うさもの気が向いたと記</a>の<a href="http://www.blogpet.net/profile.php?id=efb6110af1f8aec81f5a51b33c3da27e">yozo</a>んちのこうさぎです。この記事の主人公なので紹介させていただきました。（笑）<br />
<span style="color:#007495;">「このしたは　選択したり　よろしけれ」</span><br />
　これは、４回目のクリックで詠んだ俳句でした。
　この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな？（笑）<br style="clear:both;" /></p>

お友達のXHTML関連記事の案内
記事名をクリックすると設定記事が別窓で開きます。
参考にしてくださいね。m(_ _)m

• ROOM-Mのmioさんの記事HTML4.01から、XHTMLへ
• のんびり前進じたばた生活のまゆびさんの記事HTML4.01とXHTML
• KOROPPYの本棚のKOROPPYさんの記事 ブログの文法をチェックしてみました
• 徒然冩眞館のmaRkさんの記事 HTML4.01からXHTMLへ について

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

2006/08/19修正

• <br clear="all"/>は削除しました。
  ↓
  <br clear="all"/>は削除しました。<br style="clear:both;" />に変更しました。

  
  

  　また、同様にコード見本に<br style="clear:both;" />を追加しました。
  よろしくお願いしまーすということかな？（笑）</p>
  ↓
  よろしくお願いしまーすということかな？（笑）<br style="clear:both;" /></p>

1. 画像を左に配置してそのとなりに文字を書く。（CSS編集）
2. 画像を左右に並べて間に文を書く
3. 画像タグのエラーを回避する。
4. センタリング♪

↓　ぽちっと応援お願いします♪ m(_ _)m