ポジティブ心理学研究所

幸福度(EQ)アップの研究所です。ポジティブ心理学に出会う前の古い記事はネガティブなので注意。

はてなブログ、カスタマイズしたヘッダーに自動的にカテゴリ一覧を追加する

そこで次回はJavaScriptを使って、自動的にカテゴリの一覧をヘッダーに設定する方法を紹介します。

と言いながら、前回の記事

rrt.hateblo.jp

から実に一年近くが経過してしまいました。

しかし、案外最近になって需要が顕在化してきたこともあり、だいぶ長いスパンを経てからの奇跡の執筆、続編記事です。

今回の記事の対象は、前回の記事の方法でヘッダーにナビゲーションを追加した人となります。

他の方法で追加した人のヘッダーには、そのままでは適用されませんのでカスタマイズの必要があります。

カテゴリ一覧を自動で拾ってナビに追加する

f:id:lettuce0831:20150403234404p:plain

カテゴリ一覧とはこのブログでいうここの部分のことですね。

ここからスクリプトで取得します。ですので、デザインでサイドバーにこのパーツを表示させておく必要があります。

サイドバーにカテゴリ一覧を表示させたら、デザイン画面のフッタとなっている部分

f:id:lettuce0831:20150403235606p:plain

に次のコードを貼り付けます。

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){
    var lists = $('.hatena-module-category .hatena-urllist li a').map(function(){
        return $('<li><a href="' + $(this).attr('href') + '">' + $(this).text().replace(/ \(\d+\)/, '') + '</a></li>')[0];
    });
    $('#global ul').append(lists);
});
</script>

既に別の場所でjQueryを読み込んでいる場合は一行目は要りません。
またIE8以下でも、ちゃんと動作させたいという場合は2.1.1の部分を1.8.2などに書き換えてください。

さて、このコードを記述してデザインを反映させると…

f:id:lettuce0831:20150403235454p:plain

どーん!

うまく動きましたね。

これでいちいちカテゴリが増える度にを手動でヘッダーに追加しなくていいし、不精な人にやさしいブログとなりました♪

数字も表示させたいよ!

カテゴリの中の記事数も表示させたいという方は以下をご使用ください。

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){
    var lists = $('.hatena-module-category .hatena-urllist li a').map(function(){
        return $('<li><a href="' + $(this).attr('href') + '">' + $(this).text() + '</a></li>')[0];
    });
    $('#global ul').append(lists);
});
</script>

上のコードから.replace(/ \(\d+\)/, '')を削っただけです。

JavaScriptやjQueryを学ぶと色々なことができるようになります

今回のカスタマイズにはJavaScriptjQueryという技術を使用しています。これらを学ぶことで今回のような便利なことができるようになるので、とても便利です。

スクリプトを覚えると自動化できることが増えるので、めんどくさがりの人にこそいいかもしれません。

10日でおぼえるJavaScript入門教室 第3版 (10日でおぼえるシリーズ)

10日でおぼえるJavaScript入門教室 第3版 (10日でおぼえるシリーズ)

10日でおぼえるjQuery入門教室 第2版

10日でおぼえるjQuery入門教室 第2版

改訂版 Webデザイナーのための jQuery入門

改訂版 Webデザイナーのための jQuery入門