ライブドアブログの目次リンクにスムーススクロールを実装する方法

つい昨日、シーサーブログの目次リンクにスムーススクロール機能を実装する手順を示した記事を書きましたが、ライブドアブログで実装する方法についても書いておきます。


やることはシーサーブログの時と全然変わらないです。むしろライブドアブログの方が簡単ですね。



とりあえず難しい知識とか無くても以下に示す通りに行えば出来ると思います。






1:ライブドアブログの目次リンクにスムーススクロールを実装する手順



まず最初に以下のソースコードをコピーしてください。

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




コピーできたら、次にライブドアブログの管理画面に行き、下の画像が示すように「ブログ設定」をクリックしてください。

1.png





次に、赤い四角枠で囲んだ部分、「PC」をクリックしてください。


2.png






そして、右の方にある「カスタムJS」をクリックしてください。


3.png






そしたら次のような画面になると思います。黄色の枠で囲んだhead内を選択し、赤枠で囲んだ部分に最初にコピーしたコードをそのまま貼り付けて下さい。最後に保存をクリックしたら設定完了です。

4.png



2:まとめ

ライブドアブログの目次リンクにスムーススクロールを実装する方法を具体的に書いてみました。

シーサーブログでは手順が若干ややこしかったものの、ライブドアブログではかなり簡単でしたね。


HTMLの知識は必要なく、ただコピーして貼り付けるだけで出来るので、ライブドアブログにスムーススクロールを実装してみたい方はぜひ試してみて下さい。





この記事へのコメント