※↑それぞれのクリックで「みなラボ」へ1票＆「みなラボ」のランキング状況を確認いただけます！
こんにちは！や～べ～です。
今回は、コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法、ということで記事を書いていきたいと思います。
色んなサイトで良く見かける、「ページトップへ戻るボタン」、どうにか自分のサイトにも導入したい！という事で、調べて創ってみました！
まずは、どんな出来栄えなのかご覧ください！
↓こんな感じです。
少しスクロールすると、画面下側左右に「ページトップへ戻るボタン」が表示されます。
このボタンを押すと、ページを遡るようにトップまで戻ってくれます。
では、内容に入っていきます！
※WordPress Twenty Fourteenテーマでの実施内容になります。
スポンサーリンク
コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法
スクロールしたら表示される動きと、ページトップまで戻る動きは、実は「jQuery」というスクリプトを使って実現しています。
ですので、まずはその「jQuery」の適用方法から説明していきます。
「jQuery」の適用方法としては、ダウンロードして自サーバーに設置し、そこから読み込む方法と、Googleなどのサーバーに設置してあるファイルを読み込む方法があります。
今回は、後者の「Googleなどのサーバーに設置してあるファイルを読み込む方法」でコードを書きますので、ここでの準備は特に必要ありません。
自サーバー用のコードもコメントアウトして書いておきますので、参考にしていただければと思います。
↓jQueryの適用方法について詳しく書かれたサイトがあります。自サーバーに設置する場合に参考にしてください。
初歩的なjQueryプラグインの設置方法
http://web-pc.net/jquery001
↓自サーバーに設置される場合は、バージョンにも注意が必要です。
（みなラボは1.x 系を選びました！）
jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など
http://web-pc.net/jquery012
スポンサーリンク
HTMLコード
jQueryの準備ができたら、コードを書いていきましょう！
っとその前に、
編集の前に！
テーマの編集をする前には、必ずバックアップをとっておきましょう！
簡単なバックアップの取り方は↓の記事を参考にして下さい。
簡単！BackWPupでWordPressをバックアップする方法
https://share-lab.net/backwpup1
併せて、簡易的なサイトの復旧方法↓も参考にしてみて下さい。
WordPressバックアップを使ってサイトを復旧する方法
https://share-lab.net/wp-restoration1
（特に、function.phpを編集する時は注意して下さい。編集を失敗すると、画面が真っ白になってブラウザからアクセス出来なくなります。その時は、FTPソフトで復旧します。↑の記事に復旧方法を解説しています。）
では、内容の続きです。
下のコードをfooter.phpの＜/body＞のすぐ上にコピペしましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!-- 「ページトップヘ戻るボタン」ここから --> <a href="#top" class="page_top">▲</a> <a href="#top" class="page_top_2">▲</a> <!-- JQUERYをグーグルから読み込む場合--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- JQUERYを自サーバーへアップロードしたファイルから読み込む場合--> <!-- <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>--> <script type="text/javascript"> $(function() { var pageTop = $('.page_top'); pageTop.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 600) { pageTop.fadeIn(); } else { pageTop.fadeOut(); } }); pageTop.click(function () { $('body, html').animate({scrollTop:0}, 500, 'swing'); return false; }); }); $(function() { var pageTop2 = $('.page_top_2'); pageTop2.hide(); $(window).scroll(function () { if ($(this).scrollTop() > 600) { pageTop2.fadeIn(); } else { pageTop2.fadeOut(); } }); pageTop2.click(function () { $('body, html').animate({scrollTop:0}, 500, 'swing'); return false; }); }); </script> <!-- 「ページトップヘ戻るボタン」ここまで --> |
スポンサーリンク
CSSコード
続いて、CSSの編集です。
style.cssに下のコードをコピペして下さい。
style.cssの下の方に、「Media Queries」とありますので、その直前あたりに記入して下さい。
Media Queriesの設定の無いテーマの場合は、文末で問題ないです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/* 「ページトップヘ戻るボタン右」ここから */ .page_top { position:fixed; bottom:10px; right:10px; width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color:#fff; font-size:20px; text-decoration:none; background-color: rgba( 36, 137, 13, 0.55 ); border: 3px solid #ffffff; text-align: center; line-height: 50px; z-index:9997; } /* 「ページトップヘ戻るボタン右」ここまで */ /* 「ページトップヘ戻るボタン左」ここから */ .page_top_2 { position:fixed; bottom:10px; left:10px; width: 50px; height: 50px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; color:#fff; font-size:20px; text-decoration:none; background-color: rgba( 36, 137, 13, 0.55 ); border: 3px solid #ffffff; text-align: center; line-height: 50px; z-index:9997; } /* 「ページトップヘ戻るボタン左」ここまで */ |
参考にさせていただいたサイト
【WordPress】プラグインを使わずにページのTOPへ戻るリンクを設置してみた。
http://takayakondo.com/page-top-link/
スポンサーリンク
まとめ
コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法、ということで記事を書かせていただきましたが、いかがでしたでしょうか？
色んなサイトで良く見かける、「ページトップへ戻るボタン」コピペで簡単に設置することができたと思います。
クリック一発でトップページまで戻れ、サイトの使い勝手も向上すると思いますので、まだ設置されてない方はぜひ設置してみてくださいねっ！
CSSを編集すれば、さらに自分のオリジナル色も出せるので、色々と編集してみると良いと思います！
じゃあ、今回はここまでっ！！
ではではっ！(´∀｀*)ﾉｼ
おすすめのオンラインスクール
『TECH ACADEMY オンラインブートキャンプ』
TECH ACADEMY オンラインブートキャンプとは、
Webアプリケーションスキル（Ruby on Rails）、PHP、WordPressなどのWeb開発周辺スキル習得のコースを中心に、iPhoneアプリ、Androidアプリ、Unityなどのオリジナルアプリ開発コースや、WebデザインやWebマネジメント、さらにはWindows Excelのスキルを習得できるコースもラインナップされている、プログラミングをこれから始めてみようと思っている方から、エンジニアを目指している方までの幅広い方々にとって非常に心強い『プログラミング系オンラインスクール』です。
WordPressを使って自分のオリジナルWebサイトを構築しようとする場合、何かしらのプログラミング言語の基礎が分かっていれば、インターネットで検索した情報をフルに活用すれば、独学でもサイトを構築することは可能だと思います。
自分もこのタイプで、独学でサイトのカスタマイズを行っているのですが、現在のサイトのカタチに持っていくまでに、非常に多くの時間が掛かってしまっています。
もっと早い段階で、この『TECH ACADEMY オンラインブートキャンプ』を知っていて、受講するだけの予算が確保できていたのなら、短時間でかなりレベルの高いのスキルを習得できていたのではないかと思います。
っと、ちょっと気になるなぁと思ったそこのあなた！！
もっと詳しく内容を知りたいと思ったら、、、
↑『TECH ACADEMY』公式サイト上部のメニューバーに表示されている、『無料説明会』から無料説明会動画を見ることが出来ますよぉ！＾＾
受講希望のコースを選択し、
メールアドレス（GmailでもOK!＾＾）かSNSアカウントを入力すると、希望コースの無料説明会動画を見ることができます。
受講申し込みを検討する際に気になる、「受講終了時点の成果目標」「習得できるスキル」「具体的な学習方法」などの解説と、短期間で高い学習目標に到達することが可能となる裏付けについて、丁寧に説明されています。
『無料説明会』のページには、カリキュラムの詳細も紹介されています。
その他『説明会動画特典』として、受講料が割引になる特典も準備されてるようですよ♪＾＾
気になるんだけど、少し試してみないと分からないよなぁ～なんて思ってるあなたには、、、
『一週間のブートキャンプ無料体験』もありますよっ♪
ぜひ体験してみて下さいね♪(*^▽^*)
おすすめのレンタルサーバー
『XSERVER』
みなラボもこの『XSERVER』を使っています！＾＾
プランによっては最安月額900円（税別）で、200GBのサーバー容量を確保できます！
継続更新は、クレジット引き落としで自動更新出来て楽チン！
サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心！
サーバーをコントロールするの為のインタフェースとなる「サ－バーパネル」の操作性も抜群！
もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪
ランキング
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！
にほんブログ村
↓こちらもお願いしますっ！
人気ブログランキングへ
・【毎月約4千円節約できる】簡単にデュアルSIM(DSDS)スマホでドコモSIMと格安SIMを両方同時に使う方法
・失敗しないクリスマスツリーの選び方と我が家の手作り感満載クリスマスツリーデコレーションの話
・嫁の遺伝子検査結果をコソッと紹介（笑）GeneLife（ジーンライフ）の肥満遺伝子検査DIET（ダイエット）を試してみた結果。。。
・これで迷わない！お取り寄せした冷凍タラバ・ズワイ蟹をおいしく食べるための、かに解凍方法・調理方法と、口コミで人気のカニ通販サイトまとめ
・大掃除をもっと便利に簡単に！ケルヒャーおすすめラインナップ厳選3選まとめ～性能比較・使い方
・掃除をもっと手軽に！簡単に！大掃除にも使える掃除の裏技・コツ28選まとめ
スポンサーリンク
こちらの記事もよく読まれています。↓（※広告含む）
最後までお読みいただいて、ありがとうございます。
もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです！どうぞ、よろしくお願いいたします！m(_ _)m
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterで『みなラボ』をフォローしよう！
Follow @share_labFeedly、RSS、Push7はこちら！！
Line@はこちら！！