FC2ブログ

alt属性とtitle属性って!! クリスマススキンに模様替え♪

2006年11月25日

あと一ヶ月でクリスマスですね~♪
クリスマスは大人になってもなんだかワクワクするイベント。
ブログでもクリスマスを楽しもうと思い、
いろいろな素材屋さん巡りをして素敵な画像に出会うことが出来ました♪
いろいろお借りしてきて自分のブログをカスタマイズしてみました♪
今回はいつも以上に画像が多いので、ちょっと重いかも。(゜ー゜;Aアセアセ
あまりにも重かったので別サーバにアップしたらちょっとましになった。。。と思います。
(※基本的にFC2は外部サーバから画像を呼び出しすることは出来ません。
相性のいいサーバがあったのでそちらに画像をアップしております。)


今回は新しいことには全く挑戦していないので、
画像をお借りした素材屋さんの紹介をさせていただきますね♪
ブログタイトル部分(バナー部分)の画像と後ろの壁紙をお借りしたのは
「季節の窓」さまです。
検索でたどり着いたのですが、本当に素敵な素材でいっぱいでした♪
とっても素敵なクリスマスツリーといい、夜の町並みといい素敵です♪
「季節の窓」さま、ありがとうございました♪(*- -)(*_ _)ペコリ


次はハロウィンのときにもお世話になりました
「犬の素材*今日もわんパグ」さまよりお借りしてきました素材のご紹介です♪
ブログタイトル下のそりを引いているトナカイ&サンタさん。
記事下の手を振っているわんこ画像2点。
右サイドの各タイトルの頭につけたサンタの乗っているブッシュ・ド・ノエル。
そして右サイドバーの「最近の記事」や「最近のコメント」などの頭についている
クリスマスツリーのアイコンをお借りしてきました♪
手を振っているわんこが可愛くて可愛くて一目ぼれ♪(*^。^*)ポッ!!
わんこ素材がいっぱいですのでわんこ好きにはたまりませんよ♪d(*⌒▽⌒*)b ニコニコッ
「犬の素材*今日もわんパグ」さま、可愛い素材をありがとうございました!!(o*。_。)oペコッ


次に記事タイトルしたのラインと右サイドバータイトルの下のライン、アイコンは
以前もお邪魔させてもらった「★Paper Company-壁紙屋-★」さまより
お借りしました。
右サイドバーの下のラインはちょっと短すぎたので両脇にアイコンを配置させてみました。
「★Paper Company-壁紙屋-★」さま、ありがとうございました。ペコリ(o_ _)o))


そして記事の一番したの手を振るわんこの間にあるベルつきラインは
「柚莉湖♪風と樹と空と♪」さまよりお借りしました。
可愛いラインをありがとうございました♪(o*。_。)oペコッ


CSS設定の画像は無理ですが、HTML設定で配置している画像は
画像の上にマウスカーソルをのせますとどの素材屋さんにお借りしたかが
分かりますので、興味のあるかたは確認してみてくださいね!!


061125usabi.jpg

さてさてこの画像の上にマウスカーソルを置くと
ポップアップで説明が出るものなのですが。。。


左の画像の上にマウスカーソルを置いてみてください。
四角の枠に囲まれて文字が出ますよね♪
この機能について思いっきり勘違いしていることに
今日気がつきました。(^^;;



imgタグの中にalt="画像の説明"のように入れているのですが、
IE(Internet Explorer)ではこれだけでポップアップで説明が出ていました。
alt属性は画像が表示されないときに代わりに表示される文字のことなのですが、
alt属性がこの機能も兼ねているのだと思っていました。


ところがっ!!FireFoxではマウスカーソルを上においてもポップアップが
出ないのです!!(・_・o)ン? (o・_・)ン? (o・_・o)ン?
そこでいろいろ検索して調べてみたところ
「Web標準普及プロジェクト」さまの
「img要素でalt属性の内容がポップアップしない」のページを
発見したのです!!
このページによりますと
ツールチップとしてポップアップするべきはtitle属性に指定された内容です
ということでした。
なるほど~。勉強になりました。
なのでimgタグは
<img src="http://画像のアドレス" alt="代替テキスト" title="ポップアップで表示させたい言葉" width="画像の幅" height="画像の高さ" />
のように書くといいということですね♪
ちなみにIEではalt属性だけのときはaltの中身がポップアップで出ますが、
どちらも入れた場合はtitle属性の方の中身がポップアップで出るようです。
「Web標準普及プロジェクト」さまは
「Webブラウザを選ばないWebサイト」を作ろうというプロジェクトだそうです。
いろんな環境の方に同じ状態で見てもらえるサイトをつくるというのは大事なことだと思うので
私もしっかり勉強していこうと思います!!

↓応援よろしくお願いします!!( ^.^)( -.-)( _ _)
banner_02.gif

スポンサーサイト



スレッドテーマ:ブログ:ブログ

メイン

トラックバックURL


トラックバック

コメント

まゆびさん、今晩は~^^
毎回、季節になると可愛いテンプレートを見させていただき、
とっても楽しいです^^
今回も、壁紙もバナータグも可愛くって、いいですね~♪
σ(^_^)はm年がら年中同じプレートですワ・・・。
特にFc2ブログはスキンの数が莫大にあるので、ここから探すのも
大変なのに、検索で探すとは\(◎o◎)/!流石です^^
これで、益々Xmasの雰囲気が増して来ましたね~♪
とってもステキに模様替えですね♪ロマンチックなクリスマスが訪れそう(*^o^*)
たくさんの素材どころをご紹介、とってもうれしいです(ってととろはまだ背景を一個も触ってないのですが・・・(;^_^A )

ところで、今回のaltとtitleにどっきりしました。
今までココログで画像をアップすると
<img src="http://画像のアドレス" alt="代替テキスト" title="ポップアップで表示させたい言葉" ・・・・・>
と出ていたのをわざわざ『title="ポップアップで表示させたい言葉"』を消していました。最初は同じ言葉を入れていたし、アドバイスいただいたものも入っていなかったのでいらないと思っていたのです(ととろの大きな勘違いかもですが・・・)
次回からはココログ消さないようにしなくっちゃ!勝手に消して御免よ~ココログ(爆)
ありがとうございました。

クリスマス気分がどんどん盛り上がってきましたね♪
凸ねこさん、こんばんは♪ヾ(=^▽^=)ノ
めちゃくちゃ早かったのでびっくりしました。(笑)
季節やイベントごとにテンプレを変更するのが楽しくて♪(*'ー'*)ふふっ♪
今回は大好きなクリスマスイベントということで
いつも以上に張り切ってしまいました。(爆)
>今回も、壁紙もバナータグも可愛くって、いいですね~♪
ヽ(^◇^*)/ ワーイありがとうございます♪

そうそうFC2はいろんなスキンが配布されているので
そちらを使う手もあるんですが、私の場合、スクロールバーだの、
コメントのツリー化スクリプトだのを移植しなければならず、
結局自分で素材を配置した方が楽だったりするのです。(笑)
とはいっても好みの素材を検索で探すのは結構時間がかかるのですが。(^^;;
次はBlogPet背景を変更したいと思っています♪
後ほど凸ねこさんちの背景もお借りしにいきますね♪ヽ(*^^*)ノ
ととろさん、こんばんは♪ヾ(=^▽^=)ノ
凸ねこさんへのレスを書いている間に追い越されちゃった。(笑)
>とってもステキに模様替えですね♪ロマンチックなクリスマスが訪れそう(*^o^*)
とっても嬉しいコメントをありがとうございます!!
頑張った甲斐がありましたー!!ヾ(●⌒∇⌒●)ノ わーい
今日、紹介させてもらった素材屋さんはたくさんの画像が
ありましたのでぜひぜひ覗いてみてくださいね♪

おお!!ココログはきちんとtitle属性が出るのですね!!
以前にエラーチェックをしたところでは
alt、width、heightについてはエラーとして認識されたのですが、
title属性については何も言われませんでした。
今回たまたまFireFoxではポップアップが出ないことに気がついて調べてびっくり!!
どのブラウザでも出来るだけ同じように見えるようにするというのは
大事なことだなと思うので、私もきちんとtitleを入れていこうと思います。

>クリスマス気分がどんどん盛り上がってきましたね♪
ですね~♪次はBlogPet背景をお借りしにいこうと思っています♪(*'ー'*)ふふっ♪
まゆびさん、こんばんは!
素敵なテンプレートですね♪
毎回細かいところにまで手が込んでて感心しちゃいます。
そろそろうさびちゃんの背景もクリスマスに変わりそうですね^^
楽しみにしてます♪
しゃおりんさん、こんばんは♪ヾ(=^▽^=)ノ
素敵だなんてありがとうございます♪ヾ(@⌒▽⌒@)ノワーイ!
とっても可愛い素材がいっぱいなので出来るだけたくさん
使おうと思ったらこんな画像いっぱいのテンプレになりました。(笑)
>そろそろうさびちゃんの背景もクリスマスに変わりそうですね^^
ふふ。この記事をアップしたあと借りてきて今、増やしました♪
これでますますクリスマスが楽しめそうです♪d(*⌒▽⌒*)b ニコニコッ
まゆびさん、ブログの方にコメントを残して頂いてどうもありがとうございました。
まゆびさんの記事に助けて頂きまして、感謝しております。
勝手ながら、自分のブログの記事の中から、まゆびさんのブログへリンクさせて頂きました。
もし、何か不都合があればご遠慮なくおっしゃって頂ければ幸いです。

まゆびさんのブログは、すっかりクリスマス仕様になっていますね。
とてもキレイです。
いつか、私もこんな風に思い通りのテンプレートを作るのを目標にしています。

うさびちゃんがとても楽しそうに見えますね!
桜もちさん、こんばんは♪(^▽^)/
コメントありがとうございます♪(o*。_。)oペコッ
リンクの方も、本当にありがとうござました。
うちのうさびのことも紹介してくださって嬉しいです♪
本当にありがとうございました♪d(*⌒▽⌒*)b ニコニコッ

クリスマスのテンプレ褒めていただいてありがとうございます!!
クリスマスはとっても大好きなイベントなもので
時間をかけて素材屋さんを巡ったり、画像をいろいろ配置したりして
カスタマイズしてました。
1ヶ月間、このテンプレを楽しみたいと思います♪(*^^*)

>うさびちゃんがとても楽しそうに見えますね!
飼い主と同じでイベント好きなのかしら?(笑)
まゆびさん、こんばんは。
きゃぁ…もうクリスマスですね♪すてき~
星の瞬く夜に、それぞれのお家の食卓には、ごちそうが並び、みんな笑顔なんだるなぁ
…などと、うっとりしながら眺めちゃいました。
てるひは12月生まれなので、いつもクリスマスと一緒にされちゃって
さみしかったから
てるひのBlogは、クリスマス色にはしないつもりなの。
あくまでも誕生日仕様で、いこうか・・・と(笑)
まゆびさんとこで、クリスマス気分にひたらせてもらいたいと思います。

FC2って。外部サーバーから画像を呼び出すことはしないいの?
FLASH背景も、自分のとこのサーバーにアップしているの?
Blogによって、いろいろなんだね。
きのう、樹みたいな説明したかったの♪
まゆびさん(。・ω・。)ノコンチャ☆・゚:*:゚
季節ごとのブログスキン、とても楽しませていただいてます♪
毎回絵をチョイスして、並べ方やソースを研究されて・・
とてもこちら側としても勉強になりますです。
> <img src="http://画像のアドレス" alt="代替テキスト" title="ポップアップで表示させたい言葉" width="画像の幅" height="画像の高さ" />
こういったことも読ませていただいて初めて気付いたり(爆
いつも新しい発見をありがとうございます^^
これはブックマークさせていただかなくちゃ☆
こんにちはー。
うーんBBSにも書かせていただきましたがやっぱステキなテンプレですー。。。
私もこういう深い藍色の夜背景を探してるんですが
なかなかいいのがなくて・・・
寒色系のテンプレって何やらダークでコワイイメージのものが多い気がするのですが
このテンプレはほんとにかわいくていいですね!
さーX'masに向けて私もいいの探そうっと!

>>alt属性がこの機能も兼ねているのだと思っていました。
・・・私もです。
今、初めて知りました!
うーんとっても勉強になりましたょ。。。
ありがとうございました☆
てるひさん、こんばんは♪ヾ(=^▽^=)ノ
クリスマスは大好きなので長く楽しみたいなぁと思い、
早めに素材探しなどをしておりました♪(*'ー'*)ふふっ♪
まだまだ気になる点もありますが、可愛くできたなと思っています♪
>てるひは12月生まれなので、いつもクリスマスと一緒にされちゃって
>さみしかったから
あ、分かります~。私の友達もそう嘆いてました。
そちらは誕生日仕様なのですね!!
ではぜひぜひうちのクリスマスを楽しんでくださいね♪ヽ(*^^*)ノ

>FC2って。外部サーバーから画像を呼び出すことはしないいの?
以前は問題なかったのですが、今は基本的に駄目みたいです。
私の場合はランダムなのでもともと別サーバにおいてあるのですけどね。
FC2はいろんな種類のファイルをアップロードできるので
Flash背景を使うかたはそちらにアップしているんじゃないかな?
ブログサービスによって本当にいろいろ違うのですね。
うさび???樹みたいな説明って何???
クリスマスツリーについて説明してくれるつもりだったのかな?(笑)
モンビッケさん、こんばんは♪(^▽^)/
嬉しいコメントをありがとうございます♪(o*。_。)oペコッ
ブログを始めたころはずっと公式テンプレを使っていたのですが、
可愛い素材屋さんを見つけたことからカスタマイズにはまり、
今ではブログを運営する楽しみのひとつになりました。
まだまだ気になることは山ほどあるのですが、
ちょっとずつ頑張ろうと思っています♪

title属性については私もたまたま気がついたのですが、勉強になりました。
ブラウザによって見え方が違うということは知識としては頭にありましたが、
実際にいろんなブラウザを使って自分のブログを見たときに
こんな変なレイアウトで見られているんだ。ということに愕然。(笑)
今回発見したサイトで勉強していこうと思っています♪
ばばるさん、こんばんは♪\(^▽^)/
褒めていただいて本当に嬉しいです~♪
ありがとうございます。<(_ _)>
>私もこういう深い藍色の夜背景を探してるんですが
>なかなかいいのがなくて・・・
FC2は共有テンプレも多いですが、自分の好みのものを探すのは大変ですよね。
私もいろいろ苦労した覚えがあります。
>寒色系のテンプレって何やらダークでコワイイメージのものが多い気がするのですが
>このテンプレはほんとにかわいくていいですね!
そうですね。私自身は暖色系が好きなのですが、クリスマスはやっぱり
夜のイメージなのでいいのが見つかるといいなぁなんて思いながら
素材探ししていました♪
ばばるさんもテンプレ探し頑張ってくださいね♪楽しみにしてます♪

おお!!ばばるさんもalt属性が兼ねているのだと思っておられたのですね!!
私も調べてびっくり。本当に勉強になりました。
FireFoxユーザーも多いと思うのでIEと同じように見えるように
きちんと設定していきたいなぁと思います♪
まゆびさん、こんばんはー♪
 めちゃくちゃ素敵なテンプレートですね。ついついyozoも紅葉から冬用を飛ばしてクリスマス用のテンプレートに変更したくなりますよ。(^○^) そろそろと思いながらも、ぐずぐずしているyozoでっす。この星空の下の町並みがとてもきれいですね。(* ̄。 ̄*)ウットリ
 altの内容は確かにIE6.0では表示されますよね。通常はaタグと同様にtitleだけが表示されるだけのはずなのに、ややこしいですよね。┐( ̄ヘ ̄)┌ ヤレヤレ・・・
imgタグのタイトル表示はyozoも無頓着でっす。全ブラウザに同様にするには、imgにaltとtitleを同じ内容で入力しなきゃいけませんよね。(; ̄ー ̄A アセアセ・・・ タイトル表示させるときは両方を使用するように注意しておきまっす。とても勉強になりました。ありがとーございまっす♪m(_ _)m
yozoさん、こんばんは♪(o^∇^o)ノ
褒めていただいてありがとうございます♪ヾ(@⌒▽⌒@)ノワーイ!
クリスマスは大好きなので1ヶ月しっかり楽しみたいなぁと思って
早めにチェンジしちゃいました~♪(笑)
私はクリスマス後に冬背景(多分雪背景かな?)にするつもりです。
yozoさんもそのうちクリスマステンプレにされるのかしら?
楽しみにしてますね~♪ワクワク♪o(^o^o)(o^o^)oワクワク♪
>altの内容は確かにIE6.0では表示されますよね。
>通常はaタグと同様にtitleだけが表示されるだけのはずなのに
aタグにもtitleを入れるのですかっ???それは知らなかった~。
でも入れたら便利かもしれませんね~。勉強になりました。(o*。_。)oペコッ
今回のimgタグについては本当に勉強になりました。
今は私もFireFoxとIEを併用しているので、
両方同じようになるように努力しています♪
まだまだ知らないことがたくさんあるんでしょうね。頑張らなければ。

コメントする

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

|

Copyright c 200x xxxxx. All Rights Reserved.

/for one column -->