更新jQueryがあまりよくわかっていない@web_shufuです。そんな私でも、jQueryプラグイン「ScrollUp」を使えば、ページトップへのスクロールボタンを10分で設置できましたのでご紹介します。GitHubに行って、ZIPタブをクリックしてください。これでダウンロードが完了します。その後すべて展開してください。関連ファイルは全てscrollup-masterという名前のフォルダーに格納されています。展開が終わったら、scrollup-master内のjsフォルダーの中にあるjquery.scrollUp.min.jsを編集します。普段お使いのテキストエディタで、jquery.scrollUp.min.jsの末尾にカーソルを合わせ、enterボタン2連打で空白行を1行作ってください。その後、空白行の下に以下を貼り付けて保存してください。});});結果、jquery.scrollUp.min.jsはこんな感じになります。アップロードjquery.scrollUp.min.jsの編集が終わったら、サーバーのドメイン直下にjsフォルダーを作って、そこにアップロードしてください。ドメインルートからのjquery.scrollUp.min.jsへの絶対パスは、/js/jquery.scrollUp.min.jsとなります。</body>直前にjsファイルへのリンク次に、</body>直前に、以下を挿入します。Twentytwelveテーマの場合、</body>はfooter.phpにあります。src="/js/jquery.scrollUp.min.js"></script>※その後、テーマファイルのfunction.phpにてwp_enqueue_script関数を使って、リンクを設定し直しました。ボタンにスタイルをあてるあとは、ボタンにスタイルをあてれば、ボタンが見えるようになります。自分で全くのオリジナルでスタイルをあてるのは大変なので、scrollup-master/css/theme/pill.cssにあるデフォルトのスタイルをとりあえずそのまま利用します。以下のように、ページトップへのスクロールボタンには、scrollUpというidで以下のようなスタイルが定義されています。}これを使っているテーマのstyle.cssに貼り付けます。*/の直後にでも貼り付ければいいでしょう。top」ボタンが登場します。ボタンの見栄えや挙動が不満な方は、style.cssと、jquery.scrollUp.min.jsのうち空白行を作って貼り付けた部分でカスタマイズすることが出来ます。いじってみてもいいかもしれません。@web_shufuもそうしました。最後にボタンの見栄えや挙動をデフォルトのままにすれば、分ほどで貼り付け作業が終了します。「ScrollUp」は、jQueryがあまりよくわかってなくても手軽に導入できるので、是非チャレンジしてみてください。fシェアtツイートB!はてブ著者:ウェブシュフFP主夫ブロガー。メインサイトは家計ブログ。PHPやSEOと格闘しつつWordPressで運営しています。サイトをいじったときの備忘録などウェブ関連のことをまとめたサブサイトとして当サイトを運営しています。当ドメインの運営歴は現在8年目です。コメントをキャンセルメールアドレスが公開されることはありません。よる表記とプライバシーポリシ。