木燃人の波止場

花やお寺や観光地の写真を紹介しつつ、皆さんとの交流を計りたく思ってます、気軽に見て戴き、コメントを戴ければ嬉しいです。

HTMLで画像に文字を書く (No 2055)

2019-08-09 08:00:00 | パソコン

 レタッチソフト「ペイント」などを使って、画像に文字を記入することは、極めて簡単であり、レタッチの初歩中の初歩であるかも知れませんが、これを実際には画像には文字などを書かずに、レイヤーのように、表面に文字を載せる事を考えました。

 文字を入れた画像を作る事は簡単ですが、若干の手間と、何よりもその画像には、幾ばくかの容量(バイト)が必要であり、貧乏人にはレンタルサーバーが気になってくるのでありました。 細かく言えば枚数が多いので、画像の管理も別にしなければならず、厄介です。

 それに対し、画像は共通のものを使用し、HTMLで必要な時にのみ画像の上に文字やアイコンなどを表示すれば、数十ないしは数百バイトで済むから、容量は問題無いし、HTMLのコピペで作業が出来るから、速くて作業も極めて簡単なのです。

 

 下記はその実行例です。

 「イースターサボテン」と「イキシア」の各画像の左上には Full sizeの文字がありますが、これは実際に書いたのではなく、そう見せているだけのものです。ですから、元の画像はそのままですから、他でも使えるという、大きなメリットがあるのです。

 

 画像に書く文字の代わりに、画像なども使えます。 また、文字の色や大きさを変える事が出来ますが、これらは全てCSSで指定します。

 

 具体的やり方   (少々専門的になりますが、ご勘弁のほどを!)

1. HTML

 該当画像を<div>でくくります。その中に<p>ダグで書く文字を指定するだけです。
 サンプル:

 <li>・・・・<div class="yyyyy"> 

 <img src="../../xxxxx.jpg"><p>Full size</p></a></div>・・・</li>

2. CSS

 文字の大きさや色を通常の方法で記載します。

 .yyyyy  {   position: relative;   }

 .yyyyy p {  position: absolute;
                    color: white;           
                    font-size:  13px;  
                    top:  0;  
                    left:  0;              }

 .yyyyy   {   width: 185px;   }

 

 問題点

1. 文字の位置を右下にしたいが、これが何故か難しい。 位置は動かせるが、一定の位置に止める事が出来ないでいます。 出来ないはずはないのですがねー!?。ど真ん中なら、簡単に変えられます。

2. 上記はリスト方式(<ul><li>)でありますが、これを表形式(<table>)では文字が表示しないのです。

 

コメント