ブログに『ページ先頭へ』のボタンを追加した: パソコン・FXなどに関する日記

« Prev 『NEC』製の『Express5800/S70 タイプSR』が12,800円で販売されてます | TOP | 『SBI FXTRADE』で成立確認画面の非表示が可能となった Next »

Sunday 2012/09/02 03:19

ブログに『ページ先頭へ』のボタンを追加した

【カテゴリ：パソコン　ブログカスタマイズの記録】

このブログの右下に『ページ先頭へ』のボタンを追加してみました。

きっかけは、たまたま以下のページを見つけ、とても便利そうだと思ったからです。

【カスタマイズ】トップに戻るボタンをjQueryでニュルッと改造する：りくまろぐ:
http://rikumalog.com/2012/07/wordpress/gototop-button/

最初自分は『jQuery？　なにそれ？』っていう状態であり、上記のページを読んでも正直なところ『ちんぷんかんぷん』でした。

しかし、上記ページの中の『ページ先頭へ』のボタンが非常に気に入ったので、是非ともこのブログに導入したいと思い、トライしてみることにしました。

ちなみにこのブログは上記のブログと違って『seesaa ブログ』です。

この『seesaa ブログ』に導入するにあたってなのですが、当初どこをどう変更したり追加したら良いのか分かりませんでした。

ですが、色々と試行錯誤を繰り返した結果、なんとか導入することができました。

ただ、導入できたのは良いのですが、たぶん数日もするとやり方を忘れてしまいそうです。

そこで、せっかくなので、自分が今回『seesaa ブログ』に導入した際のやり方を整理し、このブログに記録しておくことにしました。

以下、導入の手順です。

１．jquery.js のダウンロード

jQuery（ http://jquery.com/ ）から jquery.js をダウンロードします。

今回ダウンロードした際のファイル名は『jquery-1.8.1.min.js』でした。

２．スクリプトファイルの作成

前述のサイトから、以下の内容をコピーして『func.js』のファイル名（＝例）でファイルを作成し保存します。

jQuery(function() {
	var showFlug = false;
	var topBtn = jQuery('.tothetopfixed');
	//最初はボタン位置をページ外にする
	topBtn.css('bottom', '-100px');
	var showFlug = false;
	//スクロールが100に達したらボタン表示
	jQuery(window).scroll(function () {
		if (jQuery(this).scrollTop() > 450) {
			if (showFlug == false) {
				showFlug = true;
				topBtn.stop().animate({'bottom' : '20px'}, 300); 
			}
		} else {
			if (showFlug) {
				showFlug = false;
				topBtn.stop().animate({'bottom' : '-100px'}, 300); 
			}
		}
	});
	//スクロールしてトップに戻る
	//500の数字を大きくするとスクロール速度が遅くなる
	topBtn.click(function () {
		jQuery('body,html').animate({
			scrollTop: 0
		}, 500);
		return false;
	});
});

３．『seesaa ブログ』へのアップロード

前記２個のファイルを『seesaa ブログ』へアップロードします。

(1)『ブログの管理メニュー』⇒『ファイルマネージャ』から『jquery-1.8.1.min.js』をアップロードします。

・自分はアップロード先のディレクトリとして『jquery』を追加し、このディレクトリにアップロードしました。

・タイトルは『jQuery』としました。

（アップロードしたファイルのURLは、https://kingpcfx.up.seesaa.net/jquery/jquery-1.8.1.min.js となりました。）

(2)『ブログの管理メニュー』⇒『ファイルマネージャ』から『func.js』をアップロードします。

・自分はアップロード先のディレクトリとして『original_js』を追加し、このディレクトリにアップロードしました。

・タイトルは『オリジナルスクリプト』としました。

（アップロードしたファイルのURLは、https://kingpcfx.up.seesaa.net/original_js/func.js となりました。）

注意：アップロード先のディレクトリやタイトルの名前は任意であり、あくまでも自分の場合の例です。

４．『HTML』への追加／変更

(1)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『HTML』をクリックします。

(2)『HTMLの追加』をクリックします。

↓以下のような編集画面が表示されます。

(3)『ＨＴＭＬ名』の箇所には、『オリジナルスクリプト追加』など任意の名前を入力します。

(4)『</head>』の行の直前に、以下を追加します。（ここで指定しているのは、事前にアップロードしておいたファイルのURLです。）

<script src="https://kingpcfx.up.seesaa.net/jquery/jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="https://kingpcfx.up.seesaa.net/original_js/func.js"></script>

(5)『<div id="container">』の行の直後に、以下を追加します。

<div id="header">

(6)『</body>』の行の直前に、以下を追加します。

</div>
<div class="tothetopfixed">
<a href="#header">▲ページ先頭へ▲</a>
</div> <!--- end [tothetopfixed] -->

(7)『保存』ボタンをクリックします。

↑『保存』ボタンをクリック後、『設定を完了しました。』と表示されます。

(8)『デザイン > PC > HTML』画面で、今回追加／変更した『HTML名』の箇所の『適用』ラジオボタンをクリックします。

↑ラジオボタンをクリック後、『設定を完了しました。』と表示されます。

５．『デザイン設定』（＝スタイルシート）への追加／変更

(1)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『デザイン設定』をクリックします。

(2)対象となるタイトルのリンクをクリックします。

↑上のような CSS（＝スタイルシート）の編集画面が表示されます。

(3)『.date{』の行の直前くらいの位置に以下を追加します。（追加する箇所の位置は任意であり、あくまでも自分の場合の例です。）

/* ページ先頭リンク */
div.tothetopfixed {
	position: fixed;
	right: 15px;
	bottom: 20px;
	z-index: 1500;
}	

div.tothetopfixed a {
	display: block;
	color: #333333;
	padding: 10px;
	margin: 0;
	background-color: #89c997;
	border-radius: 5px;
	font-size: 0.8em;
}

div.tothetopfixed a:hover {
	background: #0044CC;
	color: #ffffff;
}