--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2006年08月17日

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

 yozoの別ブログのうさもの気が向いたと記の2006年8月9日の記事BlogPet俳句を求めて三千里?マルコyozo&うさみちゃん編?@後姿ラブリー同盟で、BlogPetの俳句の画像は表示されても、記事本文が表示されたりされなかったりという不具合がありました。記事内のタグの閉じ忘れやら、記述ミスのチェックをしても、これといったミスもなく、どうしようもなくなったので、シーサーサポートにメッセージを送って回答をもらいました。(実は2回メッセージのやりとりをしました。)
 背景画像を使用している箇所に、align属性の入っている画像タグを挿入した際に、Windows IEで連絡した現象が発生しており、下記方法での記事の編集をしてほしいとのこと。
・imgタグにalign属性を挿入しない
・align属性を挿入せず、tableを使用して記事の投稿を行う

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

[記事表示]

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


[投稿内容]


<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>
 これは、4回目のクリックで詠んだ俳句でした。<br>
 この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな?(笑)<br clear="all"/>

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


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

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


 お友達のROOM-Mmioさんの記事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 />
 これは、4回目のクリックで詠んだ俳句でした。
 この俳句のしたにあるのは、お友達の詠んだ俳句です。よろしくお願いしまーすということかな?(笑)<br style="clear:both;" /></p>

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



↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


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>



↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New BlogPetうさもwithうらら 2匹deツッコミ@後姿ラブリー同盟 | Top | プラグインや最新のコメントなどにスクロールバーを設置する Old≫

トラックバックURL


トラックバック

HTML4.01からXHTMLへ について from 徒然冩眞館
yozoさまのブログのエントリより、「HTML4.01からXHTMLへ 図形のalign属性によるWin+IEの表示の不具合を直す。」について [Read More]

コメント

yozoさん、こんばんは♪(*゚▽゚)ノ
トラバありがとうございます。<(_ _)>
こちらからも送らせていただきました♪(*^-^)ニコ
それにしてもすごくタイムリーな記事を!!
ちょうどまゆびも画像を入れた記事をどうやって書こうか
悩んでいたところだったのです。
imgタグにalignが入れられないとは!!
こちらのおかげでエラーなく2匹でツッコミに参加できそうです♪
素敵な情報ありがとうございました!!(*'ー')

コメント

>まゆびさん、こんばんはー♪
トラバ返してくださってありがとーございまっす♪m(_ _)m

>それにしてもすごくタイムリーな記事を!!
>ちょうどまゆびも画像を入れた記事をどうやって書こうか
>悩んでいたところだったのです。
そうだったのですか?それは偶然ですが、お役に立ててうれしいですよ。
ただし、これがベストかどうかというのは不明ですけどね。取りあえずはエラーはないと思います。yozoのきっかけは、ご存知の通りのseesaaブログの表示エラーの解消でしたね。これも偶然ですけどね。(*^-^)

>imgタグにalignが入れられないとは!!
>こちらのおかげでエラーなく2匹でツッコミに参加できそうです♪
そうなんですよ。実はネタがあるのに、記事にしにくかったのです。エラーを増やして、見にくいブログになるのも嫌ですからね。┐( ̄ヘ ̄)┌ ヤレヤレ・・・
yozoもこれで少しはCSSを使いこなせるようにはなりましたので、
一安心してます。こちらでも、BlogPetネタを用意しなきゃね('-'*)エヘ

コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪

yozoさんのブログはXHTMLなんですねー。
これだけFC2にテンプレートが多く存在していても、ほとんどがXHTMLでは
かかれていないそうですね。
昨日のまゆびさんの記事からそのお友達の記事・・またそのリンク先・・・っと
見ていたらいつかそういうことが書いてあるページに辿り着いていました。

σ(・ω・*)も昨日皆さんに見ていただいたペットのページの修正をしていまして
トップページだけはようやく99点まできましたが・・なかなか難しいですね^^;
とはいえ、私が直しているのはHTML 4.01 Transitionalですが・・・

ブログを書く時に自動的に生成されるタグを見てみたりしたのですが
イマイチ理解できませんでした^^;
例えばリンク先を別窓で開く時など
<a href="http://○○○○~~~~" target="_blank">△△△</a>
などと勝手に生成されるのですが、チェックするサイトではこれがマイナスポイントに加算されてしまいます。
うーん・・頭の中で色々混同しているのか・・・グラグラですよ(笑

なにはともあれ、記事の修正等色々大変だったでしょうけど
お疲れさまでした(´・ω・)(´-ω-)(´_ _)ペコリ

コメント

yozoさん、こんばんわ♪(゚▽゚*)

私もimgタグには多用してるクチですが、こんな不具合があっただなんて知りませんでした。
tableはカンタンといえばそうなのですが、やっぱり重さが気になるトコですよね。
確かにtable使うくらいなら、CSSでfloat使っちゃった方がスマートな気がしますよね。

なんにしても、一度記事にしたモノの修正は結構大変だったハズ。
ご苦労サマでした(゚▽゚;)

コメント

>モンビッケさん、おはよーございまっす♪

>yozoさんのブログはXHTMLなんですねー。
小粋空間のyujiroさん作のFC2用テンプレートなんですよ。FC2がXHTML準拠なので、このテンプレートもXHTML準拠になってますよ。恥ずかしながら、今回初めてDOCTYPEを気にしました。(*v.v)。ハズイ。。。。

>これだけFC2にテンプレートが多く存在していても、
>ほとんどがXHTMLではかかれていないそうですね。
テンプレートの話題だとその内容が多いですね。
これも今回初めて知ったことでしたよ。(*v.v)。ハズイ。。。。

>トップページだけはようやく99点まできましたが・・なかなか難しいですね^^;
おおお!99点までいきましたか!ということは相当ホームページの勉強をされたようですね。ブラウザによる表示の不具合ははっきり言って、ブラウザだけでなく、Webサーバーにも起因することが多いため、すべてを解消できるとは限らないのでしょうが、管理者としては、なるべく不具合のないようにしたいですよね。
それにしても、99点ですか・・・yozoなんてここのブログは、過去記事無視して、
トップページのみでも、『530個のエラー。-50点』ですからね(゚ー゚;Aアセアセ

><a href="http://○○○○~~~~" target="_blank">△△△</a>
target="_blank"については、マナーというか、考え方のようですね。別窓でリンクを開くのでなく、その判断を読者にゆだねるというのが正論のようです。
 yozoは今のところ、target="_blank"中心のリンクです。あくまで紹介先はyozoの記事の参照先ですからね。メインはここの記事というスタンスです。別窓を開いて、yozoの記事にはもう用はないとのことだったら、yozoの記事を閉じてくれればいいと思ってます。記事によってはたくさんの参照先をリンクすることが多いのでtarget="_blank"にしていますよ。(*^-^)
それと、自動入力といえば、seesaaの画像の回り込み設定でalign="left"が普通にimgタグに挿入されるのは一体・・・と思うyozoです。( ̄∀ ̄*)イヒッ

>なにはともあれ、記事の修正等色々大変だったでしょうけど
>お疲れさまでした(´・ω・)(´-ω-)(´_ _)ペコリ
あはは・・・ありがとーございまっす♪m(_ _)m
でもトップページだけですよ。これからエラーのない記述を勉強しながら進めていくようにしたいと思ってます。膨大なページの修正は不可能に近いですからね。┐( ̄ヘ ̄)┌ ヤレヤレ・・・

コメント

>Pavさん、おはよーございまっす♪

>私もimgタグには多用してるクチですが、こんな不具合が
>あっただなんて知りませんでした。
記事のような表示のエラーでyozoが知っているのは、今のところ、seesaaの現テンプレートだけですよ。なるべくならエラーの出ない記事作成をこころがけたいものですよね。
(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>確かにtable使うくらいなら、CSSでfloat使っちゃった方が
>スマートな気がしますよね。
とりあえず記事の読み込みは速いですね。FC2に引越してきてからは、
トップページの表示が遅くなったのをどうしようか・・・って考え中の
yozoなのですが、tableはできるだけなしにしたいですね。(^○^)

>なんにしても、一度記事にしたモノの修正は結構大変だったハズ。
>ご苦労サマでした(゚▽゚;)
あはは・・・ありがとーございまっす♪でも修正はHTML本体と最新記事だけですよ。過去記事はその都度、過去記事をふりかえるようにしたいと思ってます。
まだまだこれからですよね。 (*^-^)

コメント

yozoちゃん。おはよーー♪
昨日はありがとうねー♪
おかげさまでナントカできたよー♪嬉しかったぁー☆

この記事の内容は・・・。正直言ってほとんどわからないの。
でもね、真剣に読んで見たよー。絶対勉強になるって思ったからさ♪
この間まゆびさんのところで記事を読んだ時も、ちんぷんかんぷんだったけど、読んでいくうちに・・・。あれ。。。もしかすると・・・。とか気づく事もあってねー♪
だから、今は分からないし、出来ない事でもちゃんと読んでおこうと思ったの。
自分がちゃんとやれてるかどうかなんて、まだまだ私にはわからないのだけれど、yozoちゃんやまゆびさんの記事を読むことはとっても勉強になる!!!
いつかのスキルアップのためにちゃんと覚えておこうと思いました♪勉強になったよー。ありがとーー☆

コメント

>enuちゃん、こんにちはー♪

>おかげさまでナントカできたよー♪嬉しかったぁー☆
いえいえ♪ちょっとだけアドヴァイスしてだけですよ。
できてよかったですね。これからは、自信もって
CSS編集に取り組んでね d(@^∇゚)/ファイトッ♪

>この記事の内容は・・・。正直言ってほとんどわからないの。
>でもね、真剣に読んで見たよー。絶対勉強になるって思ったからさ♪
 あらら・・・ごめんなさいね。自分の作業記録みたいな記事になってしまいましたね。この記事にある、seesaaブログの記事の表示の不具合からスタートしたのですよ。それまではyozoも全然意識していなかったんです。┐(´-`)┌
 まゆびさん、mioさんはともかく、yozoの場合、IEでは見えないエラーのないように記事を書いていかなきゃというだけのことなんですよ。画像を使った記事を書くときに、現在FC2ブログの記事で、IEでは表示されないエラーがたくさんあるようなのです。近い将来、この不具合に直面してパニックになる前に、少しずつでも新しいXHTML準拠の記事の書き方を学ぼうというわけなんです。だから、わかりにくいのも当然かもしれません。yozoもイマイチわかってないことですからね。
一緒に勉強しましょうねくらいに思っていてくださいね。m(_ _)m

>yozoちゃんやまゆびさんの記事を読むことはとっても勉強になる!!!
>いつかのスキルアップのためにちゃんと覚えておこうと思いました♪
あはは・・・それでいいのですよ。身近な人が問題意識をもつことによって、それまでは全然関心のなかったことにも、興味をもつことができる。それでいいと思ってますよ。今急いでやらなきゃダメというものでなくて、今からのんびりのらりくらりやっていこうね。ということなんだからね。お互いがんばりましょうね。
d(@^∇゚)/ファイトッ♪

コメント

yozoさん、こんばんは。先日はトラックバックいただき、ありがとうございました!
おじゃまするのが遅くなってしまって、ごめんなさい・・・
メッセージでもお知らせくださって、うれしかったです~

無事、きれいに表示されるようになったとのこと、本当によかったです♪
おめでとうございま~す☆☆

実は昨日、『詳解 HTML&XHTML&CSS辞典』なるものを買っちゃいまして(笑)
そこで知ったのですが、このテキストが表示されなくなる「回り込みバグ」ですが、
floatプロパティを使っても、align属性を使っても発生してしまうことがあるそうです;
画像の高さに対して回り込むテキストの量が少ないと発生しやすいとか。
対処法としてはyozoさんが実践されたように、非推奨のalign属性をやめて
floatを使うようにし、回り込ませるテキストの量もできるだけ多めにするとか・・・
ともかく、現在は上手く表示されているようなので、OKですね☆

わたしもこの本を読んで、少しCSSの勉強をしたいなぁと思っています。
さしあたって
.clear {clear: both;}
.left {float: left;}
.right {float: right;}
こちらのクラスを使えるようになりましたよ♪

ペットのキャプimgを乗せることが多いなら、widthとheightもCSSに設定しちゃうといいかもしれませんね。
POCペットと非POCペット用に、cap1とcap2なんて、2種類用意すると便利かもしれませんね♪

コメント

>mioさん、おはよーございまっす♪
こちらこそ、大変参考になりましたよ。、Another HTML-lint gatewayで、少しずつエラーを減らしていくようにしてますよ。(*^-^)

>無事、きれいに表示されるようになったとのこと、
>本当によかったです♪おめでとうございま~す☆☆
とりあえず、seesaaの記事の表示はちゃんと見えるようになったようです。
なかなか、解決できずにこちらこそ報告遅れました。m(_ _)m

>実は昨日、『詳解 HTML&XHTML&CSS辞典』
>なるものを買っちゃいまして(笑)
あはは・・・mioさんも本格的にXHTMLを勉強されるのですね。(*^-゚)vィェィ♪
yozoもいい本がないかな~って思ってます。本があった方が調べるのも勉強も早いですからね。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>テキストが表示されなくなる「回り込みバグ」ですが、floatプロパティを
>使っても、align属性を使っても発生してしまうことがあるそうです;
>画像の高さに対して回り込むテキストの量が少ないと発生しやすいとか。
えっ?floatでもだめなんですか?テキストを多くしないと不安定ということですね。ある程度のテキストは書くつもりですが、「がーん」と書くだけでは、エラーするかもしれませんね。最悪tableしかないということですよね。( ̄ヘ ̄)ウーン
なぁ~るほど、アドバイスありがとーございまっす♪m(_ _)m
それにしても『詳解 HTML&XHTML&CSS辞典』ってその名の通り、詳しいことまでのっているのですね。♪⌒ヽ(*゚O゚)ノ スゴイッ!!!

>.clear {clear: both;}
>.left {float: left;}
>.right {float: right;}
yozoもそろそろ、インラインのstyleだけでなく、実際に自分がやっている外部ファイルの設定とcHTMLでのlassの記述をしようと思っているのですが、
つい手間を惜しんでます。┐( -"-)┌ヤレヤレ...
しかも、clear:both;は、classにしてないし・・・ヒソヒソ(ノ・o・((。_。*)

>POCペットと非POCペット用に、cap1とcap2なんて、
>2種類用意すると便利かもしれませんね♪
なぁ~るほど、そうですね。キャプを130×200をcap1、130×170をcap2とするのですね。cap2の枠の設定をWinshotでしなきゃいけませんね。
φ(^∇^ ) メモナノラ いろいろとアドバイスありがとーございまっす♪m(_ _)m
yozoもmioさんに負けないように、がんばらなきゃね。\(*⌒0⌒)bがんばっ♪

コメント

yozoさん、こんにちは!

私のブログもエラーチェックしてみました。
結果、-95点でした・・・_| ̄|○

長い道のりになりそうです ┐(´~`)┌  

コメント

>ろんちゃんさん、こんにちはー♪

>結果、-95点でした・・・_| ̄|○ 長い道のりになりそうです ┐(´~`)┌  
あはは・・・って-95点っていい点じゃないっすか!
yozoはようやく、『312個のエラーがありました。このHTMLは -17点です』でした。過去記事はほとんど手付かずです。とりあえず最新記事を書くときには、正しく書くようにしているだけで精一杯なんですよ。┐( -"-)┌ヤレヤレ...
お互い長い道のりですよね。(゚-゚*)(。。*)ウンウン

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。