読者です 読者をやめる 読者になる 読者になる

つばさのーと

つばさの日常を綴るのーと

公式目次機能のカスタマイズを勝手にアレンジしたらエラーになった話

f:id:tsubasa123:20161129115553j:plain

 

こんにちは、つばさ(@_tsubasa123_)です。

 

あまり技術的なことはこのブログには書かないようにしようと思っていたのですが、もしかしたら同じ境遇に合う方がいるかもしれませんのでメモ的に残しておきます。

 

目次の挙動がおかしい

 

先日、当ブログのテーマを変更し、簡単なカスタマイズをいくつか行ったのですが、その際に下記を参考に目次のデザインを少し調整しました。

www.yukihy.com

 

で、見た目は問題なかったのですが、実際に使ってみるとどうしてかスムーズにスクロールしない。スムーズスクロールさせるためのコードも入れているんですが、そちらが効いていないような挙動。

 

コンソールを確認すると下記のようなエラー。

 

jquery.min.js?version=1.12.3:2Uncaught Error: Syntax error, unrecognized expression: a[href^=#]

 

まさかはてなブログを利用してデバッグを行うことになるとは…

原因はjQueryのバージョン

 

jQuery 1.12. だと a[href^=#] ではなく a[href^="#"] って書かないとに - Qiita

 

調べてみると、jQuery1.12以上だと'a[href^=#]'この部分を、'a[href^="#"]'このようにダブルクォートで囲まないとエラーになるようでした。元記事でも言及されているように、スクロール系の操作でエラーになりましたね。

 

ゆきひーさんの記事ではjQuery1.9.1を利用されているので、ゆきひーさんの指示通りに設置すれば問題は発生しないはずです。私のように、説明通りに作業ができないタイプの人は同じようなエラーが発生する可能性があります。

 

イミワカンナイ!

 

って方は、

 

$('a[href^=#]').click(function() {
↓
$('a[href^="#"]').click(function() {

 

とりあえずこのように変更していただければ解決するかもしれません。お困りの方がいましたら試してみてください。

 

さいごに

 

書き終わって気が付きましたが、わざわざjQueryのバージョンを変更するような人は私のように自力で解決するだろうし、JavaScriptとかわからない人はゆきひーさんの指示通りに作業するだろうし。

 

この記事、むだ?まぁいいよね。

 

ただ、jQueryに関しては新しいものを使うほうがメリットが多い(速度とかね)わけで、できればこの記事で紹介した修正内容をゆきひーさんに届けたい。コメント残してみようかな。

 

ではでは、最後までお付き合いいただきありがとうございました。

 

関連記事

スマホサイト対応完了!はてなブログ公式目次のデザインカスタマイズ

レスポンシブデザイン向け、はてなブログ公式目次のデザインカスタマイズ

はてなブログ開設10日、参考にしたカスタマイズとかこれからやりたいカスタマイズまとめ(初~中級者向け)