WordPress

コピペでOK!スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法

★累計PV数:2,780views アクセス頂いてありがとうございます! (*ᴗˬᴗ)⁾⁾ 
 
 
いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ
▼「みなラボ」は「ブログランキング」と「ブログ村」の2つのランキングに参加しています!クリックで応援していただけると、もの凄く励みになります!↓(∩´∀`)∩ ※右クリック(または、長押し)「新しいタブで開く」が非常に便利です♪
 

 
ブログランキング・にほんブログ村へ

※↑それぞれクリックで「みなラボ」へ1票応援&「みなラボ」のランキング状況をご確認いただけます! 


こんにちは!や~べ~です。

 
今回は、コピペでOK!スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法、ということで記事を書いていきたいと思います。

色んなサイトで良く見かける、「ページトップへ戻るボタン」、どうにか自分のサイトにも導入したい!という事で、調べて創ってみました!

 
まずは、どんな出来栄えなのかご覧ください!

↓こんな感じです。

こんな感じに設置できました!

 
少しスクロールすると、画面下側左右に「ページトップへ戻るボタン」が表示されます。

このボタンを押すと、ページを遡るようにトップまで戻ってくれます。

 
では、内容に入っていきます!

※WordPress Twenty Fourteenテーマでの実施内容になります。

 

コピペでOK!スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法

スクロールしたら表示される動きと、ページトップまで戻る動きは、実は「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>のすぐ上にコピペしましょう!

 

<!--  「ページトップヘ戻るボタン」ここから  -->

<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の設定の無いテーマの場合は、文末で問題ないです。

 

/* 「ページトップヘ戻るボタン右」ここから */

.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/

office-kondo1

 

まとめ

コピペでOK!スクロールすると浮き上がってくる「ページトップへ戻るボタン」設置方法、ということで記事を書かせていただきましたが、いかがでしたでしょうか?

色んなサイトで良く見かける、「ページトップへ戻るボタン」コピペで簡単に設置することができたと思います。

 
クリック一発でトップページまで戻れ、サイトの使い勝手も向上すると思いますので、まだ設置されてない方はぜひ設置してみてくださいねっ!

CSSを編集すれば、さらに自分のオリジナル色も出せるので、色々と編集してみると良いと思います!

 
じゃあ、今回はここまでっ!!

ではではっ!(´∀`*)ノシ

 

WordPressサーバーならエックスサーバーがおすすめ!

 
『XSERVER』

僕の運営しているサイト、ブログの多くはこの『XSERVER』を使っています!^^

月額最安900円(税別)で200GBのサーバー容量を確保でき、サーバーダウンなどがほぼ皆無で安定稼働されており、サイト表示速度(処理速度)も速く、読み手のストレスを最小限に留めることが期待できると思います!

さらに、サーバー側で自動バックアップを取ってくれていて、7世代に遡って復旧できるので、もしもの時にもかなり安心できると思います!

サーバーの様々な設定で使用する「サーバーパネル」がほぼ日本語で、ヤフーのトップページのような日本的な階層表示になっているので、他のサーバーのものよりも使いやすいのではないかと個人的には思います。
(※他サーバーでは、まんま横文字のみの専門用語的アルファベットのみの項目があって分かり辛かったり、階層のグルーピングがピンと来ないような感じになっていて分かり辛いこともありました。。。)

 

 

ランキング

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!

にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

『WordPressブログの作り方』※初心者必見!(>∀<)ノ☆
 
①どんなブログにするのか考える。
 
 ⇒さあ始めよう!なせば成る「0から始めるwordpressサイトづくり」
 
②レンタルサーバーを借りる。
 
③ドメインを取得する。
 
④ネームサーバーDNS設定をする。
 
 ⇒ムームードメインで取得した独自ドメインをエックスサーバーで使う設定方法
 
⑤WordPressをインストールする。
 
 ⇒エックスサーバーへワードプレスを簡単にインストールする方法
 
⑥テーマをインストールする。
 
 ⇒僕が「AFFINGER5」を激推しする「3つの理由」
 
 ⇒【かんたん解説】AFFINGER5(アフィンガー5)テーマを購入する方法&手順
 
 ⇒「AFFINGER5」をWordPressへインストールする手順
 
⑦アイコン、ヘッダーなどを作る。
 
 ⇒フリーソフトのみでアイコン作成する方法まとめ
 
 ⇒WPサイト用オリジナルヘッダーデザイン作ってみた
 
⑧お好みにサイトデザインする。
 
⑨サーチコンソール、アナリティクスへ登録する。
 
⑩アドセンスや各アフィリエイトへ登録する。
 
⑪記事を書く。
 
⑫試行錯誤しながら、ブログ運営を続けていけば、徐々に収益を上げることができると思います!(>∀<)ノ☆
 
 
こちらの記事もオススメ!(>∀<)ノ☆
 
楽天市場のお買い物でもらえるポイント(ポイントアップ含む)と同時に、さらなる上乗せポイントを確実にゲットできる方法(※現金への換金も可)
 
【エントリー忘れで損してるかも!?】楽天市場お買い物マラソン&楽天市場スーパーセールのお得なポイントアップキャンペーン、クーポン、SPUなど、おすすめエントリー11選一覧まとめ
 
僕が「AFFINGER5」を激推しする「3つの理由」~WordPressブログ収益化への近道のために~
 
たぶん新型コロナウイルスに感染したであろう僕が完治するまでの症状を記録した闘病日記
 
Androidスマホで楽天モバイルの申し込みができない時の解決方法
 
【7/1までに申し込み完了で1回線目は1GBまで無料!(10月末まで)】急げ!楽天モバイルが最大25,000ポイント還元キャンペーン実施中!【祝300万回線達成】
 
『2022年更新版』Windows11も可! Movie Maker「ムービーメーカー」をダウンロードする方法
 
嫁の遺伝子検査結果をコソッと紹介(笑)GeneLife(ジーンライフ)の肥満遺伝子検査DIET(ダイエット)を試してみた結果。。。
 
【2022年版】(6/17更新)メルカリ匿名配送「らくらくメルカリ便」「ゆうゆうメルカリ便」の使い方、送料・サイズ・重量一覧&出品手数料について
 
 

こちらの記事もよく読まれています。↓(※広告含む)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

▼「LINEいいね」ボタンを押して、この記事をタイムラインでシェアして頂けると、非常に喜びます!(∩´∀`)∩
 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

▼「Feedly」、「RSS」、「Push7」での購読はこちらから設定して頂けます!
 
follow us in feedly
 
 
▼「みなラボ公式LINE」の友だち追加はこちらからお願いいたします!
新規記事更新時に「お知らせ」させて頂きます!
 

-WordPress
-, ,

© 2024 みなラボ