スポンサーサイト

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

FC2ブログ 画像の「ALT」と「TITLE」を使ってみる

FC2ブログで画像を綺麗に載せるコツ
この記事で指摘があった「ALT」と加えて「TITLE」関連の話をしたいと思います。
ただし、完璧だとは思わないでください・・・
記事に書かなかったのもあまり把握できていない事だったからでして・・・

初心者が勉強したばかりのALTとTITLEの話を無謀にも解説してみよう

今回はそんな感じです、出来るだけ間違いのないようにがんばって見ますが
クリティカルな間違いがあったら指摘おねがいします




ALTってなに?」

gazou20.jpg
これです、FC2ブログの機能でそのまま画像を掲載すると
Internet Explorerでこうなったりするコレです
テンプレートや設定によっては?出なかったり
ChromeやFirefoxでは表示されなかったりするみたいです
どうもInternet Explorerというのはコードの読み方が独特らしいんですよ
一番多く使われてるInternet Explorerで綺麗な画像を楽しんでもらいたい

「せっかく綺麗なSSが撮れて掲載したのに無粋なツールチップが・・・

ハイ、とりあえず超簡単な解決法を先に

<img src="http://blog-imgs-55.fc2.com/s/a/t/satori3502/gazou20.jpg" alt="gazou20.jpg" border="0" width="560" height="316" />

alt="gazou20.jpg"

上の画像のコードで言ったらココ
コイツを「 alt="" 」と書き換えてしまえば表示されなくなります




そして前回のサムネイルや画像リンク作成の時に指摘を受けていた部分
あのままだとInternet Explorerでせっかく入力したメッセージが表示されずに画像名がポップアップされていたんですが

gazou19.jpg
ここで入力したタイトルが「 title="表示させたいメッセージ" 」となるので
「 alt="画像名" 」となってる場所を
「 alt="表示させたいメッセージ" 」画像名をメッセージに書き換えます

サムネイル画像から画像ページへのリンク

<a href="http://blog-imgs-55.fc2.com/s/a/t/satori3502/Aion0381.jpg" target="_blank" title="クリックで大きい画像が見れます"><img src="http://blog-imgs-55.fc2.com/s/a/t/satori3502/Aion03811.jpg" alt="クリックで大きい画像が見れます" border="0" width="293" height="164" /></a>


画像リンク、所謂バナーリンク

<a href="http://event2.ncsoft.jp/1.0/nc/reportList/" target="_blank" title="NCsoft不具合関連報告ページへ"><img src="http://blog-imgs-55.fc2.com/s/a/t/satori3502/20120919_renewalNotice_banner.jpg" alt="NCsoft不具合関連報告ページへ" border="0" width="272" height="96" /></a>


上記のように書き換えることで
Internet Explorerでもツールチップメッセージを表示させることが出来ます
Internet Explorerでは画像部分のALTが表示されて
ChromeとFirefoxではリンク部分のTITLEが表示されてます
どんな感じになるかは「FC2ブログで画像を綺麗に載せるコツ」を参照してください




「ALTの本来の役割

手っ取り早い楽な方法を紹介しましたが
ALTってそもそも「代替テキスト」と呼ばれるもので、本来は回線トラブルなどで画像が表示されなかった時や、動作を軽くするために画像表示を切っている人のための、「画像がなくてもわかるようにするための説明文」なんです

gazou17.jpg
たとえば筆者が普段使ってるChromeで画像表示を切ってみると・・・


gazou16.jpg
画像化してあるサトリブログのタイトル部分はこんな風に表示される
左上に表示されてるのがALTです
画像表示を切っていてもサトリブログだとわかるようになってます

ALTはただの説明文や画像名ではなく
画像が表示されなくてもその画像の代わりの役割をするテキストです
これがALTの本来の役割らしいです。

だから、ALTが空白であったり画像説明以外の言葉が入ってるのは本当はよろしくないらしいんですよ(「alt="" 」でいいじゃん!っていう主張があったり、「クリックで拡大画像」とかでもいいじゃん?っていう解説をしてるサイトもありました)

ゲームブログに画像表示されてないときの事まで考える必要があるのか?
多分ないと思います、ゲームのプレイ日記ブログはプロが作るサイトじゃないですし
ゲーム自体がまず映像ありきで、ゲームが出来るくらいのPCスペックはあるずだしね

FC2ブログ初心者がツールの機能をクリックしながら記事を作るなら
ここまででいいと思います、これ以上は正直よくわかってないしな
それでは話が終わってしまうのでTITLE要素の話をしていきます









TITLEって何?」

gazou21.jpg
URLリンクにマウスを翳したとき表示されるこれです


gazou19.jpg 
URLボタンをクリックしたときにでるボックスにある「タイトル」
これがTITLEです

<a href="http://satori3502.blog.fc2.com/blog-entry-70.html" title="該当ページへ">FC2ブログで画像を綺麗に載せるコツ</a>

コードにするとこうなる、赤い部分がそうです
これがTITLEでブラウザの隔てなくツールチップとして優先的に表示されるものらしいです
実は画像にも使えるんですよ



<img src="http://blog-imgs-55.fc2.com/s/a/t/satori3502/Aion00444.jpg" alt="Aion00444.jpg" border="0" width="197" height="88" />



FC2ブログの画像アップローダーから「画像タグのみ」を選択してタグを挿入するとこうなりますが

gazou22.jpg
Internet Explorerで表示するとこうなります、Chrome、Firefoxでは何も表示されません
「alt""」と、altの中身を空白にすることで消す事が出来る事は説明しましたが

<img src="http://blog-imgs-55.fc2.com/s/a/t/satori3502/Aion00444.jpg" alt="Aion00444.jpg" title="新キャラ登場!" border="0" width="197" height="88" />

「alt="画像名"」の後ろtitle="表示させたいメッセージ"」を追記することで

gazou23.jpg
どのブラウザでも同じメッセージを表示することが出来ます
「title=""」とすればaltを変更せずにInternet Explorerでも何も表示しなくなります

<a href="http://blog-imgs-55.fc2.com/s/a/t/satori3502/Aion0044.jpg" target="_blank"><img src="http://blog-imgs-55.fc2.com/s/a/t/satori3502/Aion00444.jpg" alt="微笑う少女の唇・・・" title="クリックで正体が明らかに!" border="0" width="197" height="88" /></a>

前回説明した画像リンクで(投稿設定を「元画像にリンクさせて」しているときも基本的に同じです)
画像部分の「alt="画像名"」の後ろに「title=”表示させたいメッセージ”」を追記して
「alt="画像名"」を「alt="画像が表示されなかったとき用の説明"」に書き換えると

gazou18.jpg
画像が表示されなかったときはこんな感じに
どうですか、画像がなくてもなんとなく雰囲気わかった気がしませんか
画像を見れない人でも話の内容がわかる工夫です

微笑う少女の唇・・・
↑実際に表示させるとこうなります(クリックしてみてください)
URLボタンを押したときに出るタイトル入力のボックスは
画像部分に追記したTITLEが優先表示されるので空白でOKです

ちょっとした仕掛けをすることで読者に対して優しいブログ作りが出来たりしそうではありますが、毎回毎回きっちり作る必要はないと思います、ぼくらは完璧なサイト作りを目指してるわけでもないただのゲームブロガーだしね。

ただ「ALTは画像の代わりの役割を果たすテキストで、TITLEはどのブラウザでも表示出来るメッセージ」と覚えておけば、何かの機会に役に立つかなと思います。













Aion0052.jpg
モデルはサブキュアのsatori、30ELをコンプリートしたときのSSでした


ゲームブロガー向けの解説にこれが需要があるか激しく疑問ですが
記事を書くに当たってあちこち検索しても小難しいページしか見つからなかったので
こういうページがあってもいいかなーとか思ったりも・・・

なんにせよ、サトリブログ的にはここまでです
これ以上の知識が欲しい方は詳細に解説してくれているサイトが他にあると思いますので探してみてください(笑)




コメント

名前:管理人のみ閲覧できます:2012/10/14(日) 01:44:22 ID: 
このコメントは管理人のみ閲覧できます
名前:サトリ:2012/10/14(日) 01:55:54 ID:UusUfJCE 
>>350
応援ありがとうございます
少しでもそう思ってくれる人がいるなら書いた甲斐があったってものです、報われた気分になるw
これからもよろしく~
名前:Andel:2012/10/14(日) 20:50:26 ID:- 
サトリさん、お久しぶりです!
と言っても、覚えているかわかりませんが・・・
エテンで(良く怒られながらも)一緒に戦っていたAndelです。
(怒られはしましたが、わたしは気にしないほうなので、楽しくプレイしてましたよw)
怒られるとは分かっていながらも、
やってしまったこともありました・・・すみません^^;
サトリブログは良く見てます。
いろいろ戦っているなーと感心してます!

さて、ALTの話ですが、
昔なにかの記事で見た記憶では、
視覚障害の人達用に、
テキスト読み上げソフトなどで画像の説明を読み上げる為のもの、
だったような。
以前は、障害者用の良い記事(サイト)の作り方として説明あった気がします。
(記憶違いだったらご勘弁を。)
今は、そういう説明があるのかはわかりませんが。。。

では、
また機会があったら、一緒に戦いましょう!
(ゲームでねw)
名前:サトリ:2012/10/14(日) 21:06:59 ID:UusUfJCE 
覚えてるよwwwww
キャラの造形まで覚えてるわww
うん、常に何かと戦ってる気がするなwww

>視覚障害者用
ほほう、そういえば今はTITLE要素も読み上げることができるとかなんとかどこだかで書いてたなー
視覚障害云々は調べた範囲では見つからなかったけど、確かにそんな使い方できそうね

また、どこかで一緒になったらよろしくw

コメントの投稿


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