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

都内で働くSEの技術的なひとりごと

都内でサラリーマンやってます。マイクロソフト系(たまに、OSS系などマイクロソフト以外の技術も...)の技術的なことについて書いています。日々の仕事の中で、気になったことを技術要素関係なく気まぐれに選んでいるので記事内容は開発言語、インフラ等ばらばらです。なお、当ブログで発信、発言は私個人のものであり、所属する組織、企業、団体等とは何のかかわりもございません。ブログの内容もきちんと検証して使用してください。よろしくお願いします♪

jQuery を使って少しブログを変更してみた

 今日は一番したの子が熱を出したため、家でお留守番。関東はぱっとしない天気です。
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>

 
 やっぱり、jQuery は最高ですね...UI は HTML ベースですよ、やっぱり。

※そうそう、プラグインはつかっちゃだめ....これ、おもしろそうだなぁ。買ってみようかな。

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート