フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何となくの慣習で記述しているのが現状です。
コピーライトの正しい書き方
コピーライトの記述で必要なものは以下の3つです。
- ©マーク
- 著作物を最初に発行した年
- 著作権者の名前
この３つさえあれば、順番は何でもOKです。
<p><small>© 2010 Felica Co., Ltd</small></p>
場合によっては、「著作物を最初に発行した年」だけで無く、現在の年も合わせて表示したい場合も良くあります。
その際に毎年書き換えるのは面倒なので、Javascriptで習った「Date関数」を使ってみましょう。
<p><small>© 2010-<span id="thisYear"></span>Felica Co., Ltd</small></p>
<script>
date = new Date();
thisYear = date.getFullYear();
document.getElementById("thisYear").innerHTML = thisYear;
</script>
作成
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スムーススクロールとコピーライト</title>
<meta name="viewport" content="width=device-width">
<style>
.container {
height:2000px;
}
footer {
background:#CCCCCC;
}
footer p {
text-align:center;
padding:50px 0;
}
#btn {
width:50px;
height:50px;
background:#333333;
border-radius:50%;
position:fixed;
right:50px;
bottom:50px;
display:none;
}
#btn>a {
display:block;
width:50px;
height:50px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
#btn>a:before {
display:block;
content:"";
width:20px;
height:20px;
border-top:2px solid #FFF;
border-left:2px solid #FFF;
transform:rotate(45deg);
position:absolute;
top:18px;
right:0;
left:0;
margin:auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
$('#btn>a').on('click',function(){
$('html,body').animate({scrollTop:0});
});
$(window).scroll(function(){
if ($(this).scrollTop()>400){
$('#btn').fadeIn();
}else{
$('#btn').fadeOut();
}
});
});
</script>
</head>
<body>
<div class="container"></div>
<p id="btn"><a href="#">トップに戻る</a></p>
<footer>
<p><small>© 2010-<span id="thisYear"></span> Felica Co., Ltd</small></p>
</footer>
<script>
var date = new Date();
var thisYear = date.getFullYear();
document.getElementById('thisYear').innerHTML = thisYear;
</script>
</body>
</html>
