● 下記記事の応用です(フッターをつけてみる)
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>
<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>
・ 下記はフリープラグインの最初に1つあれば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用 グラデーション*/
}
/* 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用 グラデーション*/
}
/* 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用 グラデーション*/
}