BloggerにjQuery 不要のスクロールアップボタンを超簡単に設置できるピュアCSSコード

おすすめ記事ピックアップ

BloggerはFTP機能が無く、ファイルをアップできないので、独自のファイルを必要とするjQueryの設置の場合は、すごく面倒くさいです。

ロリポップとか有料のサーバーを借りるか、FC2などFTPが付いている無料のサーバを使って、jQueryファイルを設置するなど、しなくては行けません。簡単だけどクソ面倒くさいのです。 

ああ・・ちょっとベージ下部までいったら上部に戻るスクロールアップボタンを設置したいなーと思っても、jQueryファイルを設置が必要となると、もう2秒ぐらいでくじけます。 

そんなとき！実は2秒で、スクロールアップボタンが設置できるピュアCSSコードがあるんです。もうなんというか、単純なアンカーリンクみたいなものなんですけども。これで十分じゃないかと思います。

・この海外サイトを参考にしています。というかそのままコピペで設定でます。
http://techpostpk.blogspot.jp/2013/05/pure-css-scroll-up-button-for-your.html

え。。英語が難しそうだって。大丈夫です。下記で説明します。

まずレイアウトからガジェットの追加を選びます。それで、HTML/JavaScriptを追加しましょう。

先の海外サイトから、下記のソースコードをコピーしましょう。

ペペっと貼り付けましょう。保存しましょう。

ホイイ！スクロールアップボタンが設置されました。簡単ですね。

コードの画像部分を変更すれば、独自のスクロールボタンに変更できます。

画像リンクを変えれば、スクロールボタンもすぐに変わります。

これは簡単でいいですね～。


・この海外サイトを参考にしています。というかそのままコピペで設定でます。
http://techpostpk.blogspot.jp/2013/05/pure-css-scroll-up-button-for-your.html

<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="http://4.bp.blogspot.com/-11KQd74rcvA/UBIaSqLh4PI/AAAAAAAAA_0/VnnW_1-HbI4/s1600/back_to_top_button.png"/></a>

あとこのコードのbottomやright を変更すれば、表示する位置をかえることができます。
hrefのリンク設定をいじれば、移動式のバーナとしても使えますよ。