【ノンデザイナー向け】WordPressで今風なページトップを超簡単に設置する方法

Feb 8, 2012

2011年くらいから、
ページをスクロールすると、フワっと表示されるページトップ（クリックするとページの一番上にいくやつ）が
流行ってますよね！　超簡単にコピペするだけで作れるソース作ったので、公開します！

まず管理画面から、ヘッダー修正画面へ行きましょう

ここから超簡単3ステップ！

STEP01.</head>タグの前に、下記コードをコピペ

<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#pagetop').fadeIn();
    } else {
        $('#pagetop').fadeOut();
    }
});
</script>

STEP02.<body>タグを、下記に変更

<body id="top">

STEP03.<body id="top">タグの下に、下記コードをコピペ

<div id="pagetop" style="display:none;position:fixed;right:10px;bottom:10px;">
<a href="#top" style="padding:5px;background:#ccc;color:#fff;display:block;font-size:20px;font-weight:bold;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;">↑</a></div>

これで完成です！
サイトの右下に、フワッとページトップボタンが出ればOKです！

ちょっとCSSとか分かるよってひとは、
STEP03の数字とか色とかをいじれば、微調整も可能です！

デフォルトは、
画面右下から10pxずつ離して（right:10px;bottom:10px;）、
背景が薄グレー（background）、
矢印の色が白（color）、
矢印の大きさが20px（font-size）、
角丸8px（border-radius）
となっております。

いろいろいじってみてください。
是非！