ブログアフィリエイト

• シェア
• 
• 
• 
• 

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

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

 

 

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

 

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

 

 

 

・・・

 

・・・

 

・・・

 

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

 

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

 

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

 

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

 

 

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

 

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

 

 

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

 

 

jQueryを使って設置

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

 

(ﾟДﾟ)ﾊｧ?

 

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

 

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

 

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

 

 

 

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

 

私だってないから。

 

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

 

 

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

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

 

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

 

 

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

 

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

 

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

 

 

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

↓

↓

 

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

&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js&quot;&gt;&lt;/script&gt;

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

引用元：株式会社ウィル

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

 

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

&lt;code class=&quot;plain&quot;&gt;&amp;lt;&lt;/code&gt;&lt;code class=&quot;keyword&quot;&gt;p&lt;/code&gt;&lt;code class=&quot;color1&quot;&gt;class&lt;/code&gt;&lt;code class=&quot;plain&quot;&gt;=&lt;/code&gt;&lt;code class=&quot;string&quot;&gt;&quot;pagetop&quot;&lt;/code&gt;&lt;code class=&quot;plain&quot;&gt;&amp;gt;&amp;lt;&lt;/code&gt;&lt;code class=&quot;keyword&quot;&gt;a&lt;/code&gt;&lt;code class=&quot;color1&quot;&gt;href&lt;/code&gt;&lt;code class=&quot;plain&quot;&gt;=&lt;/code&gt;&lt;code class=&quot;string&quot;&gt;&quot;#wrap&quot;&lt;/code&gt;&lt;code class=&quot;plain&quot;&gt;&amp;gt;▲&amp;lt;/&lt;/code&gt;&lt;code class=&quot;keyword&quot;&gt;a&lt;/code&gt;&lt;code class=&quot;plain&quot;&gt;&amp;gt;&amp;lt;/&lt;/code&gt;&lt;code class=&quot;keyword&quot;&gt;p&lt;/code&gt;&lt;code class=&quot;plain&quot;&gt;&amp;gt;&lt;/code&gt;

1

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

引用元：株式会社ウィル

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

 

４．手順３の下に下記ソースをコピペしてJavaScriptを追加します。

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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】」より

 

 

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

 

 

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

 

 

５．次にスタイルシート（syle.css）を開けます。

 

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.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】」より

 

 

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

 

 

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

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

1 2 3 4 5 6 7 8 9 10

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

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

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

 

 

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

 

 

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

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

 

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

 

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

 

 

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

 

 

 

 

まとめ

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

 

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

 

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

 

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

 

 

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

にほんブログ村

 

 

• シェア
• 
• 
• 
•