#ChiroruLab

趣味と日々の雑記録

3分で、はてなブログのページ内移動をぬるぬるにするTips。

f:id:chiroru_27:20130816194320j:plain:w300
ページ内移動って、一瞬で目的地に飛べるのは便利なんですが
移動し読み終わったあとに今の位置が分からず、迷ってしまうことってないですか?

私としては、読んでいる位置が分かるのと、分からないのでは
読むのにも結構影響してくると思うのです...

そこで今回、移動後の位置を少し分かりやすくするため
ページ内移動をぬるぬる(スムーズ)にする方法をまとめてみます!



こんにちは、はてな記法の便利さにべた惚れしちゃいそうな@chiroru_27 です
というか、しました。

作業効率が倍くらいになりますね。特に画像とコードの貼り付けが凄い楽チン。
TextExpanderでスペニット登録したら、iPadでも十分書けます。
むしろ、こっちの方が早いくらい。

・・・。
さて、こんなこと言ってる場合じゃなかった。
3分なんてすぐ過ぎちゃいますからね!

早速取り掛かりましょう

下準備


何事も準備が大切。というか、準備さえできればあとは何もいらない。

1. 必要なページを開く


1. 「デザイン」を開く


上のバーから、[管理]をクリックすると出てくるので、新しいタブで開いて下さい。
f:id:chiroru_27:20130816212645j:plain

2. 「カスタマイズ」に切り替えて、サイドバーを選択する


f:id:chiroru_27:20130816212647j:plain

3. サイドバーに「モジュールを追加」する


f:id:chiroru_27:20130816212648j:plain

4. 「HTML」を選択する


f:id:chiroru_27:20130816212649j:plain:h350

2. コードをコピーする

<!-- HTML -->

<!-- SCRIPT -->
<!-- SCRIPT : ページ内の移動をスムーズに -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('.entry-content a[href^=#]').click(function(){
  var speed = 500;
  var href= $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top;
  $("html, body").animate({scrollTop:position}, speed, "swing");
  return false;
 });
});
</script>

3. 貼り付ける


手順1で開いてたページの横に貼り付けて、適用ボタンを押せば、ゴールは目前です!
(タイトルは空にしておいて下さいね♪)
f:id:chiroru_27:20130816212650j:plain

4. 変更を保存して、ブログに適用させる


f:id:chiroru_27:20130816213341j:plain



あとは確認して、きちんと動いていれば無事終了です
「そもそも、ページ内リンクってどうやって作るのよ」って人は
HTMLタグ/リンクタグ/同じページ内にリンクする - TAG index Webサイト
がわかりやすいので、参考にしてみて下さい!

それでは、最後まで読んでくれてありがとうございました!
ではまたね。バイバイ♪

Remove all ads