INTEREST

---

■スクロールすると表示されるボタンの設置方法

1. 1.HTMLの記述
2. 2.CSSの記述
3. 3.JavaScriptの記述

---

1.HTMLの記述

スクロールするとページトップへ戻るボタンと、ホームへのボタンはどのページでも表示されて、記事ページ以外では「次のページ」へ進むボタンと「前のページ」に戻るボタンを表示。記事ページでは「次の記事」に進むボタンと「前の記事」に戻るボタンを表示する為に、以下のソース（４行目～37行目）をテンプレートのHTML編集でコンテンツの一番最後（</div><!-- /container -->）の上に記述しました。

<div id="container"><!-- container -->


<ul id="fixed-btn">

<li>&nbsp;
<a href="<%url>" title="ホームへ">
<div class="btns"><i class="fa fa-home"></i></div></a>
</li>

<li>&nbsp;
<!--not_permanent_area--><!--prevpage-->
<a href="<%prevpage_url>" title="前のページへ">
<div class="btns"><i class="fa fa-arrow-left"></i></div></a>
<!--/prevpage--><!--/not_permanent_area-->
<!--permanent_area--><!--nextentry-->
<a href="<%nextentry_url>" title="前の記事へ：「<%nextentry_title>」">
<div class="btns"><i class="fa fa-arrow-left"></i></div></a>
<!--/nextentry--><!--/permanent_area-->
</li>

<li>&nbsp;
<!--not_permanent_area--><!--nextpage-->
<a href="<%nextpage_url>" title="次のページへ">
<div class="btns"><i class="fa fa-arrow-right"></i></div></a>
<!--/nextpage--><!--/not_permanent_area-->
<!--permanent_area--><!--preventry-->
<a href="<%preventry_url>" title="次の記事へ：「<%preventry_title>」">
<div class="btns"><i class="fa fa-arrow-right"></i></div></a>
<!--/preventry--><!--/permanent_area-->
</li>

<li>&nbsp;
<a href="#" title="このページのトップへ">
<div class="btns"><i class="fa fa-arrow-up"></i></div></a>
</li>
</ul>

</div><!-- /container -->

※アイコン部分は「　 ＝ <i class="fa fa-home"></i>」「　 ＝ <i class="fa fa-arrow-left"></i>」
「　 ＝ <i class="fa fa-arrow-right"></i>」「　 ＝ <i class="fa fa-arrow-up"></i>」で、これは画像では無く、アイコン型Webフォントの「Font Awesome 　」を利用してます。

※「<!--not_permanent_area--> ～ <!--/not_permanent_area-->」の間に記述した内容は、
記事ページ（blog-entry-○○.html）以外で表示されます。
また、「<!--permanent_area--> ～ <!--/permanent_area-->」の間に記述した内容は、
記事ページ（blog-entry-○○.html）で表示されます。（この変数で表示するボタンを切り替えてる）

---

2.CSSの記述

次にCSSの記述を「テンプレートの設定」から、スタイルシート編集内に以下のように記述

※他のブログ等では、ウインドウ幅に合わせて画面右下に表示してるパターンが多いようですが、このブログではコンテンツの幅に合わせてボタンを表示してます。
他のブログ等のように画面右下に表示する方が良いのかも？だけど... 一番下までスクロールした時にボタンがフッター部分に綺麗に収まる感じが気に入ってしまって... 　　変なとこでこだわったｗ

#fixed-btn{ position: fixed; margin:0 0 13px 700px; left:auto; width:248px; }

#fixed-btn li{ float:left; width:62px; }

#fixed-btn li .btns {
float:right;
color:#fff;
text-align:center;
margin-left:5px;
border : 1px solid #333;
border-radius: 8px;
font-size:38px;
width:50px;
height:42px;
line-height:45px;
-webkit-transition: 0.3s;
transition: 0.3s;
box-shadow: 2px 2px 2px 0px #555;
background: rgb(238,238,238);
background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(153,153,153,1) 2%, rgba(85,85,85,1) 45%, rgba(51,51,51,1) 50%, rgba(85,85,85,1) 98%, rgba(119,119,119,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(2%,rgba(153,153,153,1)), color-stop(45%,rgba(85,85,85,1)), color-stop(50%,rgba(51,51,51,1)), color-stop(98%,rgba(85,85,85,1)), color-stop(100%,rgba(119,119,119,1)));
background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%);
background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%);
background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%);
background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(153,153,153,1) 2%,rgba(85,85,85,1) 45%,rgba(51,51,51,1) 50%,rgba(85,85,85,1) 98%,rgba(119,119,119,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#777777',GradientType=0 );
}

#fixed-btn li .btns:hover {
color:#333;
box-shadow: 0px 0px 0px 0px #555;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(208,208,208,1) 2%, rgba(153,153,153,1) 45%, rgba(119,119,119,1) 50%, rgba(153,153,153,1) 98%, rgba(187,187,187,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(2%,rgba(208,208,208,1)), color-stop(45%,rgba(153,153,153,1)), color-stop(50%,rgba(119,119,119,1)), color-stop(98%,rgba(153,153,153,1)), color-stop(100%,rgba(187,187,187,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(208,208,208,1) 2%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(153,153,153,1) 98%,rgba(187,187,187,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(208,208,208,1) 2%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(153,153,153,1) 98%,rgba(187,187,187,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(208,208,208,1) 2%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(153,153,153,1) 98%,rgba(187,187,187,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(208,208,208,1) 2%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(153,153,153,1) 98%,rgba(187,187,187,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bbbbbb',GradientType=0 );
}

※ボタン背景色のグラデーションは「Ultimate CSS Gradient Generator 」を利用しました。

※ウインドウ幅に合わせて画面右下にボタンを表示する場合は1行目の記述を以下のようにすればOK
「 #fixed-btn{ position:fixed; right: 20px; bottom: 20px; } 」
画面右下に表示する場合はボタンを縦に並べた方が良いと思います。

---

3.JavaScriptの記述

最後に下記、JavaScriptのソースをhead要素内（<head> ～ </head>の間）に記述、もしくはJavaScriptの外部ファイルに書き加えます。（○○○.jsファイル）
※このブログではJavaScriptを出来るだけまとめるようにしてるので、外部ファイルに書き足しました。

<script>
$(function() {
    var showFlag = false;
    var topBtn = $('#fixed-btn');   
    topBtn.css('bottom', '-100px');
    var showFlag = false;
    //スクロールが950に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 950) {
            if (showFlag == false) {
                showFlag = true;
                topBtn.stop().animate({'bottom' : '20px'}, 500);
            }
        } else {
            if (showFlag) {
                showFlag = false;
                topBtn.stop().animate({'bottom' : '-100px'}, 500);
            }
        }
    });
});
</script>

※外部ファイルに書き足す場合は「<script>」と「</script>」は必要ありません。
※JavaScriptのソースは下記のブログの物を元に、数字部分を変更させて頂きました。
「jQueryでスクロールすると表示する系いろいろ / webOpixel 」