トータルビジター（総PV ）数
|
2007-10-10 Wed 14:20
2007年10月10日（水）
前回書いたように、しばらく前に、firefoxをインストール してみた。 入れる前から、ある程度の予備知識はあった。 afiliateさんの「アフィリエイトは儲かんないってば」で ・うはｗ超便利Firefox ・FirefoxとIEのfontの表示の差 などの記事（その他、firefox導入の関連記事多数あり） を、いくつか読んでいたからだ。 ＩＥとFirefoxの表示の差を埋めるのは、厳密に考えると 途方もなく大変そうなのだが、実は私にとって一番わかり やすく、なおかつ重要な差異に思えたのは、「心が折れそ うなアイコン」という記事の中でさらりと書かれていた、 ＩＥ用にalt属性、Firefox用にtitle属性を入れて お使いください という記述。 …え？ 【Firefoxでは、画像のalt属性は無効？】 ふだん私は、ブログ記事中に画像を挿入する時は <img src="http〜.jpg" alt="○○○"> というタグを使い、alt="○○○"の、○○○の部分には、 日本語で画像の説明を入れるようにしている。 これは本来、画像が表示できない際（キャッシュページ等 でよく見かける）の「×」の横に表示される代替テキスト。 ＩＥでは、画像の上にポインタを乗せれば、この○○○が 表示される。 ○○○の文字列は検索の対象にもなるので、私はなるべ くちゃんと書くようにしているのだが、firefoxユーザーには 見えていなかったのか…（ちょっとショック）。 せっかくなので、afiliateさん作の「心が折れそうなアイ コン」をお借りして、実験。  これはalt属性しか書いてないから、Firefoxだと、絵の 上にポインタ乗せても、確かに何も見えない…。 では、こちらはどうだろう？ こちらはtitle属性も書いたから、firefoxでも見られる。 ちなみに、このタグでは、alt属性とtitle属性の内容は、 あえて変えて、 <img src="http〜kokoro-oresou.gif" alt="もう勘弁してください（泣）" title="もう許してくれた？"> のようにしてみた。 こうすれば、ＩＥで見た時と、Firefoxで見た時、見え る文字が変わるだろうと思ったのだ。 ところが、どちらのブラウザでも、title属性の方が 表示されたのだ。 …となると、両方書いたら、alt属性は、本当に画像が 非表示の場合しか役に立たない…？ これならtitleだけ入れて、むしろaltは入れなくていい ような気もするのだが、ＩＥやFirefox以外のブラウザ では違いがあるのだろうか？ これからは、画像表示のタグにtitle属性も入れるべき か、ちょっと思案のしどころである。 【FirefoxはＩＥより、きまじめ？！】 afiliateさんの記事中にも何度か出てくるのだが、ＩＥは 結構いい加減なところがあって、ＨＴＭＬに多少の間違い があっても、気にせず表示してくれる。 良く言えば融通がきく。 でも、Firefoxは結構デリケートで、指示の仕方にミスが あると、言うことを聞いてくれない、という傾向があるよ うなのだ。 Firefoxを導入して、まず自分のブログを開いて、「アレ？」 と思ったのは、記事本文の行間だった。
[ 続きはここから… ]
私は自分の老眼が始まっていることもあり、文字は大きめ、 行間は広め、の「高齢者にも見やすいサイト（笑）」を心が けているつもりだ。 行間は、このくらいにしてある。  なのに、Firefoxで見たら、行間が狭い！（9/26時点）  何で、何で〜〜？ このブログのＣＳＳ（スタイルシート）には、 .entry_text { font-size: 14px; color: #4D4D4D; margin: 5px 30px 10px 20px; line-height : 170%; } と、指定してある。line-height : 170%; という指示は Firefoxでは無効なのか？と諦めかけていた時、やはり afiliateさんの記事「IEとFirefoxの表示の差」中のボー ダーに関する記述を思い出した。 同じＣＳＳなのに、ＩＥで表示されるボーダー（枠線）が Firefoxで表示されない原因を調べたら、borderの記述の 前に全角スペース（空白）が入っていたというのだ。 もしかしたら、ここにも全角スペースが紛れ込んで いるのかも…？ という疑惑浮上。 空白部分に全角スペースが入っているか、半角スペース が入っているか、ちょっと見には全くわからない。 そこで、上のＣＳＳを TeraPadで表示したものをお見せ しよう。 （TeraPad（テラパッド）は、半角・全角スペースがきっちり 表示できる、スグレモノのフリーのテキストエディタだ。）  ああ、やっぱり〜！ 全角スペース（□）が１個紛れ込んでた…。 そしてこれを削除したら、Firefoxでも、ＩＥと同じように、広 い行間で表示されるようになった。 Firefoxが悪いのではなく、ＣＳＳが正確に書かれていなか ったことが原因だったのだ。 （しかし、問題なく表示しちゃうＩＥも鷹揚だな…笑） これはたまたま行間の指示の例だけれど、ＩＥとFirefox で原因不明の表示の違いがあって悩んでおられる方は、 一度、全角スペース探しをやってみるのもいいのではない かと思う。 【firefoxユーザーはブログのカラム落ちに注意】 たまに、レイアウトが崩れて、記事部分や、メニューバー 部分が、ページの下方に落ちて、いわゆる“カラム落ち” を起こしてしまっているブログを見かける。  お友達の場合は知らせてあげるのだが、ご本人は気づい ていないことが多く、そういう方はだいたい、ＩＥ以外のブラ ウザを使っておられる。 ＩＥユーザーから見ると、規定の横幅サイズを超えた写 真や文字列を使って、ワクに収まりきれなくなっているの がわかるのだが、ご本人のブラウザから見ると、ちゃんと ワク内に収まって見えるようなのだ。 何でこういう違いが起こるのか、かねがね不思議に思って いたのだが、これもafiliateさんの記事で納得した。 今日はafiliateさんのお世話になりっぱなしなので、つい でに画像もそのままお借りして説明させて頂く。 ＣＳＳで、「width: 250px;」と同じように指定しても、 border（枠線）幅が10pxだった場合、こんなに表示に差が 出るという。 “width”の数字を、内寸と見なすか、外寸と 見なすかの違いである。 （詳しくはafiliateさんの「IEとFirefoxの表示の差」の記事 へどうぞ。）  つまり、最初からFirefoxでの表示に合わせて横幅一杯 に作ってしまうと、ＩＥでは表示しきれずに、カラム落ちが 起こる可能性があると考えられるのだ。 【わからなかったこと】 表示の違いに気づいたが、自分では原因も対策もわか らなかったこともあった。 それは、私のホームページ（本館）内の「リンク集」の ページの背景。 私としては、背景画像は固定したまま、 文字だけがスクロールされるようにしてあるつもりなの だが、今回Firefoxで見てみたら、背景も文字と一緒に 動き、画像が繰り返し表示されていた…。 body, { line-height:120%; background-position:left; background-attachment:fixed; background-image:url(sozai/sky_in_1280-800.jpg); background-repeat:no-repeat; } というＣＳＳの指定だけではダメなのだろうか？ もし、対策をご存じの方がいたら、教えて頂ければ幸いで ある。 《追記》 afiliateさんに早速助言を頂き、最後の問題が解決した。 body, { の部分から、コンマと半角スペースを除いて body{ としたら、Firefoxでも、背景が固定されるよう になり、感激！！ 全角スペースだけが悪さをするわけではないことが、 これでわかり、勉強になった。 Firefoxって、本当にデリケート！ お忙しいのに、すぐにご自身のサーバーでの動作確認 までして下さったafiliateさんに、深く感謝申し上げる。   |
 |
|
--
どおも~ミセス・かんちがいさま。素敵にご紹介いただいて、ありがとうございます。最近あまり紹介されることも無く、さびしい秋を過ごしておりましたので（笑）、こんなにたくさん記事をご紹介いただいて、感激です。
ところで、Firefoxでの背景が固定しないとの事ですが、 body, { ↓ body{ にしてみてください。 それから、各行の最後にスペースが入っていないか確認してみてください。 手持ちのレンタルサーバーにアップロードして確認しましたが、Firefoxでも背景は固定されましたよ~。 ではでは~。
2007-10-10 Wed 23:24 | URL | afiliate #-[ 内容変更]
-感激です！ ありがとうございましたっ！！-
＞afiliateさん
さすが、afiliateさん！ すぐに問題点を見抜かれたのですね。 わざわざ、サーバーにアップロードして確認して下さ ったとのこと、本当に恐縮です。 ご指摘の通りにやってみましたら、あっさり正常に 表示されました。 何だか自分の知識のなさが恥ずかしいですが、とても 助かりました。結構苦労して作ったページなので （とは言ってもホームページビルダー頼みなのですが） ちゃんと表示されて、すごく嬉しかったです。 本当にありがとうございました。 afiliateさんのことは、とても勉強熱心な方だと尊敬 しています。ユーモラスな文章にも、いつも親しみを 感じております。（私みたいな、ド素人のオバサンに 慕われてもご迷惑でしょうけど…(＾＾;) afiliateさんを見習って、私も頑張ります。 師匠！ 今後とも、よろしくご指導願います♪ ※追伸 「IEとFirefoxの表示の差」の記事の方へ、 トラックバックを改めて送りました。 昨日送ったトラックバックは、消して頂いても （もちろんそのままでも）構いません。 いろいろとお心遣いを頂き、感謝です(＾_＾) -たしかに！？-
わがHPでは、TITLE 優先で使っています。
ALTは殆ど予備扱い。 ブラウザによってALT記述がマウスオーバーで表示されると うるさいので、書かない場合も多いです。 構文は、ちょっとした気づかぬミスで表示されない事があるから ミスを捜すのが結構手間で、イライラさせられることがありますね。 ブラウザによっても、表示がまちまちな構文や、表示されないのもあるし・・・ 同じブラウザでも、バージョンによって、同じく読めないものもありますし。 ちなみに、Mac Safariも、だいたいFirefoxと同じ様な感じに 表示されます。 文字間の記述なども効かないのもありますね。 でも、ネスケが一番云うこと聞かない気がします。 結局は、単純な構文が一番だなっ、って思いますが それだけだと機能が制限されてつまらないしなぁ〜・・・ iCabと云うブラウザは便利で、見ているページのソースを表示させると 赤い文字で、間違っている箇所を指摘してくれるのが便利です。 分かっていて、書いているのと、気が付かないのとでは随分さが出ますし 念のため自身のHPも、新しいのを書いたら、確認用に利用しています。 HP、FONTの違いでも、レイアウトが変わるので、これまたやっかい ユーザーによっては、カスタマイズしている人もいるし、モニター 解像度によっても見やすいサイズが違うし・・・・小生はFONT指定を 行わず、そのユーザーに合わせて、+1とか-1とかで大きさを指定してます。 ブラウザ、みんな同じ様に読んでくれるといいのにねぇ〜・・・。 -なるほど…-
＞koba2106さん
ALT属性は予備扱いって考え方もありますね。 私などは、あちこちのブログを見て回る時、わざわざ 画像にポインタ当ててチェックしてますけどね〜。 管理人さんによっては、ＡＬＴ属性で表示される コメントが面白かったりもするので…＾＾ iCabというブラウザ、ソース表示させると間違いを 指摘してくれる、というのは便利でいいなあ！…と 思ったのですが、Firefox（最新・Win版）でも、 その機能はあるようですよ。 私が自分のサイトの「頂き物ギャラリー」のページ のソースをFirefoxで見たら、間違いが赤い太字に なっていて、すぐに直すことができました。 半角・全角スペースは表示されないのですけどね…。 ホームページビルダーなども、間違ったＨＴＭＬを 勝手に修正してくれるのだけど、直してくれても、 どうも、ＩＥにしかうまく対応していないようです。 追伸…ホテイアオイの写真、キレイですね。 まだまだあるのでしょうね。楽しみにしてます！ -なるほど-
そうかぁ〜、Altの使い方、そういうのもあるんですね ただし、ブラウザによって表示されないから TITLEにしておきます。 でも、あんまりピョコ ピョコ出てくるのもなぁ〜・・ Firefox、間違い指摘ソース表示知らなかった！ と、いうより、動作確認やSafariの予備扱いだったので あまり探求していませんでした。 ボタンとかのインターフェースがいまいち、カッコ良くないもので（笑） Macでも出来るか試してみます、ありがとう。 ホテイアオイ、只今壁紙制作中です。 -今頃、ホテイアオイ画像と格闘中かな＾＾？-
＞koba2106さん
alt属性にしても、title属性にしても、画像に ポインタを当てなければ文字は出て来ないので 私は邪魔に感じたことはないんですけどね。。。 普通のブログ等だと、画像もそんなに大きくないから 見るつもりがなければ見ずに済む場合の方が多いと 思います。 むしろ邪魔なのはWindowsの場合、画像左上に印刷やら 保存やらの為に出てくるアイコン…アレが邪魔っ！（笑） 右下に拡大のためのアイコンは必要だと思いますが…。 title属性はまだ使い始めたばかりなのでわかりませ んが、alt属性は検索の対象になるのはやっぱり魅力 ですよ。本文中に書かず、alt属性にだけ書いた言葉 で検索されたこと、随分あります。 Firefoxのアイコンボタンのデザインは確かにイマイチ ですね〜（笑）。 模様替えもいろいろできるみたいだけど、う〜ん、 そこまでカスタマイズせんでも…という感じだし…。 Safariは、きっとスマートなんでしょうね♪ ホテイアオイの花、れんげそうさんの所で見ました けど、ちょっと「シャガ」の花に似てますね〜。 あんな花が咲くなんて、全然知らなかったわ＾＾ -確かに-
ALTは確かに検索対象になるから良いですね TITLEはどうなのかなぁ？？？ これは、単純に吹き出しだけかもねぇ？？？ 肝心な所だけはALT書いていますが 面倒なので全ては書いてませ〜ん・・・・笑 --
＞koba2106さん
ALT属性やTITLE属性をいちいち書くのは確かに面倒では ありますね。。 私は当面、TITLE属性だけ記述してみようかと思ってます。 画像貼り付けタグはＵＲＬも含めて単語登録してますが、 title=""も含めて登録しなおしました。 何かまたわかったことがあったら、お知らせしますね＾＾  |
|
|
|
|
|
| ミセス・かんちがいのブログ日記 |
|