画像にひとこと (thread) | Questions List | ココログサポート Top

basic infomations

• ご利用中のOSは？:Windows 7
• ご利用中のブラウザーは？:Internet Explorer 11
• ご利用中のプランは？:フリー

<img>タグを使っているということでよろしいでしょうか?
<img>タグにtitle属性を付与すると、設定した文字がマウスオーバー時に表示できます。
具体的には、
<img src="画像ファイル" title="ほにゃらら">
とすると、画像にマウスオーバーすると「ほにゃらら」と表示されます。
ただし、閲覧に利用するブラウザによっては表示されない可能性もありますが。

あたごやまたぬき様

早速の回答ありがとうございます。
なんだか初心者のわたしには難しくて・・・。
ブログ作成時のどの時点で“属性を付与”がわかりません。
初心者でごめんなさい。

こんにちは。

ブラウザで表示される内容は専用の記号が使われています。
その記号を「HTMLタグ」と言います。
（「HTML」について説明すると長くなるので端折りますが）
画像を表示するための「HTMLタグ」は、上であたごやまたぬきさんが書いている<img～>で始まるタグです。
この中にいろいろな設定を入れることで、大きさを指定したり枠線を付けたり…といったことが可能になります。
その設定の一部が、あたごやまたぬきさんが回答されている「title="ほにゃらら"」です。

この「title="ほにゃらら"」の"ほにゃらら"の部分に表示したい文字を入れれば、画像にマウスを載せた時にその文字が表示されるという仕組みです。

では、どうやったらその「title="ほにゃらら"」が入れられるか、ですが、実はココログで画像を挿入すれば自動的に「title属性」が付いたタグが挿入されます。
ただし、この時「title」として付けられるのは、その画像に付けられた（アップロードした時に付いていた）ファイル名です。
例えば、akirinさんのブログの「長財布2個仕上がり♪」というブログ記事に画像が載っていますが、この画像にカーソルを乗せてしばらく（2～3秒）そのままにしてみてください。
すると「2」という数字が表示されてくると思います。
これが、この画像についていたファイル名であり、imgタグの「title」に付けられた名前なのです。

なので、この「2」にあたる部分を表示したい文字に修正すればご希望の処理が出来るというわけです。

以下、titleの修正方法です。
①　記事作成画面で画像を挿入したあと、画面を「HTMLの編集」に切り替える
　　※「カテゴリー」の下に切り替えタブがあります。
②　表示された画面から画像タグを探す
　　※例えば先ほど例に出した「長財布～」の記事の画像タグは
<img width="340" height="135" title="2" alt="2" src="http://cocologakirin.cocolog-nifty.com/blog/images/2016/01/12/2.jpg" border="0" style="margin: auto; width: 340px; height: 135px; display: block;" />
となります。
③　この中から「title」部分を探して、その後ろのタブルコーテーションの中の文字を表示したい文字に変更する
　　※ダブルコーテーションは消さないでください。
　　※ついでにその後ろの「alt」も同じ文字を入れておいたほうがベターです。
④　終了したら画面を「記事の作成」に戻す
⑤　画像の上にカーソルを置いてみて、変更した文字が表示されればOK

以上です。
あとは普通通りに記事を完成させて保存してください。

なお、title属性に自動的に挿入されるのは「半角英数」で付けたファイル名だけとなります。
初めから表示したい名前（日本語）を付けて画像をアップするという方法は使えませんので悪しからず。
（日本語のファイル名の画像もアップロードは出来ますが、titleには自動的に「Photo」という単語が入ってしまうようです）

あと、タグを書き換える際に必要な部分を誤って削ってしまったりすると、それが原因で表示（デザイン、レイアウト）が崩れたりする場合がありますのでこの点にもご注意ください。

以上、ご参考まで。
※長文失礼しました。

no-name.さま

初心者のわたしですが、上記の回答を読んでいますと成功すると思えました。
まだ試してはいませんが、とても丁寧にくわしく解説をいただいたことを
うれしく思いました。
やってみますね♪

no-name.さま
追伸
先程教えていただいた通り文字を入れてみました。
そして念願通り文字が確認できました。
ありがとうございました。

あたごやまたぬき様、no-name.様
迅速な回答をいただきありがとうございました。
おかげさまで超初心者ではありますが、解決したことに
お礼を申し上げます。
ありがとうございました。