はてなブログ今回は久々に、はてなブログのカスタマイズ系の記事です。はてなブログでは「脚注」や「目次」を設置する機能があり、これでページ内リンクを設置できます。このページ内リンクですが、サイトによってはスルスルとスクロールして移動する所がありますよね?このスクリプト自体は検索すればいっぱい出てきますが、はてなブログではどうもうまくいかない。仕組み上、特に脚注のリンクなどは上手く動かない。それを、はてなブログの脚注でもスルスル移動するようにしたので、それの紹介です。実装するとすごく簡単です。本体のコードを読み込ませないといけません。src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>このコードを、実行したいスクリプトの前に記入して下さい。そちらを利用しても動かすことができますが、ページが読み込まえた後にスクリプトが実行されるようにしなくては動きません。方法はいろいろありますが、例として次のようにしたらスクリプトがページ読み込み後に実行されます。スクリプト});ただしこの方法は、はてなブログのシステムに依存してますので、はてな側で変更などあった場合にちゃんと動かなくるということもあります。2度読み込みとかは避けることはできますが。脚注もスクロール移動するスクリプトそれでは本題です。シンプルに、投稿記事の中のページ内リンクだけスムーズに移動するスクリプトです。});よくあるページ内リンクをスムーズに移動するスクリプトに、はてなブログで脚注のも対応できるよう少し手を加えています。最初と最後にデフォルト機能のページ内リンクの移動をキャンセルさせるコードがあります。false;だけで良いそうなのですが、それだけではデフォルトのページ内リンクが作動することもあるようで、このようにすれば確実なのだそうです。クラス内のものだけにしています。コードを書き込む場所は記事下でもフッターでもおっけー。基本記事しか検索しないので、記事下に書き込んだほうが誤作動など心配がなく、安心かもしれません。こちらはサンプルページを作りました。どんなもんかをこちらにて確認できます。リンク:サンプルページさらに「トップに戻る」も追加したスクリプトこの感じなら「トップに戻る」といったページ内リンクもこのスクリプトに組み込めそうです。それを考慮して作ったものが、こちら。}});先ほどとの違いは、移動先にトップも含まれていることです。あとリンク先が存在しないといった場合のエラーとかが出ないようにもしています。これを使えば「トップに戻る」のスクリプトを一つ減らせるかもしれません。「トップに戻る」にもこのスクリプトを使う場合は、フッターに挿入項目の、さらに最後に記述すれば良いと思います。スクリプトは以上です。実行回数を少なくすれば、ちょっとだけ動作が速くなりそうですが、今回は定番の方法にしてみました。これにイージングのプラグインを入れると、移動するときのアニメーションのバリエーションが増えます。できそうですが、わたし自身はプラグインを使ったことがないので、導入するならこちらのサイトとかが役にたちそう。OZPAの表4まあ、ページ内リンクのスクロール移動で、あまりにもこったイージングもどうかと思いますが(笑)今回のスクリプトを使えば、とても簡単にはてなブログの脚注にもスクロール移動を実装できます。前々回の記事に続き、プレースホルダーの小技をもう一つ。使って、画像を簡単に貼り付けること...2017-07-16jQueryを使わず、CSSとJavaScriptで実装するトップに戻るボタン「トップに戻るボタン」というものがあります。はてなブログPro冬眠しないタヌキ。プロフィールはこちら。わたしと納豆ごはんスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。