ウェブサイトから画像を引用する場合、当然ながら引用元情報の明示が必須である。また、たとえば画像から Google Map へリンクを張っている場合、。イメージ加工ソフトで画像自体に書き込んでもよいが、画像が多い場合は面倒だ。 表示例では、CSS だけで下部左右の文字を表示させている。ソースコードは以下のとおり。 CSS .copy-photo:after, .copy-photo a:before { position: absolute; display: inline-block; bottom: 12px; right : 8px; font-size: 12px; color: #fff; opacity: .85; } .copy-photo a:before { left: 10px; } HTML <style type="text/css"> .copy:after { content: "Source: XXXXX"; opacity: .85; } .copy a:before { content: "Click to show YYYYY."; opacity: .75; } </style> <p class="copy-photo copy"><a href=""><img src="../images/html-css-large.png" alt="" /></a></p> • 複数の属性がある場合は、たとえば ".copy1"、".copy2"・・・ のように追加してそれぞれ定義する。画像の色味や明るさに応じてテキストの透明度やカラーを変えればよい。 • ".copy-photo a:before" で "a" を入れているのがミソ。リンクがなければ当然ながら表示する必要はない。これによって、スライドショーでリンク画像のみ左側の文字列を表示させるということもできる。 • 左側の文字列を表示させ、かつ画像をクリックしても何も起こらないようにするには、<a href=""></a> を <a></a> とするだけでよい。画像の情報などを表示するのに使える。
左右の文字列を改行するには、次のように記述する。¥A の右に半角スペースを入れること。 .copy a:before { content: "ABCDEFG¥A Click to do nothing.; " white-space: pre-wrap !important; }