はてなブログにjQueryを導入してみる。

カスタマイズが色々できることがわかってきたので、早速jQueryを導入してみよう。

準備

まずはGoogleにホストしてあるjQueryをサイドバーのHTMLウィジェットに追加。

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

上記のようなソースを貼り付ける。

そして保存。


javascriptを追加 

次によくいろいろなサイトで見るトップへ戻るを押すとするするーっと
上にスクロールしながら戻るjQueryの動きを入れてみよう。

下記のようなコードを先ほどのHTMLウィジェットに追加。

<script type="text/javascript">
jQuery.noConflict();
(function($) {
$(function(){
  // #で始まるアンカーをクリックした場合に処理
  $('a[href^=#]').click(function() {
     // スクロールの速度
     var speed = 2000;// ミリ秒
     // アンカーの値取得
     var href= $(this).attr("href");
     // 移動先を取得
     var target = $(href == "#" || href == "" ? 'html' : href);
     // 移動先を数値で取得
     var position = target.offset().top;
     // スムーススクロール
     $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing');
     return false;
  });
});
})(jQuery);
</script>

そして保存。

HTMLの記述

次にHTMLを記述してみよう。

先ほどのHTMLウィジェットに下記のように追加。

<div class="totop"><a href="#globalheader-container">トップへ</a></div>

これでOK。保存して動作確認。

位置の調整（CSS調整）

次にトップへ戻るというリンクの位置を右下の強制的に移動させてしまおう。

管理画面のCSS編集で下記のように追加。

.totop{position:fixed;bottom:20px;right:20px;}

保存してOK。

位置が右下に固定されたのが確認できる。

作業時間

ここまでの一連の作業で15分ほどだろうか。

ブログを書きながらなので30分はかかったが簡単にjQueryを導入しい簡単な動きを取り入れることができた。

これはカスタマイズがこれから楽しくなりそうだ。