0kwqwcbLEz0iQNn1463838760_1463838772

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

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

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

なりますよね!

 

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

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

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

流れ的には以下の通り。

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

②style.cssにコードを追加

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

 

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

操作はいたって簡単♪

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

 

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

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

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

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

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

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

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

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

 

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

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

mI3R_0cLvO3cgWo1463839993_1463840002

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

E82cd50EhHpIbFW1463840309_1463840321

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

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

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;
}

 

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

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

Y7P5QrD0Kqn5NJI1463841289_1463841306

 

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

vxjunQtG6Oy7tK51463841476_1463841532

 

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

 

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

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

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

 

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

VO6BYdGtmgCYRgR1463841948_1463842013

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

<div id="totop"><a href="#header">ページの先頭へ戻る</a></div>
<script>
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の一番上に貼り付けます。

85KgRXYN9J7R6Da1463842463_1463842568

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

 

以上です!

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

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

 

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




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

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

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