2009年08月11日
Firefox 使用の方は IE 環境でもブログの表示を確認しよう！ ： タグの閉じ忘れ編
最近、Firefox を使っている方が増えてきました。とても便利なブラウザなんで使用するのは問題ないのですが、Firefox で正常に表示されていても、インターネット・エクスプローラ（ IE ）では表示が崩れているブログさんも多くなってきました。
一番多いのは、太字やフォントカラーなどの装飾タグの閉じ忘れです。これはブラウザごとに、 html の解釈が違うことが原因で起こる現象で、Firefox では問題なく表示されますが、IE ですとサイドバーまでひたすら命令が続くことになります。
先月の記事になりますが、国内のブラウザのシェアは、IE が７割を超えていて、Firefox は１割程度です。
短期間による集計データですが、私のアクセス解析でもほぼ同じ割合なので、現実的な数字だと思います。
ブログを作成する側は、利用者が最も多い IE 環境でもブログの表示を確認することはとても大切なんです。
私が確認できている主なものとしましては、上記のタグの閉じ忘れによるレイアウトの崩れ、新スキンにおける table 表示、hr 水平線の表示が上げられます。今回は一番多いタグの閉じ忘れについてお話します。
ファンブログでよく使われる装飾タグの </大> </太> </色> が含まれた文章をコピー＆ペーストしますと、装飾タグが消える現象が多々あります。閉じ忘れのほとんどの原因がこの現象で起こります。
私は IE 環境でブログを作成していますので、閉じ忘れがあれば表示が崩れますから、すぐわかりますが、Firefox で作成している方は、正常に表示されますので、これに気がつかない場合が多いんです。
毎回よくコピー＆ペーストする文章は、通常の HTML で記述することで回避することができますが、HTML にあまり詳しくない方は、IE 環境でブログを作成することをお勧めします。
確認して、表示がおかしい場合は原因である文章の装飾タグを閉じればいいのですが、閉じ忘れが多くて、修正するにはかなり大変な場合は、サイドバーへの侵食だけでも食い止めれば見た目の崩れはある程度戻すことができますので、以下に対処方法を説明します。
「機能選択/並び替え」で、３カラムの方は左サイドバー、２カラムの方はそれぞれのサイドバーの一番上に、追記ができる自分で作成した項目を設置して「保存」してください。
「項目の追加/編集」画面で、一番上にした項目を選び「機能編集」画面で表示された項目の内容の一番上にカーソルを置き、改行して追記するスペースを空けてください。
ここに、侵食を食い止めるための閉じるタグを追記する訳なんですが、サイドバーの場合は記事内で使用されています、 </太> や </色> と記述しても閉じれませんので、HTML で記述する必要があります。
文字の設定メニューの </大> から </色> （文字色）までの装飾タグは、全て </span> というタグで閉じれます。
例えば、 <大> と <太> を閉じたい場合は、 </span></span> と記述すれば、 </大> と </太> を記述したのと同じことなりますので、サイドバーの直前で閉じれることになります。
本来、こんなには追記する必要はないのですが、閉じ忘れの多い方でも対応できるよう、ご用意してみました。
追記したら、「保存」を押し「自分のブログを確認する」を押してサイドバーの表示を確認してみてください。
サイドバーが正常に表示されたら成功です。改善されてない場合は、 </span> の記述を増やしてみてください。
2009年08月12日 ： 追記
※ </div> を記述しますとカラムの配置が狂いますので、</div> は記述しないでください。
私個人の意見としまして、IE は使えないとか、Firefox の方が優れているということはあるのでしょうが、本来ブログは訪問者さんが読むものなので、利用者の少ない Firefox で正常に表示され、利用者の多い IE でうまく表示されないのは、うまく表示されないブログを公開していることに等しいことだと思います。
逆に、IE で問題なく表示され、Firefox でうまく表示されない場合は、致命的な問題でなければ改善策が見つかるまで、利用者の多い IE 環境で正常に表示されていればいいと判断しています。
いかがでしたでしょうか？皆さんのブロ友さんで、レイアウトが崩れている方がいらっしゃいましたら、この記事を紹介してください。ご本人はお気づきになってない場合が多いので、このような記事があると便利かと思いアップしてみました。
次回は、閉じ忘れがある記事の見つけ方のコツを説明します。よろしくお付き合いくださいませ。(´・ω・`)ｂ
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪
押していただけると励みになります
ファンブログでよく使われる装飾タグの </大> </太> </色> が含まれた文章をコピー＆ペーストしますと、装飾タグが消える現象が多々あります。閉じ忘れのほとんどの原因がこの現象で起こります。
私は IE 環境でブログを作成していますので、閉じ忘れがあれば表示が崩れますから、すぐわかりますが、Firefox で作成している方は、正常に表示されますので、これに気がつかない場合が多いんです。
毎回よくコピー＆ペーストする文章は、通常の HTML で記述することで回避することができますが、HTML にあまり詳しくない方は、IE 環境でブログを作成することをお勧めします。
確認して、表示がおかしい場合は原因である文章の装飾タグを閉じればいいのですが、閉じ忘れが多くて、修正するにはかなり大変な場合は、サイドバーへの侵食だけでも食い止めれば見た目の崩れはある程度戻すことができますので、以下に対処方法を説明します。
▼ サイドバーへの閉じ忘れの侵食を食い止める方法 ▼
「機能選択/並び替え」で、３カラムの方は左サイドバー、２カラムの方はそれぞれのサイドバーの一番上に、追記ができる自分で作成した項目を設置して「保存」してください。
「項目の追加/編集」画面で、一番上にした項目を選び「機能編集」画面で表示された項目の内容の一番上にカーソルを置き、改行して追記するスペースを空けてください。
ここに、侵食を食い止めるための閉じるタグを追記する訳なんですが、サイドバーの場合は記事内で使用されています、 </太> や </色> と記述しても閉じれませんので、HTML で記述する必要があります。
文字の設定メニューの </大> から </色> （文字色）までの装飾タグは、全て </span> というタグで閉じれます。
例えば、 <大> と <太> を閉じたい場合は、 </span></span> と記述すれば、 </大> と </太> を記述したのと同じことなりますので、サイドバーの直前で閉じれることになります。
</span></span></span>
本来、こんなには追記する必要はないのですが、閉じ忘れの多い方でも対応できるよう、ご用意してみました。
追記したら、「保存」を押し「自分のブログを確認する」を押してサイドバーの表示を確認してみてください。
サイドバーが正常に表示されたら成功です。改善されてない場合は、 </span> の記述を増やしてみてください。
2009年08月12日 ： 追記
※ </div> を記述しますとカラムの配置が狂いますので、</div> は記述しないでください。
私個人の意見としまして、IE は使えないとか、Firefox の方が優れているということはあるのでしょうが、本来ブログは訪問者さんが読むものなので、利用者の少ない Firefox で正常に表示され、利用者の多い IE でうまく表示されないのは、うまく表示されないブログを公開していることに等しいことだと思います。
逆に、IE で問題なく表示され、Firefox でうまく表示されない場合は、致命的な問題でなければ改善策が見つかるまで、利用者の多い IE 環境で正常に表示されていればいいと判断しています。
いかがでしたでしょうか？皆さんのブロ友さんで、レイアウトが崩れている方がいらっしゃいましたら、この記事を紹介してください。ご本人はお気づきになってない場合が多いので、このような記事があると便利かと思いアップしてみました。
次回は、閉じ忘れがある記事の見つけ方のコツを説明します。よろしくお付き合いくださいませ。(´・ω・`)ｂ
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この記事へのコメント