スポンサーサイト

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

ブログのエラーをチェックしてみた!!

2006年08月20日
先日「HTML4.01とXHTML」の記事で書いたように
どんどん記述方法が変わってきています。
まゆびは古い方の書き方で覚えてしまったので、
きっと間違いだらけのはず。(笑)
そこで「ROOM-M」mioさん
教えていただいた「Another HTML-lint gateway」に挑戦してみることにしました。
詳しくはmioさんの「HTML4.01から、XHTMLへ」の記事をご覧ください!!
こちらのページはチェックしたいURLを入力すると
エラー数と点数を出してくれます!!
さて、こちらをやってみると。。。
エラー820個、点数ー255点という結果が出ました!!o(TωTo) クゥ
お友達もみんな頑張ってますし、まゆびもエラーを潰していくことにしました!!
こちらのサイト細かく助言が出てくるので素晴らしい!!
。。。ですが、820個ものエラーを読んでると頭が痛い!!(爆)
一度試して見られると分かりますが一番左に数字が出ていて、
重大なエラーの9の数字から始まって、
減点対象にならない0の数字まであります。

例えばこんな感じでチェックされます!!
8: line 46: 空要素タグ <br> は <br /> として閉じなければなりません。
このように推奨タグにするように教えてくれます。

少し話がそれますが、webでいろんなページを見るのにブラウザというものを使います。
一般的にはInternetExplorer(以下IE)だと思います。
他にはFirefox、Operaなどなど。
MacOSの方はSafariかな?Macは使ったことがないので、
詳しくは知らないですが。(・ω・A;)あせあせ
今まゆびはこちらも「ROOM-M」mioさん
教えていただいたDonutRAPTというものを使っています。
IEベースなので、とても使いやすいです!!
mioさん、ありがとうございます。<(_ _)>
で、何が言いたいかというと、
それぞれのブラウザによってページの見え方が違うのです!!
自分が見えているようにお友達に見えているとは限らないのです。
大分前のことになりますが、ブラウザのことを知って
FirefoxとOperaを入れてみました。
するととても気持ち悪い見た目でビックリ!!(爆)
環境が違うとこれほど違うものなんだなぁと実感しました。
きっとOSとブラウザの組み合わせでも違うのでしょう。。。

そこでこのエラーを減らすべく取り組んでみることにしました。
まず着手したのは先日の記事でも書いた、
<br>を<br />に変更、
<img>を<img />に変更です。
<img>は画像を貼り付けるときに使いますが、
FC2の画像貼り付けコードをそのまま使うとエラーになります。
このあたりは改善して欲しいものですね。
あと画像の幅、高さを決めるためのwidth="数値" height="数値"を
入れるとエラーが減ります。
またalt="画像の説明"を入れるとさらによいです!!
こちらはFC2の場合、画像アップロードの際に
ファイルのタイトルを入力すると自動で入ります。

こうしてどんどんエラーを消していくと
点数も上がって楽しくなってきてどんどんはまりました!!
そうこうしているうちにどんどんエラーが減っていき、
あとはトップに表示されている記事の問題になりました。

1: line 45: <br> が多数連続しています。
というエラーがあちらこちらに出ています!!
え、改行繰り返しちゃいけないの???(゜ω゜;)....う・・うそ
いつも文と文のスペースを空けたいときには使ってたのですが。。。
そこで次のように記述を変えました。

こんにちは♪<br />
今日は暑かったですよね。<br />
<br />
ところで、明日の天気はどうなのでしょう?

上の <br />は普通記事を書いているときには見えません。
赤字の部分は<br />が連続していますよね。
これを以下のように変更します。
<p>こんにちは♪<br />
今日は暑かったですよね。</p>
<br />
<p>ところで、明日の天気はどうなのでしょう?</p>
これでbr連続のエラーは回避です。
<p></p>は簡単にいえばまとまりを作るものと考えてもらえば
いいと思います。
同じようなタグに<div></div>があります。
ただdivの中にdivは使えますが、
pの中にdivは使えません。。。
pの中にpも使えません。。。
ややこしい。。。orz
<div><div>~</div></div>はOK!!
<div><p>~</p></div>もOK!!
イメージとしてはdivの方が大きい箱って感じでしょうか?

あと問題になったのが画像のとなりに字を配置する方法でした。
こちらに関しては「yozoの気が向いたと記2.0」yozoさん
「HTML4.01からXHTMLへ 図形のalign属性によるWin+IEの表示の不具合を直す。」の記事を
参考にさせていただきました!!
yozoさん、ありがとうございます。<(_ _)>

画像の左揃えにはfloatというものを使うと良いようです。
そこで私はcssを使った書き方で試してみました!!
css編集が出来ない場合はyozoさんのコードで挑戦してみてください!!

まず、cssに以下の記述を足します。
.migi{float:right;}
.hidari{float:left;}

名前がしょぼいのは気になさらずに!!(爆)
赤字の部分は自分で変更してくださいね!!

そして<img>の中にclass="migi"(右揃えの場合)またはclass="hidari"(左揃えの場合)を
入れればOKです。
なので今私が画像を貼り付けるときのコードは
<img src="http://~.jpg" alt="~.jpg" width="130" height="170" class="hidari" />
となっています。
<img src="http://~.jpg" alt="~.jpg" width="130" height="170" class="hidari" />
ここに画像の右に入れる文字を入力!!
<br style="clear:both;" />

にすると画像の横に字が配置されます!!
こちらもcssで設定することが出来ます。
cssに
.clear{clear:both;}
と書き込みます。
そして
<br style="clear:both;" />を<br class="clear" />にすればOKです!!

赤字の部分は自分の好きな言葉に変えてもOKですよ♪
注意!!css設定の場合は記事のプレビューでは分からないようです。
昨日、パニックに陥りました!!(爆)

あともうひとつ、これからきちんとやっていきたいのが、
「こちら」という言葉にリンクを貼らないこと。
とても楽なので、ついつい詳しくはコチラ♪のように
リンクを貼ることがあるのですが、これもエラーのひとつです。
なぜこれがエラーかというと、目の不自由な方のための音声ソフトで
「詳しくはコチラ♪」とか読まれても何のことだか分からないからだそうです。
なるほどー。納得です!!いろんな方に読んでもらえるページにしなくてはね!!

というわけで、各記事などもどんどん直してもう一度エラーチェック!!
すると!!
060820errorcheck.jpg
おぉぉ。19個のエラーで100点満点です!!O(≧▽≦)O ワーイ♪
ただ、この100点は私の能力だけでは達成できませんでした!!
エラーを失くす上で「naoKの「ホイきたー!」」naoKさん
たくさんの助言をいただきました!!
ほとんどといってもいいかもしれません。
大変お世話になりました。
この場をお借りしてお礼を申し上げます。<(_ _)>

最後にぼやき。。。
FC2の新しい機能でブックマークというものがあって、
表示させているんですが、この画像の記述に問題があり、
1記事につき2つのエラーがでます。
まゆびの場合5記事を表示させていますので、
2×5で10個のエラーはどうしようもない。。。orz
表示をやめるという手はありますが。。。
FC2さま、対応していただけませんでしょうかねぇ。。。

↓ポチッとしていただけると嬉しいです!!ヾ(〃^∇^)ノわぁい♪
banner_02.gif
スポンサーサイト

スレッドテーマ:テンプレート:ブログ

メイン

トラックバックURL


トラックバック

HTML4.01からXHTMLへ 図形のalign属性によるWin+IEの表示の不具合を直す。 from yozoの気が向いたと記2.0
 yozoの別ブログのうさもの気が向いたと記の2006年8月9日の記事BlogPet俳句を求めて三千里~マルコyozo&うさみちゃん編~@後姿ラブリー同盟で、BlogPetの俳句の画像は表示されても、記事本文が表示されたりされなかったりとい [Read More]

画像を左右に並べて間に文を書く from yozoの気が向いたと記2.0
←「おしえないー♪」って教えなさい!(;`O´)o! →これも秘密?(/=`◇´)/≪教えろー左のこうさぎ:うさも右のこねこ:うららちゃんうららちゃんは、さるのこしかけのウッキさんちのこねこです。 [Read More]

livedoor版XHTML準拠対策 from yozoのおすすめ本
 ここlivedoorブログはXHTML1.0 Transitional準拠です。きちんと準拠した書き方をしないと、ブラウザによっては表示に不具合が出るとのことです。早速、Another HTML-lint gatewayというサイトでエラーのチェックをしてみました。http://blog.livedoor.jp/yozoblog/ を XH. [Read More]

- from
管理人の承認後に表示されます [Read More]

コメント

まゆび様、お疲れ様でしたーw
すっごく頑張ってましたものね!!
私は放棄しましたが(汗;)

トコロで確かにFC2のブックマーク機能、
いいような悪いような。
見た目ももう少し改善して欲しかったり(苦笑)
そこだけ浮いてる気がして、結局私は非表示にしちゃいましたが。
デザインとか位置とか、細かく簡単に設定できるようにして欲しいかな?
トラックバック、ありがとうございました☆
文中でもいろいろご紹介いただいてしまって、感謝です;(テレテレ

おぉ、ついにまとめ記事が上がったんですね♪
本当にお疲れ様でした!!
わたしたち・・・ずいぶんハマってしまいましたよね、アハハ(笑)
でもこれでお互い、気にせず夜もぐっすり眠れそう・・・なんて(笑)

そうそう、個別記事ページやコメント編集画面なんていうチェックポイントもあったりしますよ☆ トップとはまた違ってきますからねぇ。(なんて、またそそのかしてみたりw)
まこさん、こんばんは♪(*゚▽゚)ノ
>すっごく頑張ってましたものね!!
嬉しいです♪O(≧▽≦)O ワーイ♪
途中から本当に意地になってエラーチェックしちゃいました!!
>私は放棄しましたが(汗;)
このあたりはFC2の方がやりやすいですよねぇ。

ブックマーク機能、とりあえず付けているのですが、
いらない?(笑)
>見た目ももう少し改善して欲しかったり(苦笑)
確かにねぇ。。。
まこさんは非表示にしてるのかぁ。
>デザインとか位置とか、細かく簡単に設定できるようにして欲しいかな?
そうそう、位置はもうちょっと考えて欲しいです!!
タグを自分で貼らせてもらえるといいんですけどね!!
mioさん、こんばんは♪(*゚▽゚)ノ
本当にいろんなところでmioさんにはお世話になりました。
mioさんのおかげで時間が短縮されたり
賢くなったりしましたよ!!
本当にありがとうございます。<(_ _)>

100点取ったら記事を書こうと思っていたのです♪(笑)
>わたしたち・・・ずいぶんハマってしまいましたよね、アハハ(笑)
本当に!!(゚-゚*)(。。*)ウンウン
今も記事を書いてからまずチェックみたいな。(笑)
とりあえずスッキリしました!!

>個別記事ページやコメント編集画面なんていう
チェックポイントもあったりしますよ☆ 
えっ???
そういえば。。。
エラー直した気になってましたがそうですよね!!
個別ページはアクセスの多いところからやろうかと思ってましたが、
コメント編集画面は盲点でした!!
今度やってみます!!
教えてくださってありがとうございます。<(_ _)>
まゆびさん、こんばんは。
記事を書く時って。写真を貼る時くらいしか、構文のことを
考えないてるひなのです(恥)
記事はワープロ感覚で書いちゃってるからね(苦笑)
いざサイドバーをいじろうと思うと、ほんと困っちゃう。
まゆびさんの爪の垢をいただいて帰るね。
<div><div>~</div></div>なんて使い方もできるのね~
そうそう。リンクを貼る時の「コチラ」は、てるひもやめるようにする。
Blog名とか記事のタイトルにしましょうって事でしょ?
あんまりにもシロウトなことばかり書いて、ちょっと恥ずかしすぎるてるひでした。
ついに満点ですか、オオーw(*゜o゜*)w
地道な努力の積み重ねですね。
お疲れさまです!!

サービス側の出すエラーは、如何ともしがたいですよねf(^^;)
おはようございます♪まゆびさん。
おおーーー。最終的に100点だなんて!!!すごいじゃないですかぁー♪
色々読んでいて、難しくて分からない事もあったけど、改行が多すぎるのもエラーだとか、リンクを貼るのに、コチラって言うのはダメだとか・・・。
私でも気軽に実践できて、勉強になる話題もたくさんあったので、とても勉強になりましたぁー♪
難しくてすぐには取り組めない事も多いけれど、パソコンによって見え方が違うって言うのも知らなくて・・・。
見やすく、キレイに記事を載せたいと思っていてもそうなってなかったら・・・。やっぱり悲しいですもんね・・・。
うーん。。。どんだけのエラーーが私はあるのかなぁ・・・。。。不安・・・。
また色々教えてくださいねー♪
勉強になりましたぁー。ありがとうございましたぁー♪
まゆびさん、こんにちはー♪
記事での紹介及びトラバありがとうございまっす♪
こちらからも返しのトラバ入れさせていただきましたm(_ _)m
それにしても、100点になったのですね。
エラーが17個ですか?♪⌒ヽ(*゚O゚)ノ スゴイッ!!!
そのうち10個はブックマークでしょ?
どうしようもないですよね。(゚-゚*)(。。*)ウンウン
yozoはようやく、『312個のエラーがありました。このHTMLは -17点です』でした。
マイペースでがんばりますよ。d(@^∇゚)/ファイトッ♪

>注意!!css設定の場合は記事のプレビューでは分からないようです。
あはは・・・yozoもCSS編集のときはいつも、( ・◇・)?(・◇・ ) って
なっちゃいますよ。(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪
livedoor、seesaa、エキサイトも当然同じですよね。
投稿されたときにCSSが反映しますからね。

『☆○△へのリンクはコチラ』はyozoもこのAnother HTML-lint gatewayにたくさん怒られましたよ。(笑)
気付いたところから修正していくようにしてます。

追伸:あとで、画像を左右に設置して、その間に文書を書くという設定のしかたを記事にするつもりです。UPしたら、トラバにてお知らせしますね。お暇なときにでも、見てやってください。m(_ _)m
てるひさん、こんばんは♪(^▽^)/
私も見た目が何とかなればそれでいいと思って
今まで記事を書いてきたのですが、
お友達に助けていただいてエラーチェックに取りかかりました。

今いろんな人からいろんな刺激を受けているので、
やりたいことが山積みです!!
ちょっとずつですが、頑張っていきたいと思います!!

><div><div>~</div></div>なんて使い方もできるのね~
結構便利なのですが、後ろの</div>を忘れがち。。。(苦笑)
お互いに気をつけましょう!!

「コチラ」はお互いに気をつけるようにしましょうね!!
>Blog名とか記事のタイトルにしましょうって事でしょ?
そうです。記事のタイトルにすれば一番分かりやすいかもしれませんね!!
多くの人に分かる記事を書くのって本当に難しいですね。
KOROPPYさん、こんばんは♪(*゚▽゚)ノ
やっと、満点ゲットですよ!!
といってもnaoKさんのおかげなのですが。(笑)
すごーくハマってしまいました。

>サービス側の出すエラーは、如何ともしがたいですよねf(^^;)
10個のエラーがなければ一桁台なのに~!!と思うと
ちょっとくやしいです。(笑)
enuさん、こんばんは♪ヽ(=´▽`=)ノ
O(≧▽≦)O ワーイ♪ 嬉しい言葉をありがとうございます!!
本当に難しいことがいっぱいでした。
お友達のおかげで直せたエラーがいっぱいです。
ただ、簡単に直せるエラーもありますからね。
興味があるのでしたら、ちょっとずつ勉強されたらいいと思います!!
「コチラ」にリンクを貼らないというのは
簡単に出来ますし、大切なことだなぁと思います!!

パソコンによって見え方が違うというのは
私も聞いたときはビックリでした。
みんな同じ状態で見てくれてると思っていましたもの。
折角見た目にこだわって記事を書いてるのに、
変な見え方だったら残念ですものね。
実は見た目の問題はまだまだ残されているので、
100点をとってもまだまだやらなければいけないことが
たくさんあるのでした!!(苦笑)
>また色々教えてくださいねー♪
もちろんですよ。何かありましたら、コメントくださいね!!
yozoさん、こんばんは♪\(^▽^)/
こちらこそトラバありがとうございます。<(_ _)>
そうなんですよ、100点ゲットです!!
ありがとうございます。<(_ _)>
10個に関しては仕方がないですからね。
あとの部分はどうしようか悩んでいるところです。
>『312個のエラーがありました。このHTMLは -17点です』でした。
おぉ。もうちょっとでプラスになりますね!!
私もプラスになったときは感動でしたよ!!
ぜひぜひ高得点目指して頑張ってくださいね!!ヽ(=´▽`=)ノ

おぉ?プレビューはyozoさんも困ってましたか!!
何で反映されないのかなぁってずっと悩んじゃいました!!
絶対に間違ってないと思って記事を保存したら
ちゃんと出来てたし!!
cssはあまり活用してなかったから、知りませんでしたよ。

>『☆○△へのリンクはコチラ』はyozoもこのAnother HTML-lint gatewayに
>たくさん怒られましたよ。(笑)
ですよね!!私も気をつけていきたいと思います!!

>画像を左右に設置して、
>その間に文書を書くという設定のしかたを記事にするつもりです。
おぉぉ!!トラバ入っていますね!!
後ほどお邪魔いたします!!
2匹でツッコミでは活用しますものね!!(o^-^o) ウフッ
どんな風にされたのかしら?ワクo(゚ー゚*o)(o*゚ー゚)oワク
こんばんは!あれを100点ゲットとはすごいですね。
ととろはまだどこから手をつけていいのかわかんなくなっちゃったので、放置です。
でも、「こちら」にリンクは今後気をつけますね。
特にトラックバック企画などの説明に多用してました。あまりに同じ名前が出るのがうるさいかなと。
見た目だけではない、そういう人も利用しているものなんだと認識を新たにしました。
丁寧な記録をありがとう。これからは気をつけるって事じゃだめ?(爆)
まずはここから始めてみるのもいいかもしれませんね。
ととろさん、こんばんは♪(^▽^)/
かなり苦労しましたが100点ゲットできてよかったです!!
naoKさんのおかげです♪(o^-^o) ウフッ
そうそう、どこから手をつけるか、初めは多すぎて悩んじゃいますよね。
分かりやすいエラーから手をつけるか、
点数の大きいところから手をつけるといいかもしれません。
>でも、「こちら」にリンクは今後気をつけますね。
>特にトラックバック企画などの説明に多用してました。
>あまりに同じ名前が出るのがうるさいかなと。
そうなんですよ。面倒というよりも、前からずっと読んでると
くり返しになってしまうよなぁと思ってコチラにしている部分も
あったのですが、改めていきたいと思います!!
もちろんこれから気をつけるでいいと思いますよ!!
だってまゆびも過去記事は手をつけてない。。。
いろんな人が読む可能性があるということを頭に入れて
記事を書いていかなければならないなぁと思いました!!
まゆびさん(*・ω・)ノ~☆コンバンワ♪
これはすごい・・・(。・ω・ノノ゙☆パチパチ
まさか・・全ての記事を直して行ったのですか?!オロロオロロ
その根気にまず敬礼です(。・ω・。)ゞピッ♪
結構FC2の編集機能でそのまま使うとエラーなんですよね;;
私もブログにもてこ入れしたいですけど・・
お盆あけちゃったしなぁ(爆
なかなかまとまった時間がとれそうにもないので、しばらくは
このままにしておいて・・みなさんの記事を参考にいつかチャレンジします♪
修正お疲れさまでした~!
モンビッケさん、こんにちは♪(^▽^)/
>これはすごい・・・(。・ω・ノノ゙☆パチパチ
O(≧▽≦)O ワーイ♪ ありがとうございます♪
いえいえ、全部の記事を直したわけではないんです。
トップのページに表示される記事は直しましたが。
なので過去記事などを調べたら、
まだまだ減点でしょうね!!(笑)
>結構FC2の編集機能でそのまま使うとエラーなんですよね;;
そうなんですよねぇ。(;-ω-) =3 フゥ
なので、今はエディターで記事を書いています。
過去の記事で使ったタグをコピペしてね♪(o^-^o) ウフッ
いろいろやりたいことありますが、
時間が足りないですねぇ。
モンビッケさんはお仕事お忙しそうですものねぇ。
またまとまった時間があるときにでも挑戦されてみてください!!(*゚▽゚)ノ

コメントする

サイト管理者にのみ通知する
コメントをプレビューする?
ご利用のブラウザ、設定ではご利用になれません。


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