コピーライト（フッター）

★　コピーライト（フッター）

●　下記記事の応用です（フッターをつけてみる）

http://ameblo.jp/new-blue-777/entry-11296012133.html


●　コピーライトについては下記に詳しく載っています。

http://copyrights.livedoor.biz/



◆　私のブログの場合、下記を表示しています。
（Liana.　はルーム（プロフィール）にリンクさせています）
（ 2011年からブログを書き始めて、現在　2012年更新しています）

Copyright © 2011-2012 Liana. All Rights Reserved.



■　やり方。


①　フリープラグインへ追記する。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('body').append('<div id="footer">Copyright © 2011-2012 <a href="http://profile.ameba.jp/new-blue-777">Liana.</a> All Rights Reserved.</div>');
});
</script>

・　下記はフリープラグインの最初に１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>



②　下記をCSSへ追記する

/* ------------------------------------------------- */
/* Copyright © 2011-2012 name. All Rights Reserved.　*/
/* ------------------------------------------------- */
#footer{
z-index:100;
width:100%;
height:40px;
background-color:#132435;
color:#ffffff;
text-align:center;
font-size:14px;
padding-top:20px;
background: -moz-linear-gradient(left top, #444444,
#559955 30%,
#778877 50%,
#887788 70%,
#996699);/* Firefox用 グラデーション */
background: -webkit-gradient(linear, left top, right bottom, from(#444444),
color-stop(0.3, #559955),
color-stop(0.5, #778877),
color-stop(0.7, #887788),
to(#996699));/* Safari,Google Chrome用 グラデーション*/
}

◆　追記

●　スクロールされて、そのスクロール値が指定したスクロール値を超えた場合に
　　フッターを表示させる。


①　フリープラグインに下記を追記する。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').append('<div id="footer">Copyright © 2011-2012 <a href="http://profile.ameba.jp/new-blue-777">Liana.</a> All Rights Reserved.</div>');
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$("#footer").stop().animate({"bottom": "0px"}, "slow", "swing");
} else {
$("#footer").stop().animate({"bottom": "-60px"}, "slow", "swing");
}
});});
</script>


■　説明

・　300 はフッターが表示させるスクロール上限値。 300を超えたらフッターを表示。
（この値は変えられます。範囲指定などもできます。逆に300　を超えたら、
フッターを表示しないなども可能）

・　swingは、easingの動きです。
http://semooh.jp/jquery/cont/doc/easing/

http://stat100.ameba.jp/blog/js/apm001.js　のスクリプトは
jQuery JavaScript Library v1.3.2　のバーションなので、
使えるのは、linear と　swing　のみです。



②　下記をCSSへ追記する。（黄色い部分が上記との違い）

/* ------------------------------------------------- */
/* Copyright © 2011-2012 name. All Rights Reserved.　*/
/* ------------------------------------------------- */
#footer{
position:fixed;
bottom:-60px;
left:0px;
z-index:100;
width:100%;
height:40px;
background-color:#132435;
color:#ffffff;
text-align:center;
font-size:14px;
padding-top:20px;
background: -moz-linear-gradient(left top, #444444,
#559955 30%,
#778877 50%,
#887788 70%,
#996699);/* Firefox用 グラデーション */
background: -webkit-gradient(linear, left top, right bottom, from(#444444),
color-stop(0.3, #559955),
color-stop(0.5, #778877),
color-stop(0.7, #887788),
to(#996699));/* Safari,Google Chrome用 グラデーション*/
}