--年--月--日

スポンサーサイト

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

画像タグのエラーを回避する。

 2006/08/25現在、FC2ブログの記事で使用したい画像がある場合は、[ファイルアップロード]で画像をアップロードして、[記事を書く ]生成される<img>タグは、そのまま使用すると、XHTMLではエラーになってしまう部分があります。
<a href="画像URL" target="_blank"><img src="画像URL" alt="画像の代わりの文字" border="0"></a><br clear="all">

 記事に使用する部分は<img ?>の部分だけですから、不要な部分を取り除きます。
<img src="画像URL" alt="画像の代わりの文字" border="0">

 画像タグ<img>をXHTML準拠させてエラーをなくすには下の3点に注意してください。
  1. alt="画像の代わりの文字" width="幅" height="高さ"を設定します。
  2. border="0"など画像のデザインの設定はCSSで行います。
    CSS編集で.upimg{border-style:none;}を追加して、class="upimg"を<img>の中に
    追加するか、style="border-style:none;"を<img>の中に追加しましょう。
  3. <img><img />のように、半角スペース+半角の/を最後につけます。

 FC2の場合はalt="画像の代わりの文字"の部分はありますが、枠線のborder="0"が勝手に入っています。そして最後の半角スペース+半角の/がありません。これらを修正します。
<img src="画像URL" alt="画像の代わりの文字" width="幅" height="高さ" class="upimg" />

このようにすれば、画像タグ<img />のエラーをなくすことができます。
実際yozoは今のところ、画像を使用するときには、一旦すべてアップロードして、[記事を書く]をすべてクリックして投稿画面に画像タグ<img />を出します。それを切り取ってサクラエディタの新規画面に貼り付けて、[検索]-[置換]を使って一挙に修正しています。参考までに、そのやり方の手順を下に書いておきますね。(*^-^)
フリーソフトサクラエディタのダウンロードページ→サクラエディタ Download
  1. 置換前 </a><br clear="all">
    置換後 空白(何も記入しない)
  2. 置換前 border="0">
    置換後 width="幅" height="高さ" class="upimg" />

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


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

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

スポンサーサイト

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

メイン

≪New コメントプレビューを設置 | Top | BlogPet「うさも」の背景紹介 夏休みも終わり Old≫

トラックバックURL


コメント

こんばんはー。
早速の解説をありがとうございました。
そうか言っていたのは<img scr~~~・・・の最後に「 /」をって事だったのね。なんとなく、最後に「 /」が付いてるからいいかなーとは思ってましたが(笑>その程度です)でも、<a href="画像URL" target="_blank">は消してないので、それもやらなきゃね。サムネイルを作らなくてもこれが出るんだね・・・

それ以上に、一回エディタで編集していたとは・・・一発変換ができるんならたくさんのキャプも面倒くさくないね。ちょっとやってみようかな・・・でもあまりキャプは載せないんだけどね、あそこは(笑)
とても分かりやすかったです、ありがとう!これから直してきますね。

コメント

>ととろさん、こんばんはー♪

>早速の解説をありがとうございました。
いえいえ、どういたしまして。自分の記事作成の備忘録のつもりですから、
お気づかいないようにしてくださいね♪FC2、seesaa、livedoorとありますから、ついごちゃごちゃになっちゃうので、この記事があればすぐに確認できます。便利になりましたよ(*^-^)

><img scr~~~・・・の最後に「 /」をって事だったのね。
その通りです。閉じタグにしなきゃいけないとのことですね。
面倒ですが、エラーになって、お友達が見られなくなったら、せっかくの画像が
ムダになりますからね。(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪

>一回エディタで編集していたとは・・・一発変換ができるんなら
>たくさんのキャプも面倒くさくないね。ちょっとやってみようかな・・・
えへへ・・・エディタの検索とか置換を使わないと、手打ちは面倒でしかた
ありませんからね。しかも抜けがあると大変ですから( ̄∀ ̄*)イヒッ

>とても分かりやすかったです、ありがとう!これから直してきますね。
そうおっしゃってくださると、とても励みになりますよ。(^○^)
すぐだと思いますが、がんばってくださいねv(*'-^*)bぶいっ♪

コメント

yozoさん、こんばんは♪ヾ(=^▽^=)ノ
修正の簡単なやり方もきちんと書いてあってすごくいい記事ですね!!
私もサクラエディターを使っているのですが、
置換という技を知ってから記事を書くのがすごく早くなりました。
知らなかった人にはとっても嬉しい記事だと思います♪(゚-゚*)(。。*)ウンウン

コメント

>まゆびさん、こんばんはー♪

>修正の簡単なやり方もきちんと書いてあってすごくいい記事ですね!!
ありがとーございまっす♪この記事を見てちゃんと置換しないと、面倒ですからね。さっと片付けなきゃ記事にキャプ画像を入れづらくなりますからね。(^○^)

>置換という技を知ってから記事を書くのがすごく早くなりました。
>知らなかった人にはとっても嬉しい記事だと思います♪(゚-゚*)(。。*)ウンウン
検索や置換は一度味わったら、もうやめられないほどの便利さですからね。
これからも折に触れて、yozoなりのやり方ですが、紹介するようにしたいと
思ってますよ。まゆびさんに褒められて、励みになりました。m(_ _)m

コメント

yozoさん、こんにちは♪

私は先日、自ブログのXHTMLの採点をしただけで、
まだ何ひとつXHTMLの準拠対策は手付かずでいます・・・トホホホ

コメント

こんにちはー。
へぇぇーーー!!!
FC2で画像を使う時は色々留意点があるのですね!!
入居間もない私にはとってもお勉強になりますー。
ありがとうございました!

コメント

yozoさん(。・ω・。)ノコンチャ☆・゚:*:゚
すごい、こんなツールもあるんですねφ(・ω・*)フムフムφ(。_。*)メモメモ
これならXHTMLでしっかりやりたいFC2ユーザーも
簡単に変換できちゃいますね。(・ω・)(._.)(・ω・)(._.)ウンウン♪
これもブックマークしておかなきゃだなぁ(笑
余談ですが、yozoさんブックマークがσ(・ω・*)の中でかなり有効で(笑
これが溜まっていったら、そこらへんで出版されてる
ハウトゥー本よりもだいぶわかりやすいものになりそうですよ!あははw

コメント

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

>私は先日、自ブログのXHTMLの採点をしただけで、
>まだ何ひとつXHTMLの準拠対策は手付かずでいます・・・トホホホ
あはは・・・yozoも一記事ずつエラーがないように更新しているだけですよ。
記事にたくさんのエラーがあるんですよ。┐( -"-)┌ヤレヤレ...
(ここの小粋空間のyujiroさんのテンプレートはほとんどエラーがないのです。)
まぁ、楽しくゆっくりやりましょうね。(゚-゚*)(。。*)ウンウン

コメント

>ばばるさん、こんばんはー♪

>へぇぇーーー!!!FC2で画像を使う時は色々留意点があるのですね!!
>入居間もない私にはとってもお勉強になりますー。
はい♪お役に立てそうですね。うれしいですよ♪v(。・ω・。)ィェィ♪
画像アップロードのさいに吐き出される<img>タグに、
エラーがありますからね。修正するようにしましょうね。(゚-゚*)(。。*)ウンウン
今日からFC2友達としても、よろしくお願いしまっす m(_ _)m

コメント

>モンビッケさん、こんばんはー♪

>すごい、こんなツールもあるんですねφ(・ω・*)フムフムφ(。_。*)メモメモ
あはは・・・せっかくのエディタですからね、置換や検索をつかわなきゃ、
一つずつ見るのも大変ですからね。特にバグとりのときは・・・(^○^)

>余談ですが、yozoさんブックマークがσ(・ω・*)の中でかなり有効で(笑
>これが溜まっていったら、そこらへんで出版されてる
>ハウトゥー本よりもだいぶわかりやすいものになりそうですよ!あははw
(///∇//)いえいえ♪そんなことは・・・ないですよ(*v.v)。ハズイ。。。。
でも、とても励みになりますよ。(^○^)
yozoの記事は説明がないので、簡単なのですよ。
まずは、動くこと!やってみること!これにまさるトレーニングはないですよ。
ちょっとしたミスで、大パニックになったりという経験こそが必要なんですからね。
「ノウハウだけじゃ、役に立たない」なんて堅苦しく考えないでいいじゃん!
楽しもうよ!っていうのがポリシーです♪(=⌒▽⌒=) ニャハハハ♪

コメント

yozoさんこんばんわぁ

今夜は「写真館」の設置には少し時間がかかるので、お忙しい中せっかく色々とご指導してくださったのに・・・とお詫びに来たのです

その時、この記事を発見!

「Diary」では別窓で開かないようにしてるんですが、自分でいらない物を削除している時
「あれ? /  が見当たらない??」って思っていたのです
でも、私はど素人でタグなど???状態なので、変にいじるとヤバい??と思っていたのです

でも、別窓の時に「大きさの指定は必要」とご指導して頂いたのを思い出しました

自分のPCではちゃんと見れても、色んな環境があるので奥の深さをあらためて実感しました

コメント

Diaryは8月からスタートして、まだアップした画像が少なかったので
width="幅" height="高さ" class="upimg"/>の追加を今、終えました


あの・・・変な質問してもいいですか?
別窓の時は
<img src="サムネイル画像のurl" alt="画像の代わりに表示される文字" width="150" height="132" /></a>
と、言うことで画像サイズの後に /> で閉じてますけど
それはいいんですよね?

コメント

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

なるほどなるほど・・・
そういえばココはXHTMLでテンプレ組んであるんでしたね?

私はまだソコまでたどり着いていないという現状なのですが、最近メインで使うブラウザをFirefoxに乗り換えてみて、環境でずい分と見た目に差が出てくるというのはアタマで知っていたダケとはカケ離れたモノだと痛感している日々です。

忍ブロでもテンプレ職人サン達はどんどんXHTMLでテンプレを作成されているようですし、BlogPetの投稿もばっちりとXHTML準拠だったりしている中で、私も次はXHTMLで・・と思う一方でアタマがなかなかついてこないという現状もあるワケで(。。;)

IE6でXML宣言をするとバグが出るってハナシもありますし、まだまだ勉強が必要な模様です。
当面は、記事内での更新で使用するタグくらいは、XHTML準拠も視野に入れて使っていきたいなぁとyozoさんの記事を見て思いました。

コメント

>みみこぉ☆^さん、おはよーございまっす♪

>今夜は「写真館」の設置には少し時間がかかるので、お忙しい中
>せっかく色々とご指導してくださったのに・・・とお詫びに来たのです
それは。それは。ご丁寧にありがとーございまっす。m(_ _)m
ゆっくりご自分のペースで進めていかれたらいいですよ。
お気遣いのないようになさってくださいね。

>別窓の時に「大きさの指定は必要」とご指導して頂いたのを思い出しました
yozoもみみこぉ☆^さんと同様の素人ですよ。Another HTML-lint gatewayでエラーをチェックして、解説を見て修正してます。一度エラーチェックをされたらいい勉強になると思いますよ (^○^)
Another HTML-lint gatewayのURL
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

コメント

>みみこぉ☆^さん、おはよーございまっす♪

>言うことで画像サイズの後に /> で閉じてますけど、それはいいんですよね?
class="upimg"は、必須のものではありませんから、省いています。
class="upimg"は、画像のデザイン設定をするために用意してあるものですから、画像を使用するご本人に必要があれば、その人に必要な設定をするためのものと考えてくださいね。yozoの過去記事も参考までに案内しておきます。
http://yozoblog2.blog63.fc2.com/blog-entry-374.html

コメント

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

>最近メインで使うブラウザをFirefoxに乗り換え
yozoも初めてIE以外のブラウザで自分のブログを見たときに、
これが現実か!というくらいデザインが崩れていましたね。
ブラウザによって違うって、同じにしろよ!って思ってましたよ (゚m゚*)プッ

>アタマがなかなかついてこないという現状もあるワケで(。。;)
yozoもAnother HTML-lint gatewayで、エラーチェックしながら、エラーの原因の解説を読んでいるだけですよ。アタマははじめからついていってないですね。
┐( -"-)┌ヤレヤレ...

>当面は、記事内での更新で使用するタグくらいは、XHTML準拠も
>視野に入れて使っていきたいなぁとyozoさんの記事を見て思いました。
ありがとーございまっす♪yozoもそのようにしています。過去記事をすべて
XHTMLにするのは、時間的に不可能に近いですから、これからの記事は
すべてエラーのないXHTML準拠のものにしてますよ。v(。・ω・。)ィェィ♪
Another HTML-lint gateway様様ですけどね。(^○^)

コメント

おぉお、またまた超お役立ち記事ですね!
読ませていただきましたが……わたしもyozoさんと同じやり方で記事を作成していましたよ☆
FC2仲間だとやっぱり似通ってきますよね♪
わたしも初めて「半角スペース+/」で閉じる、と聞いたときには
「<img>のどこにそれを入れればいいの??」と疑問だらけでしたw
やってみないと分からないものですよねぇ。
yozoさんおっしゃるとおり、実践あるのみ!ですね☆

追伸:sakuraエディタの置換作業……わたしも大好きです!w

コメント

>mioさん、こんばんはー♪

>おぉお、またまた超お役立ち記事ですね!
わぁ♪そうおっしゃっていただけると、とってもうれしいですよ♪(*^-^)
mioさんと同じ方法だったら、安心ですね。考え方が身につけば、楽なんですが、なかなかうまくいかないものですね。「記事の推敲+投稿」だったのが「記事の推敲+エラーチェック+投稿」となっちゃいましたからね。エラーチェックで時間をとられることも、しばしばです。┐( -"-)┌ヤレヤレ...

>やってみないと分からないものですよねぇ。
本当ですね♪習うより慣れろですね♪間違っていれば改めればいいだけですからね。幸い、今のところはみなさん、表示にエラーはないようですから安心ですよ♪

>追伸:sakuraエディタの置換作業……わたしも大好きです!w
気持ちいいですよね。失敗してもやり直しできるし、上書きしていても戻せるし・・・大変重宝してますよ(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪  

コメント

こんにちはー。yozoちゃん。
わわーーーこれこれ!!!私も困っていて、いつか聞こうかと思っていたのよー!!!これってぽちっとのことだよねー!!!うんうん。これ・・・。うまくいかなくて・・・。なんてだろーーー・・・。エキサイトの時と違うのかなぁー・・・。と悩んでいたんだぁー♪
わーーい☆
これで分かるね♪
時間あるときに作って保存しておけばいいね☆ありがとーー☆
やっぱりここに来るといろんな疑問が解消されるよー☆
ありがとーー☆

コメント

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

>わわーーーこれこれ!!!私も困っていて、いつか聞こうかと思っていたのよー!!!
おっといきなりお役に立ちましたか!ぽちっとの画像が変でしたか?
余計なタグを削除して、必要なものを追加してやらないと、正常に見えないこともあるようですよ。いつでも、ここの記事を活用してくださいね。うまくいかなかったら、また遠慮なく質問してね!(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>やっぱりここに来るといろんな疑問が解消されるよー☆ありがとーー☆
えへへ・・・そのように思ってくれるととってもうれしいし、
とても励みになりますよ。(*^-゚)vィェィ♪

コメントする

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

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

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


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