ワードプレスのトップへ戻るフェード&スムーススクロールの表示方法

今回はワードプレスのサイトで「トップへ戻る」のボタンを作成していきます。

ユーザーさんがサイトを読み進めていった時、

スムーズにページ上部に移動できることでちょっとしたユーザビリティの向上に

なりますよね！

そして最近では、画面をスクロールすると途中からトップへ戻るボタンが出現し、

トップに戻ったらフェードアウトするフェード&スムーススクロールがおしゃれらしいです。

自分のサイトをかわいくしちゃいましょう(･o･)ゞ

流れ的には以下の通り。

①ワードプレスにトップへ戻るの画像をアップロード

②style.cssにコードを追加

③footer.phpにHTMLとJavaScriptのコードを追加

です。cssって何？JavaScriptって何？って思われるかもしれませんが、

操作はいたって簡単♪

5分ぐらいでできますよ！

①ワードプレスにトップへ戻るの画像をアップロード

今回のトップへ戻るボタンはフェード&スムーススクロールなので

画像は二枚で二色になります。

あーこが使っているトップへ戻るの矢印マークは、

画面をスクロールすると黒色で現れ、クリックすると赤色になります。

なので画像が二枚必要なんですね。

こちらは画像を右クリックして「画像を保存する」でそのまま使えますので、

よかったら使ってください(ﾟ▽ﾟ*)。

では早速ワードプレスに画像をアップロードしましょう！

(1)管理画面→メディア→新規追加をクリック

(2)画像URLをコピーアンドペースト

デスクトップなどに保存してあるトップへ戻るボタン画像をアップロードしてください。

画像がアップロードできたら、トップへ戻るボタンの画像をクリックすると

URLが出てきます。そのURLをコピーアンドペーストしてくださいね。

コピーアンドペーストしたURLはメモ帳かなにかに貼り付けておきましょう。

(3)スタイルCSSを定義

#totop{
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 2000;
}    

#totop a{
    display: block;
    width: 64px;
    height: 64px;
    text-indent: -1000em;
    overflow: hidden;
    background: url(images/totop.png) 0 0 no-repeat;
}

#totop a:hover{
    background-position: 0 -64px;
}

#totop{

position: fixed;

top: 30px;

right: 30px;

z-index: 2000;

}

#totop a{

display: block;

width: 64px;

height: 64px;

text-indent: -1000em;

overflow: hidden;

background: url(images/totop.png) 0 0 no-repeat;

}

#totop a:hover{

background-position: 0 -64px;

}

↑このコードをコピーアンドペーストします。コピーしたら…

テーマの編集→style.cssの一番下にこのコードを貼り付け。

テーマの編集をクリックするとstylecssが出てきます。

stylecssの一番下に、コピーしたコードを貼り付けてください。

次に貼り付けたコードにURLがありますので、カッコの次にワードプレスに

アップロードした画像URLをペーストします。

そしてファイルを更新を押す。

(3)最後の行程ですよ！footer.phpにHTMLとJavaScriptのコードを追加

テーマフッターfooter.phpをクリック。

&lt;div id="totop"&gt;&lt;a href="#header"&gt;ページの先頭へ戻る&lt;/a&gt;&lt;/div&gt;
&lt;script&gt;
jQuery(function() {
    var totop = jQuery('#totop');    
    totop.hide();
    jQuery(window).scroll(function () {
        //スタートスクロール量 1000
        if (jQuery(this).scrollTop() &gt; 1000) totop.fadeIn(); else totop.fadeOut();
    });
    totop.click(function () {
        //スクロール速度 500
        jQuery('body,html').animate({scrollTop: 0}, 500); return false;
    });
});
&lt;/script&gt;

<div id="totop"><a href="#header">ページの先頭へ戻る</a></div>

jQuery(function() {

var totop = jQuery('#totop');

totop.hide();

jQuery(window).scroll(function () {

//スタートスクロール量 1000

if (jQuery(this).scrollTop() > 1000) totop.fadeIn(); else totop.fadeOut();

});

totop.click(function () {

//スクロール速度 500

jQuery('body,html').animate({scrollTop: 0}, 500); return false;

});

</script>

このコードをコピーして、
footerphpの一番上に貼り付けます。

貼り付けたら「ファイルを更新」をクリック。

以上です！

コードとか、CSSとかの文字が出てくると難しそうですが、

この通りにやっていただくととっても簡単です。

ぜひ試してみてくださいね！

・ノウハウコレクターになってしまっている
・アフィリエイトって稼げるの？

などなど、アフィリエイトのご相談はお気軽にあーこまでお問い合わせください♪

お問い合わせには100%回答していますし、
みなさんに喜んでいただいています^^
↓　↓　↓
>>あーこに問い合わせしてみる

①ワードプレスにトップへ戻るの画像をアップロード

コメントをどうぞ