コンピュータ・インターネットノウハウをみんなで自由に編集し合える!

FC2ブログ 画像の「ALT」と「TITLE」を使ってみる コンピュータ・インターネット

「FC2ブログで画像を綺麗に載せるコツ」
この記事で指摘があった「ALT」と加えて「TITLE」関連の話をしたいと思います。
ただし、完璧だとは思わないでください・・・
記事に書かなかったのもあまり把握できていない事だったからでして・・・
初心者が勉強したばかりのALTとTITLEの話を無謀にも解説してみよう
今回はそんな感じです、出来るだけ間違いのないようにがんばって見ますが
クリティカルな間違いがあったら指摘おねがいします


「ALTってなに?」


これです、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でせっかく入力したメッセージが表示されずに画像名がポップアップされていたんですが


ここで入力したタイトルが「 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ってそもそも「代替テキスト」と呼ばれるもので、本来は回線トラブルなどで画像が表示されなかった時や、動作を軽くするために画像表示を切っている人のための、「画像がなくてもわかるようにするための説明文」なんです


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


画像化してあるサトリブログのタイトル部分はこんな風に表示される
左上に表示されてるのがALTです
画像表示を切っていてもサトリブログだとわかるようになってます
ただの説明文や画像名ではなく画像が表示されなくてもその画像の代わりの役割をするテキストと言う事です、これがALTの本来の役割らしいです。
だから、ALTが空白であったり画像説明以外の言葉が入ってるのは本当はよろしくないらしいんですよ(「alt="" 」でいいじゃん!っていう主張があったり、「クリックで拡大画像」とかでもいいじゃん?っていう解説をしてるサイトもありました)
ゲームブログに画像表示されてないときの事まで考える必要があるのか?
多分ないと思います、ゲームのプレイ日記ブログはプロが作るサイトじゃないですし
ゲーム自体がまず映像ありきで、ゲームが出来るくらいのPCスペックはあるずだしね
FC2ブログ初心者がツールの機能をクリックしながら記事を作るなら
ここまででいいと思います、これ以上は正直よくわかってないしな
それでは話が終わってしまうのでTITLE要素の話をしていきます




「TITLEって何?」


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


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ブログの画像アップローダーから「画像タグのみ」を選択してタグを挿入するとこうなりますが


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="表示させたいメッセージ"を追記することで


どのブラウザでも同じメッセージを表示することが出来ます
「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="画像が表示されなかったとき用の説明"」に書き換えると


画像が表示されなかったときはこんな感じに
どうですか、画像がなくてもなんとなく雰囲気わかった気がしませんか


↑実際に表示させるとこうなります
URLボタンを押したときに出るタイトル入力のボックスは
画像部分に追記したTITLEが優先表示されるので空白でOKです
ちょっとした仕掛けをすることで読者に対して優しいブログ作りが出来たりしそうではありますが、毎回毎回きっちり作る必要はないと思います、ぼくらは完璧なサイト作りを目指してるわけでもないただのゲームブロガーだしね。
ただ「ALTは画像の代わりの役割を果たすテキストで、TITLEはどのブラウザでも表示出来るメッセージ」と覚えておけば、何かの機会に役に立つかなと思います。







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

ゲームブロガー向けの解説にこれが需要があるか激しく疑問ですが
記事を書くに当たってあちこち検索しても小難しいページしか見つからなかったので
こういうページがあってもいいかなーとか思ったりも・・・
なんにせよ、サトリブログ的にはここまでです
これ以上の知識が欲しい方は詳細に解説してくれているサイトが他にあると思いますので探してみてください(笑)


FC2ブログの登録はこちらから!
この記事は参考になりました?
↓よかったら拍手おねがいしまーす
http://satori3502.blog.fc2.com/blog-entry-98.html

誰でもネットで確実に稼げる方法が知りたい方はコチラを見てください。
⇒ http://oyako.biz/net_kasegu/

関連ノウハウ

このノウハウを評価する

評価、コメントするにはサービスに登録してください。

サービス登録をする

コメントを見る

コメントするにはサービスに登録してください。

サービス登録をする

この記事を通報する

ノウハウを書く