スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/29-b75ece94

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

スクロールすると表示されるボタン スクロールするとページトップへのボタンや前後のページ、ホームに移動するボタンが出るようにしてみた

最初はページトップに戻るボタンのみ設置したが、どうせならホームへのボタンや、前後のページもしくは、前後の記事に移動するボタンもセットにした方が便利かと考え、状況に合わせて最大で4つのボタンが表示される仕様に変更。
そして、前後のページと前後の記事へのボタンは、下記のようにFC2ブログの変数を使い表示されるボタンが切り替わるようにしてみた。



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


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



1.HTMLの記述


スクロールするとページトップへ戻るボタンと、ホームへのボタンはどのページでも表示されて、記事ページ以外では「次のページ」へ進むボタンと「前のページ」に戻るボタンを表示。記事ページでは「次の記事」に進むボタンと「前の記事」に戻るボタンを表示する為に、以下のソース(4行目~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の記述を「テンプレートの設定」から、スタイルシート編集内に以下のように記述

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


#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
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-29 | JavaScript | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/29-b75ece94

「スクロールすると表示されるボタンの設置」へのトラックバック

- TrackBack -


「スクロールすると表示されるボタンの設置」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。