※↑それぞれのクリックで「みなラボ」へ1票＆「みなラボ」のランキング状況を確認いただけます！
こんにちは！や～べ～です。
今回は、コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法、ということで記事を書いていきたいと思います。
色んなサイトで良く見かける、「ページトップへ戻るボタン」、どうにか自分のサイトにも導入したい！という事で、調べて創ってみました！
まずは、どんな出来栄えなのかご覧ください！
↓こんな感じです。
少しスクロールすると、画面下側左右に「ページトップへ戻るボタン」が表示されます。
このボタンを押すと、ページを遡るようにトップまで戻ってくれます。
では、内容に入っていきます！
※WordPress Twenty Fourteenテーマでの実施内容になります。
スポンサーリンク
コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法
スクロールしたら表示される動きと、ページトップまで戻る動きは、実は「jQuery」というスクリプトを使って実現しています。
ですので、まずはその「jQuery」の適用方法から説明していきます。
「jQuery」の適用方法としては、ダウンロードして自サーバーに設置し、そこから読み込む方法と、Googleなどのサーバーに設置してあるファイルを読み込む方法があります。
今回は、後者の「Googleなどのサーバーに設置してあるファイルを読み込む方法」でコードを書きますので、ここでの準備は特に必要ありません。
自サーバー用のコードもコメントアウトして書いておきますので、参考にしていただければと思います。
↓jQueryの適用方法について詳しく書かれたサイトがあります。自サーバーに設置する場合に参考にしてください。
↓自サーバーに設置される場合は、バージョンにも注意が必要です。
（みなラボは1.x 系を選びました！）
jQueryプラグインの設置方法
https://blog.raizzenet.com/installation-of-jquery-plug-ins/
初歩的なjQueryプラグインの設置方法
http://web-pc.net/jquery001
スポンサーリンク
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へ戻るリンクを設置してみた。
https://takayakondo.com/page-top-link/
スポンサーリンク
まとめ
コピペでＯＫ！スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法、ということで記事を書かせていただきましたが、いかがでしたでしょうか？
色んなサイトで良く見かける、「ページトップへ戻るボタン」コピペで簡単に設置することができたと思います。
クリック一発でトップページまで戻れ、サイトの使い勝手も向上すると思いますので、まだ設置されてない方はぜひ設置してみてくださいねっ！
CSSを編集すれば、さらに自分のオリジナル色も出せるので、色々と編集してみると良いと思います！
じゃあ、今回はここまでっ！！
ではではっ！(´∀｀*)ﾉｼ
おすすめのレンタルサーバー
『XSERVER』
みなラボもこの『XSERVER』を使っています！＾＾
プランによっては最安月額900円（税別）で、200GBのサーバー容量を確保できます！
継続更新は、クレジット引き落としで自動更新出来て楽チン！
サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心！
サーバーをコントロールするの為のインタフェースとなる「サ－バーパネル」の操作性も抜群！
サーバーデータの復元も、過去7日以内ならば、「サ－バーパネル」から簡単に操作可能！
もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪
ランキング
↓ランキング参加してます！よろしければ、クリックで応援して下さいっ！
にほんブログ村
↓こちらもお願いしますっ！
人気ブログランキングへ
①どんなブログにするのか考える。
⇒さあ始めよう！なせば成る「0から始めるwordpressサイトづくり」
②レンタルサーバーを借りる。
③ドメインを取得する。
④ネームサーバーDNS設定をする。
⇒ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法
⑤WordPressをインストールする。
⇒エックスサーバーへワードプレスを簡単にインストールする方法
⑥テーマをインストールする。
⇒僕が「AFFINGER5」を激推しする「3つの理由」
⇒【かんたん解説】AFFINGER5（アフィンガー5）テーマを購入する方法＆手順
⇒「AFFINGER5」をWordPressへインストールする手順
⑦アイコン、ヘッダーなどを作る。
⇒フリーソフトのみでアイコン作成する方法まとめ
⇒WPサイト用オリジナルヘッダーデザイン作ってみた
⑧お好みにサイトデザインする。
⑨サーチコンソール、アナリティクスへ登録する。
⑩アドセンスや各アフィリエイトへ登録する。
⑪記事を書く。
⑫試行錯誤しながら、ブログ運営を続けていけば、徐々に収益を上げることができると思います！(＞∀＜)ﾉ☆
・子供が喜ぶ！ラズパイの面白い使い方まとめ6選～インパクト大の手作りクリスマスツリー・装飾・飾り付け・小物などを実現させるおしゃれな海外事例～
・僕が「AFFINGER5」を激推しする「3つの理由」～WordPressブログ収益化への近道のために～
・たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
・Androidスマホで楽天モバイルの申し込みができない時の解決方法
・急げ！【300万名限定】楽天モバイルが月額料金プラン『1年間無料』キャンペーン実施中！
・『2021年更新版』Windows10も可！ Movie Maker「ムービーメーカー」をダウンロードする方法
・嫁の遺伝子検査結果をコソッと紹介（笑）GeneLife（ジーンライフ）の肥満遺伝子検査DIET（ダイエット）を試してみた結果。。。
・【2021年版】メルカリ匿名配送「らくらくメルカリ便」「ゆうゆうメルカリ便」の使い方、送料・サイズ・重量一覧＆出品手数料について
スポンサーリンク
こちらの記事もよく読まれています。↓（※広告含む）
最後までお読みいただいて、ありがとうございます。
もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです！どうぞ、よろしくお願いいたします！m(_ _)m
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterで『みなラボ』をフォローしよう！
Follow @share_labFeedly、RSS、Push7はこちら！！
Line@はこちら！！