ページの先頭に戻るボタンを自作してみた

WordPressには色々なプラグインがあって、簡単に色々な機能が追加できるので便利なのですが、WordPressの高速化をしている段階で「Scroll To Top」というプラグインを外して自作する事にしました。その理由は以前の記事で書いてます。
レンダリングをブロックしている JavaScriptをフッターに移動させる

上記記事を読んで頂けると分かるのですが、レンダリングブロック(読み込みの邪魔)していたjQuery本体をフッターに持っていく作業をした時にどうしてもこの「Scroll To Top」というプラグインをどうにかする必要がでてきました。という訳で今回はこの機能を自作します。

もちろん「Scroll To Top」というプラグインに罪はなく私のわがままです。それまでは不具合なく利用させて頂きました。

スポンサーリンク

Scroll To Topを自作するメリット

実際にページの先頭に戻るボタン「Scroll To Top」を作成して思ったのですが、これは結構メリットがあります。

  • PCページとスマートフォンページでサイズや色を手軽に変更できる
  • プラグインの更新でスタイルが初期状態になる事がない
  • ボタンをクリックした時にURLの最後に「#top」がつかない

これまでプラグインを利用している時にはプラグインの更新される度にプラグインのCSSを編集しなおしておりましたのでこの手間が省けます。それでPCページとスマートフォンページでボタンサイズを手軽に変更する事もできます。

そしてなによりボタンをクリックした時にURLの最後に「#top」がつかないのがメリットです。

プラグイン「Scroll To Top」を使っていて先頭に戻るボタンを押すとURLの最後に「#top」が付きます。

この状態でブックマーク等をすると「http://〇〇.com/#top」というURLで登録されます。つまりブックマーク数が分散される事になりますね。

ページ先頭にスクロールするボタンの作り方

まずは子テーマに「footer.php」を追加しておきます。親テーマの「footer.php」の内容を全部コピーして子テーマの「footer.php」に貼り付けておきます。既にある場合は不要です。

子テーマに「footer.php」を追加できたらそのファイルを開いて一番最後の方にある「/body」という部分を探します。その直前に次の記述をします。正確には「wp_footer()」の後に書いておけばOKです。

<div id="scroll-top"><p>▲TOP</p></div>

ここのpタグで囲まれた部分(▲TOP)がボタンに表示されるテキストになりますのでお好みで変更してもOKです。ただ、スマートフォンでも同じテキストになるのであまり長くならないようにしておきます(ボタンのサイズによっては改行されるため)。

scroll-1

ここのボタン部分には「id=”scroll-top」という名前を付けておきました。上記のコードを入れたら「保存」を忘れずに。

次に子テーマのスタイルシートに記述していきますが、TwentyTwelveのようなレスポンシブデザインのテーマの場合はPCページのスタイルとスマートフォンページのスタイルをそれぞれ指定できます。

まずはPCとスマートフォン共通部分のスタイルを子テーマのスタイルシート(CSS)に書きます。

/* PCページとスマートフォン共通スタイル */
#scroll-top{ /* ボタンのデザイン */
background-color:#1F5E73; /* ボタンの背景色 */
color:#fff; /* ボタンの文字色 */
text-align:center; /* ボタン内の文字を中央に */
position:fixed; /* 画面がスクロールしても固定する */
right:20px; /* 固定する場所は右から20px */
bottom:20px; /* 固定する場所は下から20px */
display:none; /* ボタン表示は最初は非表示 */
margin:0 0; /* ボタンの余計な余白はいらない */
border-radius: 10px; /* 角を丸く */
-webkit-border-radius: 10px; /* Safari,Google Chrome用 */
-moz-border-radius: 10px; 
cursor:pointer; /* カーソルを指のマークに */
opacity:0.7; /* ボタンの透明度 */
}

次にボタンのサイズPC用を追加。

 /* ボタンのサイズPC用 */
@media screen and (min-width: 600px) {
#scroll-top{   /* ボタンのデザイン */
width:150px;   /* ボタンの横幅 */
height:40px;   /* ボタン高さ */
}
#scroll-top p{        /* ボタンのテキスト部分 */
line-height: 40px;  /* 文字の高さ */
}
}

「@media screen and (min-width: 600px)」でブラウザのサイズが600px以上の場合という条件分岐ができます。つまりPCのページならこのサイズにしますという事です。

それと注意点ですが、サイズを変更する場合は「#scroll-top」の「ボタン高さ(height」と「#scroll-top p」の「文字の高さ(line-height)」という部分は同じ数字にしておいて下さい。

これを同じにしておくことでボタンのテキスト部分が垂直方向の真ん中に来ます。ボタンのテキスト部分が上に寄ったり下に寄ったりを解消できます。

それと「display:none」でボタンは非表示にしておきます。これは後でスクリプトを使ってフェードインさせたりフェードアウトさせるためです。

続いてスマートフォン用のボタンサイズを指定しましょう。先ほどブラウザサイズが600px以上の場合という条件分岐をしたので599px以下の場合という条件分岐でスマートフォン用のサイズを指定します。

/* ボタンのサイズスマートフォン用 */
@media screen and (max-width: 599px) {
#scroll-top{   /* ボタンのデザイン */
width:120px;   /* ボタンの横幅 */
height:40px;   /* ボタン高さ */
position:fixed; /* 画面がスクロールしても固定する */
right:10px; /* 固定する場所は右から10px */
bottom:10px; /* 固定する場所は下から10px */
}

#scroll-top p{ /* ボタンのテキスト部分 */
line-height: 40px; /* 文字の高さ */
}
}

「@media screen and (max-width: 599px)」というのがブラウザサイズ599px以下ならという条件分岐です。PC用とスマートフォン用でボタンの横幅を「150px」と「120px」に変更して、表示位置「right,bottom」も若干変更しました。

このようにスタイルシート1枚で条件分岐できるのがレスポンシブデザインの良い所です。

スクロールボタンを機能させる

さて、スタイルシートができましたので後はJavaScript(jQuery)の記述をしてWordPressで出力するようにします。これをしないと機能しません。レンダリングブロック(読み込みの邪魔)にならないようにフッターで出力します。そう、WordPress高速化のためにというのが目的でした。

さて、自作のJavaScriptをWordPressで利用する方法は別記事で書いておりましたので次の記事を参考にしてスクロールトップボタンを機能させてみましょう。
自作のJavaScriptをWordPressで利用する方法

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

ページの先頭に戻るボタンを自作してみた”に23件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. Okingatarashi

    しげぞう様
    本当にありがとうございます。
    私がしげぞうさんのようになれるって思わないけど、
    しげぞうさんが助けてくれるように、何かで誰かの役に立つようになりたいと思います。
    この先、相当おんぶにだっこのお世話をかけると思います。
    本当に、ご面倒な事と思いますが宜しくお願いします。

  2. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます!反映されて良かった!!私も最初は素人からのスタートだったので、こんな風に還元出来ることが本当に嬉しいです、ありがとうございます。でもここがスタートラインなんで、今後もまた何かあれば遠慮なく連絡下さい。こちらこそよろしくお願い致します!

  3. Okingatarashi

    しげぞう様
    こんにちは!本当にありがとうございます。

    dekita 出来た!dekita!できたぁ〜!!

    今まで教えて頂いた事や、今回教えて頂いた事で
    あれこれ何度か試しました。私的に「これでどうだ!」(笑!)
    になりました。本当にありがとう‼ございます。

    「素人のくせに独学だけでここまでよく来たね」って、HP関係の人にも言われます。
    なので、「本当に根気よく教えてくれる人が居ます」って、答えます。
    6/25 OPEN させます。一人であれこれ戦って10ヶ月。やっとスタートラインです。
    頑張れたのも、しげぞうさんが根気よく助けてくれたからです。
    本当に感謝します。ありがとうございます。

    出来ればこれからも宜しくお願いします。

  4. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます。この部分の高さと文字の大きさを大きくしてみました。スタイルシートに以下を追加してみて下さい。

    .skuname {
        height: 40px;
        line-height: 30px;
        font-size: 16px;
    }

    これで反映されるか確認をしてみてください。高さ(height)で調整して、行間(line-height)で品番のテキストを中央あたりにくるようにしてます。

    もしこれで反映されない場合にはお手数ですが再度コメント下さいませ。

  5. Okingatarashi

    しげぞう様

    こんにちは。お世話になりっぱなしの又、私です。
    HELP!をお願いしします。いつも、説明が下手で、ごめんなさい。

    販売ページですが、Add to Shoping cartの上の品番の入った帯部分の件です。

    これはBOX?とかみたいなのですが、高さを高くして文字サイズを大きく表示したいですが、
    その場合は、どうしたらよいでしょうか?

    6/22今現在、混乱したので追加のスタイルはバックアップを取って消した状態にしています。
    何度も申し訳ないと思うのですが、出来たらご指導下さい。宜しくお願いします。 

  6. Okingatarashi

    しげぞう様
    こんにちは。いつも本当にお世話になっています。遅いなんて、思っていません。どんなに助かっているか・・・
    透明度・・・そう言う事なんですね!
    しげぞう様が居てくれるお蔭で、こんなんが書けるようになっています。
    ありがとうございます。

    そっか!グレーか!サイドバーの色合いに揃えるのは有かも!と、同じ色でやってみたら今一…どうかな?何故、薄い色じゃないんだ?でした。ポンコツ炸裂!です。

    そうなんです!ここをもう少し見やすくしたくて、
    帯の中に、文字 じゃなくて、文字の下に太線。(うっすら線は消したかったのにね)
    にするのは、どうだろう・・・と思っています。
    現状でも、もっと大きい文字にしてあるのですが
    帯幅の変え方が分からないから・・・字、でっかくならない?って感じです。
    出来れば、ご教授を、宜しくお願いします。

  7. しげぞう 投稿作成者

    Okingatarashi様

    返信ありがとうございます。全然迷惑でないですよ(笑)前回の質問の意図を勘違いしてまして今回、やっと理解しました。すみません!!

    えっと、薄くなっているのがCSSで「opacity」を使ってると思うのですが、これだと全体(テキストを含め)が薄くなります。なので、既に薄くなった色(カラー)を探して背景色として設定してやればいいかなと思いました。

    スタイルシートに以下の記述を追加して下さい。

    .skuname {
        background-color: #e3eeb4;
        opacity: 1;
    }

    背景色は既に薄くなった色(現在の色)に近い色を探して見ましたので、多分近い色になるかと思います。もし上手く反映されない場合にはお手数ですが再度コメント下さい。

  8. Okingatarashi

    しげぞう様
    こんにちは。いつもお世話になりっぱなしになって居ります。
    ご迷惑ばかりのHELP!です。ごめんなさい。

    販売のページですが、カートに入れるボタン(赤い Add to Shoping cart)上の薄黄緑のボーダーですが、「このページのボタンの色を薄くする」を利用して、薄くしてみたのですが、
    重要な文字まで薄くなってしまいました。薄黄緑は薄くして、文字を薄くしない様にする事って
    出来ますか?
    ご教授願えますと、助かります。宜しくお願いします。

  9. しげぞう 投稿作成者

    Okingatarashi様

    お久しぶりです!返信が遅くなってすみません。サイトを確認してみたのですが、特におかしい感じはしないですが、サイドバーの文字色が薄いグレーなので、この部分の帯の色も基本の薄いグレーでもいいかな?と思ったりします。

    品番の文字色は既に太字(bold)にされているようですので、後は文字の大きさとか文字の色でもう少し目立つ感じにできたら良いかもしれませんね。

    スタイルシートでの装飾自体も特に問題はなさそうですが、透明度(opacity)はここでは不要かと思います。これはコンテンツが重なる場合に使います。重なるコンテンツの下の部分を少しだけ見せたい場合に使ったりするのですが、この帯の部分では不要かと思います。

    それよりも帯の色や文字のカラー、文字の大きさでメリハリを付けた方が良い感じがしますので、一度文字の大きさや背景色で調整してみると良いと思います。

    もし装飾してみて気に入らないとかもっと目立つようにしたいなどありましたらまたコメント下さい。希望に合うような装飾も考えてみますね!

  10. Okingatarashi

    しげぞう様
    HELP!の続きです。

    青緑色の帯の中に文字が入っていますが、
    これ…帯分の長さの太線が入る方がきれでしょうか…
    はっきり区切りをつけるには帯の色(基本は薄いグレーでした)が変わればいいかな?と、思ったのですが、ちょっと、うるさいかな?と、迷います。

    単純に青緑の色番が問題で赤色帯に文字を白とか。が、いいのか?この場合も透明タイプにしたいのです。
    又は、帯でなく太線にして、
    赤い太線にして、文字の色をいつもの濃いグレーとか。
    太線ににする時はどう書いたらいいでしょうか?線と帯はどちらがいいと思われますか?アドバイスも頂けないかと思います。
    ご面倒ばかりで申し訳なく思います。出来れば宜しくお願いします。

  11. Okingatarashi

    しげぞう様
    ご無沙汰してます!こんにちは。
    HELP!の私です!
    サーバー引越し、データのインポートとエクスポートでは上手くいかず、結局、ちまちまコピペを駆使して移しました…ポンコツなので仕方ないですね。どのみち、データ量がそんなにないから、根気だけで乗り切り終了しました。アドレスに www. 付に変わりました

    因って、HELP!です。

    の下の方ですがカートに入れる、オレンジ色のボタン上の青緑の太線、品番名と色番のある部分ですが
    /*—- sku-name —*/
    .item-info .skuname {
    font-family: tahoma;
    fonnt-size: 26px;
    color: #ff0000;
    font-weight: normal;
    min-height: 30px;
    margin-bottom: 1.42857em;
    padding: .357143em;
    background-color: #0090a8;
    opacity: 0.6;
    }
    と入れて、装飾したのですが。青緑の透明度を指定したつもりが文字色まで透明になってしまいます。文字の色は不透明でいいのですが。
    お忙しい事と思いますが教えて頂けると助かります。宜しくお願いします。

  12. 乃風

    しげぞうさんへ

    いいんです、いいんです。私も30分前にパソコンを立ち上げたばかりです。今、レ―ズンケーキを焼いていたところです。家で食べるものなので、試しに、膨らし粉を半分の量に減らして焼いてみました。なかなかの見栄えです。よかったです。アルミ系の膨らし粉がまだまだ市場に出回っているので、呉れ呉れも気を付けて。

    スマフォ、大丈夫でしたか。それはよかったです。あれで固定する場所は右から20pxです。パソコンの場合、画面右端にスクロールバーが縦に表示されるので、そのバーに被らないように配置してみたのですが、スマフォの方は全く分からず、とりあえず、勘で10pxから20pxに変更してみたんです。これで大丈夫だと分かり、安心しました。お忙しいところ、本当にありがとうございました。

    難易度の高い「スマートフォンページのフィッターに固定メニューを作成してみました」の記事を除いて、これですべての設定(カスタマイズ・プラグイン・高速化)が終わりました。ここまで来るのに2か月かかりました。私、まだ誰にも自分のブログの事を言ってないんですよ。みんな、驚くだろうなぁ~~~~~~~~~! うわぁ! 今後もよろしくお願いします。

  13. しげぞう 投稿作成者

    乃風様

    返信遅れてすみません。コメント欄上手く反映されたようで良かったです。また、今スマホの方も確認させてもらいましたが、右下に邪魔にならない感じで上手く反映されてますので、これでOKと思います。大分カスタマイズも進んでいるようなので、後はコンテンツを入れながらどのような感じになるか色々試してみると良いと思います。また何かあればコメント下さい。

  14. 乃風

    しげぞうさんへ

    おはようございます。いつもお世話になっております。

    ページの先頭へ戻るボタンを円形にしたいということで、あれから無料の記号やイラスト画像などをとり入れたりして、あれこれとやってみたのですが、うまくいかなかったので、やめることにしました。

    初期の先頭へ戻るボタンを2か所だけ変更しました。横幅を150pxから75pxのサイズに変更し、固定する場所は右から20pxだったのを50pxに変えました。

    ただ、問題は、スマフォの方なんです。私、スマフォなどの携帯を持っていないので、画面上での確認が取れず、困っています。ボタンの横幅は、PCと同じ75pxで大丈夫だと思うのですが(大丈夫ですよね?)、固定する場所は右から何pxにしたらいいのでしょうか? しげぞうさんの当初の設定では、ボタンの横幅は120pxで、固定場所は右から10pxになっていました。よろしくお願いします。

    「NAME」のところを「お名前」と変更すればよかったのですね。さんざ、それらしき箇所を探し回ったのですが、これは全く分からなかったです。でも、無事に変更できました。引用タグの件、とても参考になりました。ありがとうございました。

  15. 乃風

    しげぞうさんへ

    いつもありがとうございます。

    出来るだけ画像を減らす、CSSで画像を作るとは、確かに言われてみればそうだった・・・と、今頃気づきました。あれから画像を探しに行ったのですが、目移りしちゃって、ほんと大変でした。結構、楽しかったです。CSSで円く出来るのかと思っていましたが、そうじゃなかったのですね。ま、いいや。

    前から思っていたのですが、しげぞうさんの記事の中で使われている画像、すごくクリアーだし、なんかいいですね。最初はあまり気に留めていなかったのですが、記事を日々読むようになってから、段々、「さてお次はどんな画像かな・・・」って思うようになったんです。画像があると、やはりいいですね。私も自分のブログの画像には、いい夢を載せようと思っています。私は、しげぞうさんの真似ばかりしている・・・。これでいいんだろうか・・・・。うふふふふ・・・・。今後もよろしくお願いします。

  16. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。速度の改善が反映されたようで良かったです。ボタンに画像を使う話ですが、特に不具合を起こすような事はありませんが、画像が多くなれば表示速度が少しずつ遅くなってしまうため、私の場合はできるだけ画像を減らすという意味でCSSでボタンの作成をしています。画像1つならそれほど影響はないはずなので、画像でも問題はありません。ただ、私のブログの場合は記事中で画像を多用するので、少しでも画像を減らしたいというだけです。

  17. 乃風

    今、気づいたのですが、ボタンに画像を使うと、何か不具合を起こしやすい・・・ということはあるのでしょうか?

  18. 乃風

    しげぞうさんへ

    いつもありがとうございます。

    この路線なら、円形ボタンを実現できそうなのですね。分かりました。私にそれだけのスキルがあるかどうかにかかってると思いますが、とにかくやってみます。また来ます。

  19. しげぞう 投稿作成者

    乃風様

    返信ありがとうございます。ボタンを円形にという事ですが、これはどこかでフリーの素材を探してくる必要があるかと思います。フリー素材で円形の画像を探してきて、ペイント等を使ってサイズを調整し、それをメディアにアップロードする作業が必要になります。

    アップロードしたらその画像のURLをコピーしてスタイルシートに次のようにコードをいれます。

    #scroll-top{ /* ボタンのデザイン */
    background-image: url("http://●●"); /* ボタンの画像URL */
    }

    私の場合はボタンに画像を使わない派(笑)なので、ちょっと検証はしてませんが、これで行けると思います。

  20. 乃風

    いつもお世話になっております。

    しげぞうさんと同じ、自作のページの先頭に戻るボタンを、無事に表示させることができました。△マークや文字、色はそのままでいいのですが、形だけ円にしたいので、その方法を教えてください。

    私の場合、子テーマのスタイルシートで、文字の大きさを14pxから18pxへと変更しています。行間もプラス4pxで調整してみました。必要かどうかは分かりませんが、参考のため、私のURLを添付しておきます。よろしくお願いします。

    楽しみに待っております。

  21. 乃風

    スクロールトップ、うまく消せました。よかったです。ありがとうございました。消えて、思わず、「オォ―――――――!」と思いました。

    最初、「子テーマのスタイルシートの一部を削るのかなぁ~・・・」と思い、「ロリポップの方に行けばいいのかな・・・」とも思いました。で、最後には、「あ、そうだ、『Scroll To Top』そのものを消去すればいいんだわ、きっと・・・」などと、あれこれと考えてしまいました。でも、結局、どれもハズレでしたね。うふ。お聞きしてよかったです。

    では、自作のクロールトップに行ってきます。

  22. しげぞう 投稿作成者

    乃風様

    報告ありがとうございます。上手く子テーマの作成ができたようで良かったです。乃風様のスクロールトップはおそらくプラグインで実装されているのではないかと思います。なので、プラグインで「Scroll To Top」を停止すれば削除できるかと思います。「Scroll To Top」のプラグインを停止して確認してみてください。上手く消えていれば後は自作のスクロールトップを作成して追加すればOKです。

    また分からない部分があれば再度コメント下さいませ。

  23. 乃風

    しげぞうさん、こんばんは。「content.php」のおかげで、私は子テーマをマスターできたみたいなので、ちょっと自信がつきました。それで、上記も全てスムーズにできました。これから「自作のJavaScriptをWordPressで利用する方法の別記事」に行くところだったのですが・・・。

    この時点で、ふと思ったのですが、最初に作って既に私のURLにのせてしまったあの基本のスクロールトップマークを削除するにはどうすればいいのでしょうか?