初心者でもコピペで出来るjQueryを使ったボタンの設置

早いものでもう12月ですね~。

まだハロウィンの飾りを出したままのトリでございます、こんちは~。

 

 

さて、前回の記事から、今回の記事投稿までの間に、このブログにちょっとした変化があったのですが、気づきましたか?

 

うむ。では、わからない方のためにシンキングタイム♪

 

 

 スマホ

 

・・・

 

・・・

 

・・・

 

はい、では、右下にちゅーもっく!

 

わかりました?そう、ページトップへ戻るボタンを設置したんです(ちなみに、トップページじゃなくて、ページトップなので混同されませぬよう)。

 

前々から色んなサイトを見ていて、「そういえばうちのブログにはこのボタン付いてないな~」ということが気になってまして。

 

一番下まで見れば「ページの先頭へ」というボタンはあるのですが、途中で先頭へ戻りたいときもありますやん?

 

 

PCだとマウスでスクロールバーを「ソイヤーッ!」と一気に上げるか、スマホやタブレットだとブラウザ上部の微妙なゾーンをタップしないと先頭へ瞬時に戻れないわけですが、このボタンがあると、どのデバイスであっても、タッチしてポンが出来るわけです。

 

そう、ユーザビリティ(使い勝手)が高まるわけです。

 

 

もしかすると同じ悩みを持っている方もいらっしゃるのでは?更にそのやり方がわからなくて困っていらっしゃるのでは?と思い、リサーチしてみるとコピペだけで簡単に設置出来ましたので、みなさまにも紹介したいと思います。

 

 

jQueryを使って設置

まず、この「ページトップへ戻るボタンの設置」にはJavaScriptのライブラリであるjQueryというもの使います。

 

(゚Д゚)ハァ?

 

って思いましたよね。すんません。

 

えーと、「JavaScriptを簡単にしたやつ」くらいに思って頂ければOKです(プログラマーさんに怒られそうだな…)。

 

んじゃ、JavaScriptってなんやねん?って声が聞こえて来そうですが、こちらも簡単にいうと「サイトに視覚効果を付けてるくれるプログラミング言語の一種」です(これまたプログラマーさんにry

 

 

 

「え、私そんな専門知識ないよ!」と思ったそこのあなた。大丈夫です。

 

私だってないから。

 

先ほど申し上げたように、コピペだけで出来ますのでご安心を。

 

 

ページトップへ戻るボタンの設置方法

まず、ボタンの設置前に必ずバックアップをとっておいてください

 

コピペした後に、変なところを触ってしまってレイアウトが崩れたりしたら面倒なので、すぐ戻せる状態にしておきましょう。

 

 

今回、私はボタン設置にあたって参考にさせて頂いたサイトが2つございます。

 

jQueryを参照させて頂いた株式会社ウィルさまと、CSSを参照させて頂いたゆういちのノートブックさまです。

 

この2つのサイトで公開されているソースをミックスしてボタンを作成致しました。

 

 

1.まず、テーマヘッダー(header.php)にjQueryのライブラリが入っているか確認しましょう。Ctrl+Fで"jquery"と検索してみて下さい。

テーマの編集

テーマヘッダー

jQuearyライブラリ

 

2.見つからない場合は</head>のタグを探して、その上に下記ソースをコピペしてjQueryのライブラリを追加します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

引用元:株式会社ウィル

「トップへ戻るボタンをカンタン5分で実装【jQuery】」より

 

3.</head>の上に下記ソースをコピペして、ページトップへ戻る▲ボタンを設置します。

<code class="plain">&lt;</code><code class="keyword">p</code><code class="color1">class</code><code class="plain">=</code><code class="string">"pagetop"</code><code class="plain">&gt;&lt;</code><code class="keyword">a</code><code class="color1">href</code><code class="plain">=</code><code class="string">"#wrap"</code><code class="plain">&gt;▲&lt;/</code><code class="keyword">a</code><code class="plain">&gt;&lt;/</code><code class="keyword">p</code><code class="plain">&gt;</code>

引用元:株式会社ウィル

「トップへ戻るボタンをカンタン5分で実装【jQuery】」より

 

4.手順3の下に下記ソースをコピペしてJavaScriptを追加します。

<script>
$(document).ready(function() {
  var pagetop = $('.pagetop');
    $(window).scroll(function () {
       if ($(this).scrollTop() > 100) {
            pagetop.fadeIn();
       } else {
            pagetop.fadeOut();
            }
       });
       pagetop.click(function () {
           $('body, html').animate({ scrollTop: 0 }, 500);
              return false;
   });
});
</script>

引用元:株式会社ウィル

「トップへ戻るボタンをカンタン5分で実装【jQuery】」より

 

 

以上で、ヘッダーの編集は完了ですので、保存しておきます。

 

 

ん?と思ったあなた。トリのソース例を参考にして下さい。

スクロールボタン設置例

 

 

5.次にスタイルシート(syle.css)を開けます。

%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab%e3%82%b7%e3%83%bc%e3%83%88

 

6.スタイルシートの一番下に下記ソースをコピペします。

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #b2d1fb;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

引用元:株式会社ウィル

「トップへ戻るボタンをカンタン5分で実装【jQuery】」より

 

 

これだけで右下にボタンが出ていると思います。一度保存して確認してみて下さい。

 

 

7.ただ、このままだとちょっと小さいので、大きくしたいという方はスタイルシートに下記ソースも付け加えてみましょう。

#page-top a {
    border-radius: 50%;
    font-size: 32px;
    height: 32px;
    line-height: 32px;
    width: 32px;
}
#page-top a:hover {
    background: #3498db;
}

引用元:ゆういちのノートブック

「【Stinger7】右下のトップへ戻るボタンに5種類のアイコンを入れてみた」より

 

 

ん?と思ったあなた。またまたトリのソース例を参考にして下さい。

スクロールボタン設置例(CSS)

 

 

ボタンの仕様を変える方法

あまり複雑なことはここでは省きますが、ちょっと大きさや色を変えたいな、とかボタンの出る位置を変更したいな、という場合のために下記図を参照に色々試してみて下さい。

 

あ!触る前のバックアップは忘れずに

 

まず、ヘッダー部分。ボタンの動きを設定するところになります。

 

スクリプト説明

 

次にスタイルシート。こちらはボタンのデザインを設定するところになります。

 

CSS説明

 

カラーコード参考サイト:原色大辞典

 

 

まとめ

このように、スクロールボタンを作るには、jQueryというものを使って、ヘッダーで動作を、スタイルシートでデザインを設定する必要があります。

 

方法としてはコピペだけでいいのですが、ちょーっとややこしかったですかね。

 

サイトデザインに凝り過ぎる=アフィリエイト本来の目的を見失うという、アフィリエイトあるあるにならないよう、気を付けて下さいね(とかいってる自分が一番危ない)。

 

またブログで使えるおもしろいギミックがありましたら紹介していきます!

 

 

★この記事がお役に立ちましたらクリックして頂けると励みになります(*´∀`*)

ブログランキング・にほんブログ村へ
にほんブログ村

 

 

この記事に関連する記事一覧

コメントは8件です

  1. airisu より:

    こんにちは。

    トップへ戻るボタン便利ですね。

    コピペだけでいいのですが、ややこしいかもです。
    私には無理かも・・・

    凄く良い情報ですね。
    ありがとうございました。

    • トリ より:

      airisuさま、こんにちは。

      ちょっと難しいので、ヘッダーとかCSS触る自信ないな・・・という場合はプラグインを使うという手もありますので、そちらもよろしくご検討ください^^

  2. りつき より:

    トリさ~ん!

    こんにちは、りつきです。

    押しました。押しました~!
    右下、クリックしたら
    ページトップまで戻りました☆

    トリさん、相変わらず
    スゴイです。
    何かわからないことがあれば
    なんでも分かりますね、ここは!

    いつも、ありがとうございます。
    応援してま~す!

    • トリ より:

      りつきさま、こんばんは!

      いやいや~このボタン設置にどれだけうんうん唸ったか。コピペだけでいいのにうまくいかなくてf^^;
      最近はアウトプット<<<<インプットになってしまっていて更新頻度が落ちておりますが、また覗きに来てやってください~。
      お忙しいのに、いつもコメントして下さってありがとうございます^^

  3. 黒子 より:

    トリさん、はじめまして!

    こんにちは。
    黒子(くろこ)と申します。※ほくろじゃないです。

    この「トップページに戻るボタン」って、
    こんなコードでできてたんですね〜!

    私が使ってるWPテンプレートには元々付いていたので、知らなかったです!

    でも、これがあるとないとで、
    サイトの質って違ってきますよね!

    自分でコードいじることがあったら、見てみようと思いました。

    では、応援していきます〜☆

    黒子

    • トリ より:

      黒子さま、はじめまして!

      こういうのっていじりだすと止まらないから、「へぇ~」くらいで止めとかないといけないんですよねf^^;
      私の場合、「じゃ、これの場合はどうなるの?」って深入りしたくなるタイプなので危険です(笑)
      応援ありがとうございました!またお越しくださいませ。

  4. ikura より:

    トリさん、初めまして!

    ikuraと申します。
    このボタンいいですね~。

    私も自分のブログでチャレンジ
    してみたいと思います^^

    情報ありがとうございました。
    応援していきます。

    • トリ より:

      ikuraさま、はじめまして!

      とっても簡単なので、是非コピペしてお使い下さい。
      応援もありがとうございました^^

コメントフォーム

名前

メールアドレス

URL

コメント

トラックバックURL: 

ページの先頭へ