page-ue-top2

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

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ

↑みなラボのページに「いいね!」はコチラから↑(>∀<)ノ☆ 


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

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

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

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

↓こんな感じです。

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

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

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

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

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

 

スポンサーリンク

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

スクロールしたら表示される動きと、ページトップまで戻る動きは、実は「jQuery」というスクリプトを使って実現しています。

 
ですので、まずはその「jQuery」の適用方法から説明していきます。

 
「jQuery」の適用方法としては、ダウンロードして自サーバーに設置し、そこから読み込む方法と、Googleなどのサーバーに設置してあるファイルを読み込む方法があります。

今回は、後者の「Googleなどのサーバーに設置してあるファイルを読み込む方法」でコードを書きますので、ここでの準備は特に必要ありません。

自サーバー用のコードもコメントアウトして書いておきますので、参考にしていただければと思います。

 
↓jQueryの適用方法について詳しく書かれたサイトがあります。自サーバーに設置する場合に参考にしてください。

初歩的なjQueryプラグインの設置方法
http://web-pc.net/jquery001

wpc-shoho

 
↓自サーバーに設置される場合は、バージョンにも注意が必要です。
(みなラボは1.x 系を選びました!)

jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など
http://web-pc.net/jquery012

wpc-chigai

 

スポンサーリンク

HTMLコード

jQueryの準備ができたら、コードを書いていきましょう!

っとその前に、

 

編集の前に!

テーマの編集をする前には、必ずバックアップをとっておきましょう!

簡単なバックアップの取り方は↓の記事を参考にして下さい。

簡単!BackWPupでWordPressをバックアップする方法
http://share-lab.net/backwpup1

 
併せて、簡易的なサイトの復旧方法↓も参考にしてみて下さい。

WordPressバックアップを使ってサイトを復旧する方法
http://share-lab.net/wp-restoration1

(特に、function.phpを編集する時は注意して下さい。編集を失敗すると、画面が真っ白になってブラウザからアクセス出来なくなります。その時は、FTPソフトで復旧します。↑の記事に復旧方法を解説しています。)

 
では、内容の続きです。

下のコードをfooter.phpの</body>のすぐ上にコピペしましょう!

 

 

スポンサーリンク

CSSコード

続いて、CSSの編集です。

style.cssに下のコードをコピペして下さい。

style.cssの下の方に、「Media Queries」とありますので、その直前あたりに記入して下さい。

Media Queriesの設定の無いテーマの場合は、文末で問題ないです。

 

 
参考にさせていただいたサイト

 
【WordPress】プラグインを使わずにページのTOPへ戻るリンクを設置してみた。
http://takayakondo.com/page-top-link/

office-kondo1

 

まとめ

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

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

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

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

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

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

 

オススメのレンタルサーバー

 
『XSERVER』

みなラボもこの『XSERVER』を使っています!^^
プランによっては最安月額900円(税別)で、200GBのサーバー容量を確保できます!

継続更新は、クレジット引き落としで自動更新出来て楽チン!

サーバーデータは、7世代に遡ってバックアップしてくれているので、もしもの時にも安心!

サーバーをコントロールするの為のインタフェースとなる「サ-バーパネル」の操作性も抜群!

もちろん、サーバーとしての基本となる処理速度、安定性も申し分ないと思います♪



 

ランキング

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

にほんブログ村

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

人気ブログランキングへ
 

 

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

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

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

最新情報をお届けします

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

Feedly、RSSはこちら!!

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です