jQuery を使って少しブログを変更してみた - 都内で働くSEの技術的なひとりごと / Technical soliloquy of System Engineer working in Tokyo

　今日は一番したの子が熱を出したため、家でお留守番。関東はぱっとしない天気です。
f:id:koogucc11:20160206140102j:plain

　最近、自分のブログを開くのが遅いので、ページレイアウトを見直しました。ベースのテーマは、Innocent です。
moonnote.hateblo.jp

　ナビゲーションバーを配置できるので、ページに配置しているものをメニュー化し、すっきりさせます。
moonnote.hateblo.jp

　こちらも使ってます。
moonnote.hateblo.jp

　ナビゲーションバーをベースにして作成しました。メニュー部分の html は下記の通り。(ざっくり書いたので、きれいじゃありません。)

<script>
$(function(){
    var lists = $('.hatena-module-category .hatena-urllist li a').map(function(){
        return $('<li><a href="' + $(this).attr('href') + '"' + 'target="_new">' + $(this).text().replace(/ \(\d+\)/, '') + '</a></li>')[0];
    });

    var otherlists = $.extend(true, [], lists);
    lists.splice(10, lists.length);
    $("categorylist").append(lists);
    otherlists.splice(0, 10);
    $("otherCategorylist").append(otherlists);
});
</script>

<nav class="main-navigation">
    <div class="menu-toggle">メニュー</div>
    <div class="main-navigation-inner">
        <ul>
            <li>
                <a href="http://ryuchan.hatenablog.com/">Home</a>
            </li>
            <li>
                <a href="http://ryuchan.hatenablog.com/about" target=”_new">Profile</a>
            </li>
            <li>
                <a href="http://ryuchan.hatenablog.com/archive" target=”_new">Archive</a>
            </li>
            <li>
                <a href="#" class="has-child">Category</a>
                <ul>
                    <categorylist />
                    <li>
                          <a href="#" class="has-child">other</a>
                          <ul>
                              <otherCategorylist />          
                          </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" class="has-child">Link</a>
                <ul>
                    <li><a href="http://blog.engineer-memo.com/" target=”_new”>SE の雑記</a></li>
                    <li><a href="http://odashinsuke.hatenablog.com/" target=”_new”>お だ のスペース</a></li>
                    <li><a href="http://www-atl.blog.so-net.ne.jp/" target=”_new”>SQLフォーマッターFor WEB</a></li>
                    <li><a href="http://koogucci.tumblr.com/" target=”_new”>都内で働くSEの技術的なリンク集</a></li>
                    <li><a href="http://blogs.msdn.com/b/jpsql/" target=”_new”>Microsoft SQL Server Japan Support Team Blog</a></li>
                    <li><a href="http://blogs.technet.com/b/dataplatforminsider/" target=”_new”>SQL Server Blog</a></li>
                    <li><a href="http://www.ctrlshift.net/jsonprettyprinter/" target=”_new”>JSON整形サービス</a></li>
                </ul>
            </li>
            <li>
                <a href="#" class="has-child">Follow on..</a>
                <ul>
                    <li><a href="https://feedly.com/i/subscription/feed/http://ryuchan.hatenablog.com/feed" target=”_new”>feedly</a></li>
                    <li><a href="https://www.tumblr.com/register/follow/koogucci" target=”_new”>Tumblr</a></li>
                    <li><a href="https://twitter.com/tonaidehataraku" target=”_new”>Twitter</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>