マトリョーシカ的日常

ワクワクばらまく明日のブログ。

「最近はてなブログでタグクラウドがうまく表示されない…」→解決!

あれ、おかしいぞ


 
f:id:kyokucho1989:20131024165617p:plain



 一二週間前だろうか。突然タグクラウドがうまく表示されなくなった。(※サムネは修正後)


 はてなブログは通常のサイドバーではカテゴリと件数をずららと一列に表示させることしか出来ない。しかし有志の方(たま● (id:tmd45)さん)がすてきなスクリプトを書いてくださった。




【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!【改訂版】はてなブログ サイドバーのカテゴリ表示をタグクラウドにする! - TMD45INC!!!

何人かの方に気に入って使っていただいたようなのですが、以前の記事では jQuery だけベ...


 これを設定するとサイドバーにきれいなタグクラウドが表示させる。そう、このまえまでは。今は一列には表示されないものの、フォントの大きさが全て同じになってしまい、件数も表示されるようになってしまった。

解決法


 「調べるの面倒だしこのままでいいかな」と思っていたら、今日、はてなブログ開発ブログ(言いにくいな)から以下のエントリが更新された。


ブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開発ブログブログをおよそ2倍の速さで表示する、などの改善と機能追加を行いました - はてなブログ開発ブログ

はてなブログでは、本日までに以下の改善および機能追加を行いました。ページ表示の高速化はてなフォトライフの利用量を編集サイドバーに表示楽天の広告を最適化させるHT...

自作スクリプト等でjQueryを利用している際の注意点
今回の改善で、これまでページ上部で呼び出していたjQueryをページ下部に移動しました。これにより、jQueryがロードされていることを前提としたスクリプトは動作しなくなっています。


 ブログの表示スピードを改善させるためにjQueryというやつのロードをページ下部で行うことにしたらしい。というわけで、jQueryがロードされている前提で作られたスクリプトは機能しなくなった。

 なんとまぁ。

jQueryなどのライブラリを利用される際には,以下のようにライブラリを明示的に読み込み、さらにスクリプト全体を関数で囲ってjQueryオブジェクトを引数に呼び出すようにしてください。

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
    (function($) {
        $(function() { ... });
    })(jQuery);
    </script>


 こんなことが書いてあるので、早速タグクラウドにも追加してみる。

 デザイン>サイドバーからタグクラウドのスクリプトの上部に

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 を追加して保存してみる。


 わお、動いた。

おわりに


 ヤマネ ショウ (id:sho_yamane)さん直伝のメニューバーが追従しなくなった原因もこれだったみたい。開発者ブログのエントリが上がる前にコメントで教えていただいた。ヤマネさん、ありがとうございます。


 本日二回目の更新だが、早く書かないと誰かにとられそうで怖かったので。ブログ病か。