新ブログバナー

--.--.--スポンサーサイト

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

2014.04.29【小技】画像に裏の声を入れる方法

需要があるか分かりませんが、ちょっとした小技?をご紹介。
ハンバーガーヘッド

上の画像にカーソルを置くと吹き出しが出ますよね?
この吹き出しを「ツールチップ」と呼び、私も2014年3月28日の記事から入れるようにしています。
IEのバージョンによっては勝手に表示されるのですが、本来はtitle属性を設定しなければ表示はされないものです。
alt属性及びtitle属性についての説明は省くとして(最下部に記述)、その設定方法を簡単に説明してみます。
これを使えるようになれば、どのブラウザでも挿入した画像に面白コメントが入れられますよ。

流れ的には、「画像を挿入」→「alt属性をコピー」→「貼り付けてaltをtitleに直す」の3段階です。


title属性挿入の説明①

まずいつも通り画像をアップロードして、記事に挿入します。
このとき入力したタイトルは、alt属性となります。


次に挿入した際に追加されたタグの中から、alt属性を探します。

title属性挿入の説明②

alt="○○" というのがソレ。
これを直前にある半角スペースも含めて、全てコピー(CTRL+C)します。


title属性挿入の説明③

コピーしたalt属性を貼り付けます。
画像のURLの直後(alt属性の前)にカーソルを移動して貼り付けるか、コピーした状態からカーソルを動かさずにCtrl+Vを2回押して貼り付けます。


title属性挿入の説明④

貼り付けたら「alt」を「title」に打ち直してください。
表示させる文章を変えたい場合は、「title="○○"」の○○を変更してください。


title属性挿入の説明⑤

上図のようになれば完了です。
実際に記事を更新してみて、画像にツールチップが表示されるか確認してください。
画像一つ一つに設定するのは少し手間ですが、面白みは増すのではないでしょうか。
(JSを使えば、画像挿入時に自動で設定できるようになると思いますが、複雑で面倒・・・。)

以上、「画像に裏の声を入れる方法」でした。
皆様のブログ記事にプラスとなることを祈っております。


~~~~~~~~~~

【alt属性】
主にimg要素(画像を表示するタグ)に挿入する代替テキスト。
画像が表示できない環境や音声再生ブラウザのために必須で設定するもの。
画像の内容と一致するテキストでなければならず、SEOに効果あり。

【title属性】
全ての要素に挿入でき、当該要素の補助的な説明を入れるためのもの。
SEOの効果はなく、必須項目ではない。
Secret

TrackBackURL
→http://hasenritte.blog85.fc2.com/tb.php/924-75cd8a90
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。