2006年08月26日
画像タグのエラーを回避する。
2006/08/25現在、FC2ブログの記事で使用したい画像がある場合は、[ファイルアップロード]で画像をアップロードして、[記事を書く ]生成される<img>タグは、そのまま使用すると、XHTMLではエラーになってしまう部分があります。
記事に使用する部分は<img 〜>の部分だけですから、不要な部分を取り除きます。
画像タグ<img>をXHTML準拠させてエラーをなくすには下の３点に注意してください。
FC2の場合はalt="画像の代わりの文字"の部分はありますが、枠線のborder="0"が勝手に入っています。そして最後の半角スペース＋半角の/がありません。これらを修正します。
このようにすれば、画像タグ<img />のエラーをなくすことができます。
実際yozoは今のところ、画像を使用するときには、一旦すべてアップロードして、[記事を書く]をすべてクリックして投稿画面に画像タグ<img />を出します。それを切り取ってサクラエディタの新規画面に貼り付けて、[検索]-[置換]を使って一挙に修正しています。参考までに、そのやり方の手順を下に書いておきますね。(*^-^)
フリーソフトサクラエディタのダウンロードページ→サクラエディタ Download
↓yozoの気が向いたと記2.0の関連記事紹介
<a href="画像URL" target="_blank"><img src="画像URL" alt="画像の代わりの文字" border="0"></a><br clear="all">
記事に使用する部分は<img 〜>の部分だけですから、不要な部分を取り除きます。
<img src="画像URL" alt="画像の代わりの文字" border="0">
画像タグ<img>をXHTML準拠させてエラーをなくすには下の３点に注意してください。
- alt="画像の代わりの文字" width="幅" height="高さ"を設定します。
- border="0"など画像のデザインの設定はCSSで行います。
※CSS編集で.upimg{border-style:none;}を追加して、class="upimg"を<img>の中に
追加するか、style="border-style:none;"を<img>の中に追加しましょう。 - <img>は<img />のように、半角スペース＋半角の/を最後につけます。
FC2の場合はalt="画像の代わりの文字"の部分はありますが、枠線のborder="0"が勝手に入っています。そして最後の半角スペース＋半角の/がありません。これらを修正します。
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="upimg" />
このようにすれば、画像タグ<img />のエラーをなくすことができます。
実際yozoは今のところ、画像を使用するときには、一旦すべてアップロードして、[記事を書く]をすべてクリックして投稿画面に画像タグ<img />を出します。それを切り取ってサクラエディタの新規画面に貼り付けて、[検索]-[置換]を使って一挙に修正しています。参考までに、そのやり方の手順を下に書いておきますね。(*^-^)
フリーソフトサクラエディタのダウンロードページ→サクラエディタ Download
- 置換前 </a><br clear="all">
置換後 空白(何も記入しない) - 置換前 border="0">
置換後 width="幅" height="高さ" class="upimg" />
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoの気が向いたと記2.0の関連記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New コメントプレビューを設置 | Top | BlogPet「うさも」の背景紹介 夏休みも終わり Old≫
トラックバックURL
トラックバック
≫ livedoor版XHTML準拠対策 Part1 from yozoのおすすめ本
ここlivedoorブログはXHTML1.0 Transitional準拠です。きちんと準拠した書き方をしないと、ブラウザによっては表示に不具合が出るとのことです。早速、Another HTML-lint gatewayというサイトでエラーのチェックをしてみました。http://blog.livedoor.jp/yozoblog/ を XH. [Read More]
コメント
早速の解説をありがとうございました。
そうか言っていたのは<img ｓｃｒ〜〜〜・・・の最後に「 /」をって事だったのね。なんとなく、最後に「 /」が付いてるからいいかなーとは思ってましたが(笑>その程度です)でも、<a href="画像URL" target="_blank">は消してないので、それもやらなきゃね。サムネイルを作らなくてもこれが出るんだね・・・
それ以上に、一回エディタで編集していたとは・・・一発変換ができるんならたくさんのキャプも面倒くさくないね。ちょっとやってみようかな・・・でもあまりキャプは載せないんだけどね、あそこは(笑)
とても分かりやすかったです、ありがとう！これから直してきますね。
Posted by ととろ at 2006.08.26 20:55 | edit
コメント
＞早速の解説をありがとうございました。
いえいえ、どういたしまして。自分の記事作成の備忘録のつもりですから、
お気づかいないようにしてくださいね♪FC2、seesaa、livedoorとありますから、ついごちゃごちゃになっちゃうので、この記事があればすぐに確認できます。便利になりましたよ(*^-^)
＞<img ｓｃｒ〜〜〜・・・の最後に「 /」をって事だったのね。
その通りです。閉じタグにしなきゃいけないとのことですね。
面倒ですが、エラーになって、お友達が見られなくなったら、せっかくの画像が
ムダになりますからね。(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
＞一回エディタで編集していたとは・・・一発変換ができるんなら
＞たくさんのキャプも面倒くさくないね。ちょっとやってみようかな・・・
えへへ・・・エディタの検索とか置換を使わないと、手打ちは面倒でしかた
ありませんからね。しかも抜けがあると大変ですから(￣∀￣*)ｲﾋｯ
＞とても分かりやすかったです、ありがとう！これから直してきますね。
そうおっしゃってくださると、とても励みになりますよ。(^○^)
すぐだと思いますが、がんばってくださいねv(*'-^*)ｂぶいっ♪
Posted by ととろさんへ at 2006.08.26 22:27 | edit
コメント
修正の簡単なやり方もきちんと書いてあってすごくいい記事ですね!!
私もサクラエディターを使っているのですが、
置換という技を知ってから記事を書くのがすごく早くなりました。
知らなかった人にはとっても嬉しい記事だと思います♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
Posted by まゆび at 2006.08.26 22:43 | edit
コメント
＞修正の簡単なやり方もきちんと書いてあってすごくいい記事ですね!!
ありがとーございまっす♪この記事を見てちゃんと置換しないと、面倒ですからね。さっと片付けなきゃ記事にキャプ画像を入れづらくなりますからね。(^○^)
＞置換という技を知ってから記事を書くのがすごく早くなりました。
＞知らなかった人にはとっても嬉しい記事だと思います♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
検索や置換は一度味わったら、もうやめられないほどの便利さですからね。
これからも折に触れて、yozoなりのやり方ですが、紹介するようにしたいと
思ってますよ。まゆびさんに褒められて、励みになりました。m(_ _)m
Posted by まゆびさんへ at 2006.08.26 23:20 | edit
コメント
私は先日、自ブログのXHTMLの採点をしただけで、
まだ何ひとつXHTMLの準拠対策は手付かずでいます・・・トホホホ
Posted by ろんちゃん at 2006.08.27 11:57 | edit
コメント
へぇぇーーー！！！
FC２で画像を使う時は色々留意点があるのですね！！
入居間もない私にはとってもお勉強になりますー。
ありがとうございました！
Posted by babar at 2006.08.27 11:58 | edit
コメント
すごい、こんなツールもあるんですねφ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ
これならXHTMLでしっかりやりたいFC2ユーザーも
簡単に変換できちゃいますね。(･ω･)(._.)(･ω･)(._.)ｳﾝｳﾝ♪
これもブックマークしておかなきゃだなぁ（笑
余談ですが、yozoさんブックマークがσ(･ω･*)の中でかなり有効で（笑
これが溜まっていったら、そこらへんで出版されてる
ハウトゥー本よりもだいぶわかりやすいものになりそうですよ！あははw
Posted by モンビッケ at 2006.08.27 13:27 | edit
コメント
＞私は先日、自ブログのXHTMLの採点をしただけで、
＞まだ何ひとつXHTMLの準拠対策は手付かずでいます・・・トホホホ
あはは・・・yozoも一記事ずつエラーがないように更新しているだけですよ。
記事にたくさんのエラーがあるんですよ。┐( -"-)┌ﾔﾚﾔﾚ...
（ここの小粋空間のyujiroさんのテンプレートはほとんどエラーがないのです。）
まぁ、楽しくゆっくりやりましょうね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
Posted by ろんちゃんさんへ at 2006.08.27 18:34 | edit
コメント
＞へぇぇーーー！！！FC２で画像を使う時は色々留意点があるのですね！！
＞入居間もない私にはとってもお勉強になりますー。
はい♪お役に立てそうですね。うれしいですよ♪v(｡･ω･｡)ｨｪｨ♪
画像アップロードのさいに吐き出される<img>タグに、
エラーがありますからね。修正するようにしましょうね。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
今日からFC2友達としても、よろしくお願いしまっす m(_ _)m
Posted by ばばるさんへ at 2006.08.27 18:39 | edit
コメント
＞すごい、こんなツールもあるんですねφ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ
あはは・・・せっかくのエディタですからね、置換や検索をつかわなきゃ、
一つずつ見るのも大変ですからね。特にバグとりのときは・・・(^○^)
＞余談ですが、yozoさんブックマークがσ(･ω･*)の中でかなり有効で（笑
＞これが溜まっていったら、そこらへんで出版されてる
＞ハウトゥー本よりもだいぶわかりやすいものになりそうですよ！あははw
(///∇//)いえいえ♪そんなことは・・・ないですよ(*v.v)｡ﾊｽﾞｲ｡｡｡｡
でも、とても励みになりますよ。(^○^)
yozoの記事は説明がないので、簡単なのですよ。
まずは、動くこと！やってみること！これにまさるトレーニングはないですよ。
ちょっとしたミスで、大パニックになったりという経験こそが必要なんですからね。
「ノウハウだけじゃ、役に立たない」なんて堅苦しく考えないでいいじゃん！
楽しもうよ！っていうのがポリシーです♪(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
Posted by モンビッケさんへ at 2006.08.27 18:47 | edit
コメント
今夜は「写真館」の設置には少し時間がかかるので、お忙しい中せっかく色々とご指導してくださったのに・・・とお詫びに来たのです
その時、この記事を発見！
「Ｄｉａｒｙ」では別窓で開かないようにしてるんですが、自分でいらない物を削除している時
「あれ？ / が見当たらない？？」って思っていたのです
でも、私はど素人でタグなど？？？状態なので、変にいじるとヤバい？？と思っていたのです
でも、別窓の時に「大きさの指定は必要」とご指導して頂いたのを思い出しました
自分のＰＣではちゃんと見れても、色んな環境があるので奥の深さをあらためて実感しました
Posted by みみこぉ☆^ at 2006.08.27 23:25 | edit
コメント
width="幅" height="高さ" class="upimg"/>の追加を今、終えました
あの・・・変な質問してもいいですか？
別窓の時は
<img src="サムネイル画像のurl" alt="画像の代わりに表示される文字" width="150" height="132" /></a>
と、言うことで画像サイズの後に /> で閉じてますけど
それはいいんですよね？
Posted by みみこぉ☆^ at 2006.08.27 23:59 | edit
コメント
なるほどなるほど・・・
そういえばココはＸＨＴＭＬでテンプレ組んであるんでしたね？
私はまだソコまでたどり着いていないという現状なのですが、最近メインで使うブラウザをＦｉｒｅｆｏｘに乗り換えてみて、環境でずい分と見た目に差が出てくるというのはアタマで知っていたダケとはカケ離れたモノだと痛感している日々です。
忍ブロでもテンプレ職人サン達はどんどんＸＨＴＭＬでテンプレを作成されているようですし、BlogPetの投稿もばっちりとXHTML準拠だったりしている中で、私も次はＸＨＴＭＬで・・と思う一方でアタマがなかなかついてこないという現状もあるワケで（。。；）
ＩＥ６でＸＭＬ宣言をするとバグが出るってハナシもありますし、まだまだ勉強が必要な模様です。
当面は、記事内での更新で使用するタグくらいは、ＸＨＴＭＬ準拠も視野に入れて使っていきたいなぁとyozoさんの記事を見て思いました。
Posted by Ｐａｖ at 2006.08.28 01:25 | edit
コメント
＞今夜は「写真館」の設置には少し時間がかかるので、お忙しい中
＞せっかく色々とご指導してくださったのに・・・とお詫びに来たのです
それは。それは。ご丁寧にありがとーございまっす。m(_ _)m
ゆっくりご自分のペースで進めていかれたらいいですよ。
お気遣いのないようになさってくださいね。
＞別窓の時に「大きさの指定は必要」とご指導して頂いたのを思い出しました
yozoもみみこぉ☆^さんと同様の素人ですよ。Another HTML-lint gatewayでエラーをチェックして、解説を見て修正してます。一度エラーチェックをされたらいい勉強になると思いますよ (^○^)
Another HTML-lint gatewayのURL
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
Posted by みみこぉ☆^さんへ at 2006.08.28 06:42 | edit
コメント
＞言うことで画像サイズの後に /> で閉じてますけど、それはいいんですよね？
class="upimg"は、必須のものではありませんから、省いています。
class="upimg"は、画像のデザイン設定をするために用意してあるものですから、画像を使用するご本人に必要があれば、その人に必要な設定をするためのものと考えてくださいね。yozoの過去記事も参考までに案内しておきます。
http://yozoblog2.blog63.fc2.com/blog-entry-374.html
Posted by みみこぉ☆^さんへ at 2006.08.28 06:53 | edit
コメント
＞最近メインで使うブラウザをＦｉｒｅｆｏｘに乗り換え
yozoも初めてIE以外のブラウザで自分のブログを見たときに、
これが現実か！というくらいデザインが崩れていましたね。
ブラウザによって違うって、同じにしろよ！って思ってましたよ (ﾟｍﾟ*)ﾌﾟｯ
＞アタマがなかなかついてこないという現状もあるワケで（。。；）
yozoもAnother HTML-lint gatewayで、エラーチェックしながら、エラーの原因の解説を読んでいるだけですよ。アタマははじめからついていってないですね。
┐( -"-)┌ﾔﾚﾔﾚ...
＞当面は、記事内での更新で使用するタグくらいは、ＸＨＴＭＬ準拠も
＞視野に入れて使っていきたいなぁとyozoさんの記事を見て思いました。
ありがとーございまっす♪yozoもそのようにしています。過去記事をすべて
XHTMLにするのは、時間的に不可能に近いですから、これからの記事は
すべてエラーのないXHTML準拠のものにしてますよ。v(｡･ω･｡)ｨｪｨ♪
Another HTML-lint gateway様様ですけどね。(^○^)
Posted by Pavさんへ at 2006.08.28 07:02 | edit
コメント
読ませていただきましたが……わたしもyozoさんと同じやり方で記事を作成していましたよ☆
FC2仲間だとやっぱり似通ってきますよね♪
わたしも初めて「半角スペース＋/」で閉じる、と聞いたときには
「<ｉｍｇ>のどこにそれを入れればいいの？？」と疑問だらけでしたｗ
やってみないと分からないものですよねぇ。
yozoさんおっしゃるとおり、実践あるのみ！ですね☆
追伸：sakuraエディタの置換作業……わたしも大好きです！ｗ
Posted by mio at 2006.08.29 19:07 | edit
コメント
＞おぉお、またまた超お役立ち記事ですね！
わぁ♪そうおっしゃっていただけると、とってもうれしいですよ♪(*^-^)
mioさんと同じ方法だったら、安心ですね。考え方が身につけば、楽なんですが、なかなかうまくいかないものですね。「記事の推敲+投稿」だったのが「記事の推敲+エラーチェック+投稿」となっちゃいましたからね。エラーチェックで時間をとられることも、しばしばです。┐( -"-)┌ﾔﾚﾔﾚ...
＞やってみないと分からないものですよねぇ。
本当ですね♪習うより慣れろですね♪間違っていれば改めればいいだけですからね。幸い、今のところはみなさん、表示にエラーはないようですから安心ですよ♪
＞追伸：sakuraエディタの置換作業……わたしも大好きです！ｗ
気持ちいいですよね。失敗してもやり直しできるし、上書きしていても戻せるし・・・大変重宝してますよ(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
Posted by mioさんへ at 2006.08.29 23:05 | edit
コメント
わわーーーこれこれ!!!私も困っていて、いつか聞こうかと思っていたのよー!!!これってぽちっとのことだよねー!!!うんうん。これ・・・。うまくいかなくて・・・。なんてだろーーー・・・。エキサイトの時と違うのかなぁー・・・。と悩んでいたんだぁー♪
わーーい☆
これで分かるね♪
時間あるときに作って保存しておけばいいね☆ありがとーー☆
やっぱりここに来るといろんな疑問が解消されるよー☆
ありがとーー☆
Posted by enu at 2006.08.31 15:49 | edit
コメント
＞わわーーーこれこれ!!!私も困っていて、いつか聞こうかと思っていたのよー!!!
おっといきなりお役に立ちましたか！ぽちっとの画像が変でしたか？
余計なタグを削除して、必要なものを追加してやらないと、正常に見えないこともあるようですよ。いつでも、ここの記事を活用してくださいね。うまくいかなかったら、また遠慮なく質問してね！(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
＞やっぱりここに来るといろんな疑問が解消されるよー☆ありがとーー☆
えへへ・・・そのように思ってくれるととってもうれしいし、
とても励みになりますよ。(*^-ﾟ)vｨｪｨ♪
Posted by enuちゃんへ at 2006.08.31 16:30 | edit