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