りんろぐ。

女子でも分かるぷちまにあっく話。

Wordpress テーマカスタマイズ

ブログ記事を下にスクロールすると「ページトップへ戻る」ボタンが出てくるようにしてみました。

2013/04/01

Ready for Take Off
photo credit: vyxle via photopin cc

未だにコーディングとか小難しい事が苦手な凛(@rin_wan)です。

新しいToDoリストアプリを使い始めました。

ふとBlog関連でやりたいと思いつつ保留になってる事を書き出してみて、潰してみるか!と思って少しずつ着手してみました。

今回は長い間やりたかったけど放置していた「ページトップに戻る」ボタンの設置に挑戦してみましたヾ(o´∀`o)ノ

いつもの素人が見よう見まねでやってみよー!のシリーズ続編ですw


「ページトップに戻る」ボタンとは?

他の方のBlogにお邪魔した時、下にスクロールするとすっと右下に出てくるオシャレボタン。

開いているページの上に戻りたくなった時にぽちっと押すと、つるーんっ!と戻る素敵ボタンです(*`・ω・)ゞ

これをりんろぐ。にも設置してみました♪

設置したのはこれ!このボタンです。

スマホからだとPCテーマにしていただくと確認できますv(*´∀`*)v

ちなみにPCテーマとスマホテーマの切り替えはページの一番下で出来ますよ!

PCテーマからモバイルテーマの切り替えがこの画面。

モバイルテーマからPCテーマに切り替えるのはこの画面。

設置までの道のり

まー今回は難しかった!!!!

キーになるのはjQueryという呪文。
この子が簡単で便利らしいのですが素人には恐怖。・゚・(ノ∀`)・゚・。

まずは参考にさせていただいたのはりくまさんの記事。

jQueryの呪文を使うと何やらニュルッとページトップへ戻れるようです。

何度も読み直すとどうやら呪文は3部構成の模様。
1.jQueryの呪文
2.CSSの呪文
3.HTMLの呪文

ここまでは分かったものの、jQueryの呪文は別途準備がいる模様。

うーん。

次にお世話になったのはこちらの記事。

ページトップへスムースにスクロールさせる方法 – WordPressでブログアフィリエイト

何やらjQueryの呪文を使うには「jQueryの呪文発動!!」宣言がいる模様。

とりあえずheadタグの中にこの宣言を書いてみる。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
"></script>

そして記事にあった呪文を全部書いてみるも動かない(´・ω・`)

疲れた。

別のサイトも探してみようって事で出会ったのがこちらの記事。

こちらはりくまさんと同じ部品で出来てるっぽい。(。・Д・)フム

でもやっぱり何をどこに書くのがイマイチ分からない…。

と、ここで出会ったのがこちらの記事。

やっと分かりましたヾ(*´∀`*)ノ

ここまで来て、もう一度りくまさんの記事に戻ると詳しく解説してあって分かりやすい!

私はスクロールの数値が100だと短かったので300ぐらいにしてみることにしました。

設置方法

これまでの記事を踏まえると…とりあえず設置するにはこれでイケます!

1.jQueryの呪文 → headタグ内に宣言&スクリプトを書けばOK!
2.CSSの呪文 → ページトップへ戻る用を作る必要あり!
3.HTMLの呪文 → Body最後にちょろっと書けばOK!

皆様の記事を参考に書いたコードはこちら。

jQueryのコード

ベテランさんになると別コードに書いて呼び出すとかあるらしいのですが、今回はここまでが限界でしたw

このコードをheadと/headの間に貼り付ける。

私のテーマだとheader.phpでした。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
"></script>
<script>
$(function() {
var topBtn = $(‘#page-top’);
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 500);
return false;
});
})
</script>

CSSのコード

一番上の箱は分かりやすくする為なので別に無くてもOKです。

これを反映させたいテーマのCSSファイルに貼り付ける。

/**
|————————
| =page-top
|————————
*/

#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
#page-top a:hover {
text-decoration: none;
background: #999;
}

HTMLのコード

こちらは/bodyの前に書いてあげます。

私の場合はfooter.phpにありました。

「Page Topへ」の部分は好きな言葉に変更OKです。

<p id="page-top"><a href="#wrap">Page Topへ</a></p>

まとめ

・jQueryに挑戦してみた!
・下にスクロールするとボタンちゃんと出た!!
・これで戻りやすくなったー!!

素人の私でも何とか設置できたーヾ(o´∀`o)ノ

嬉しくて何度もボタン押してページトップにつるーん!と戻ってる凛(@rin_wan)ですw

同じような悩みを抱える方の参考になればこれ幸い♪

次の記事もお楽しみに~(*`・ω・)ゞ

スポンサードリンク

スポンサードリンク

CATEGORIES & TAGS

Wordpress, テーマカスタマイズ,

Author:

iPhoneアプリ/語学学習/間取り図/ガジェットが大好きです!手帳と宇宙画像が最近の癒しです。WorkFlowyが好きでスマホから操作ができるアプリHandyFlowyとMemoFlowy絶賛オススメ中♡

スポンサードリンク