水瓶座列車

f:id:aquarius999:20181020114753j:plain

ブログの知識がゼロの状態からブログを始めた時、見た目をカスタマイズする一番最初に手をつかやすいのは、HTML/CSSを駆使してデザインすることから始めると思います。

そして、慣れてきたら次の段階でjavascriptやjQueryを使うと、動きのあるメニューなど、更に見た目を良くすることができます。

ブログの見た目は、読み手に気持ちよく読んでもらいたいという思いと、あとはもう自己満足の域ですね。

ここでは、はてなブログでのjQueryの使い方を備忘も兼ねて書いていきます。

jQueryを使うための準備
HTMLの書き方
CSSの書き方
jQueryコードの書き方
実際の動作
まとめ

１．jQueryを使うための準備

まずjQueryとは何かというと、世界でよく使われているJavaScriptライブラリです。

jQueryを利用する方法は、以下の2種類があります。

・CDNを利用する。

・公式サイトからファイルをダウンロードして、それをサイト内に設置する。

はてなブログでjQueryを使うためには、CDNを利用します。

CDNとは、Contents Derivery Networkの略語で、訳すとコンテンツ配信ネットワークといいます。

jQueryをホストしているCDNはいくつかありますが、ここでは、Googleのものを使います。

使い方は以下のコードをはてなブログのheaderに記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

記述場所は、

「設定」ー＞「詳細設定」ー＞「検索エンジン最適化」ー＞「headに要素を追加」

にします。

基本的な設定はこれだけ。

そして、jQueryを使ったスクリプトもheaderに記述していくのですが、これは後で説明します。

２．HTMLの書き方

HTMLの書き方は、極力各タグにクラス名を付けて書きます。

理由は、アコーディオンメニュー用にulタグやliタグを使用したいので、全てのulタグやliタグに反映されないようにするためです。

アコーディオンメニューのHTMLの書き方の例は、下記のような感じです。

<ul class="navi">
    <li>
        <div class="category">ファッション</div>
        <ul class="menu">
            <li><a href="11">アウター</a></li>
            <li><a href="12">インナー</a></li>
            <li><a href="13">ボトム</a></li>
            <li><a href="14">バッグ</a></li>
            <li><a href="15">靴</a></li>
            <li><a href="16">アクセサリー</a></li>
        </ul>
    </li>
    <li>
        <div class="category">家具・インテリア</div>
        <ul class="menu">
            <li><a href="21">収納家具</a></li>
            <li><a href="22">ソファ</a></li>
            <li><a href="23">ベッド</a></li>
            <li><a href="24">テーブル</a></li>
            <li><a href="25">チェア</a></li>
            <li><a href="26">照明</a></li>
        </ul>
    </li>
    <li>
        <div class="category">ステーショナリー</div>
        <ul class="menu">
            <li><a href="31">ペン・鉛筆</a></li>
            <li><a href="32">ノート</a></li>
            <li><a href="33">ファイル</a></li>
            <li><a href="34">付箋</a></li>
        </ul>
    </li>
    <li>
        <div class="category">生活雑貨</div>
        <ul class="menu">
            <li><a href="41">キッチン用品</a></li>
            <li><a href="42">掃除・洗濯用品</a></li>
            <li><a href="43">バス・トイレ用品</a></li>
            <li><a href="44">その他</a></li>
        </ul>
    </li>
</ul>

これを普通にブラウザで見ると全項目が開いた状態になっていますが、後で説明するjQueryのスクリプトを書くことで、divタグ以外は、すべて隠れた状態になります。

３．CSSの書き方

はてなブログでのCSSを書く場所は、

「デザイン」⇒「カスタマイズ(スパナマーク)」⇒「デザインCSS」

に追加します。

CSSの書き方の例は、下記のような感じです。

ul.navi { width:220px; margin:0px; }
ul.menu li:hover { background-color: #ffccff; }
ul.navi, ul.menu { margin: 0; padding: 0; list-style: none; }
div.category { 
    margin-top:5px;
    height: 40px;
    line-height: 40px;
    background-color: #B9DDE8;
}
div.category:hover { background-color: #ffccff; }
ul.menu a { 
    display:block;
    height: 35px;
    line-height: 35px;
    color: #164158;
}
ul.menu li { background-color: #F2F9FB; }

幅や色などは、自由に設定してみてください。

４．jQueryコードの書き方

アコーディオンメニューとし動作させるスクリプトを書いていきます。

スクリプトの書き方の例は、下記のような感じです。

<script type="text/javascript">
    $(function(){ 
        $("ul.menu").hide();
        $("div.category").click(function(){ 
            $("ul.menu").hide();
            if($("+ul",this).css("display")=="none"){ 
                $("+ul",this).show();
            }
        });
    });
</script>

jQueryの基本は説明しませんが、スクリプトについて簡単に説明します。

3行目は、CSSで書いたulタグのmenuクラスで囲まれたアイテムを全部非表示にします。

4行目は、CSSで書いたdivタグのcategoryクラスの項目をマウスでクリックした時の動作を行います。

5行目は、表示しているulタグのmenuクラスを非表示にします。

6、７行目は、クリックされたdivタグのcategoryクラスのulタグが非表示状態であるなら、表示にします。

このような感じで、JavaScriptよりも短いコードで記述することができます。

記述場所は、１項で記述した場所と同じで、

「設定」ー＞「詳細設定」ー＞「検索エンジン最適化」ー＞「headに要素を追加」

にします。