【はてなブログカスタマイズ】長くなったカテゴリーモジュールを開閉(折りたたみ)可能にする【CSS＋JavaScript】

概要

前回、CSSだけではてなブログのカテゴリーモジュールに開閉機能を付けるカスタマイズ記事を投稿しました。

【CSS】のみで長くなったカテゴリーモジュールを開閉可能にする【はてなブログカスタマイズ】 - IT the Best

今回の記事もカテゴリーモジュールに開閉機能を付けるカスタマイズになりますが、今回はCSSだけでなくCSS＋JavaScriptによるカスタマイズになります。

前回のCSSによる開閉機能は、CSSのマウスホバーをイベントとしていたためPC向けの機能としてカスタマイズをしました。今回は、クリック(タッチデバイスの場合タップ)をイベントに動作させるためスマホ(タッチデバイス)にも同様な動作が処理されるものになります。

前置き

• カスタマイズにはjQueryを使用しています。
  

  jQueryの設定方法 - jQueryを使用するまでの手順 |【jQuery】 - IT the Best

• はてなカテゴリーモジュールのHTMLコード(おそらくはてなブログ全体で同一)
  

  <div class="hatena-module hatena-module-category">
      <div class="hatena-module-title">
          カテゴリー
      </div>
      <div class="hatena-module-body">
          <ul class="hatena-urllist">
          </ul>
      </div>
  </div>

ステップ１

カテゴリーリンクのリストを非表示にする。(初期表示として非表示にする場合)

.hatena-module.hatena-module-category .hatena-module-body{
    display: none;
}

ステップ２

カテゴリーモジュールのタイトルクリックでボディ(カテゴリーリンクリスト)を表示させる。(開閉機能)

<script>
    $(".hatena-module.hatena-module-category .hatena-module-title").on("click",function(event){
        var body=$(".hatena-module.hatena-module-category .hatena-module-body")
        $(body).slideToggle()
})
</script>

ここまでで開閉機能自体は完成です。ここからは、プラスαの機能で使い勝手を良くするカスタマイズです。

ステップ３

マウスカーソルをポインターにする。

.hatena-module.hatena-module-category .hatena-module-title{
    cursor: pointer;
}

ステップ４

トグルアイコン(開閉アイコン)を追加する。

.hatena-module.hatena-module-category .hatena-module-title::before{
    content: "";
    cursor: pointer;
    float: right;
    margin-top: 3px;
    color: gray;
    opacity: .3;
    width: 10px;
    height: 10px;
    border-left: solid 3px currentColor;
    border-bottom: solid 3px currentColor;
    position: relative;
    transition: all .3s;
    -webkit-transition: all .3s;
    right: 5px;
    top: 11px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.hatena-module.hatena-module-category .hatena-module-title.closed-body::before{
    top: 5px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<script>
    $(".hatena-module.hatena-module-category .hatena-module-title").addClass("closed-body"); // bodyが非表示の場合
</script>

ステップ５

トグルアイコンの切り替え(追加/削除)

<script>
    $(".hatena-module.hatena-module-category .hatena-module-title").toggleClass("closed-body"); // クラスの追加または削除
</script>

コード

ステップ１から５をまとめた全体のコード

<style>
    .hatena-module.hatena-module-category .hatena-module-body {
        display: none;
    }
    .hatena-module.hatena-module-category .hatena-module-title{
        cursor: pointer;
    }
    .hatena-module.hatena-module-category .hatena-module-title::before{
        content: "";
        cursor: pointer;
        float: right;
        margin-top: 3px;
        color: gray;
        opacity: .3;
        width: 10px;
        height: 10px;
        border-left: solid 3px currentColor;
        border-bottom: solid 3px currentColor;
        position: relative;
        transition: all .3s;
        -webkit-transition: all .3s;
        right: 5px;
        top: 11px;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    .hatena-module.hatena-module-category .hatena-module-title.closed-body::before{
        top: 5px;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
</style>
<script>
        $(".hatena-module.hatena-module-category .hatena-module-title").addClass("closed-body"); // bodyが非表示の場合
        $(".hatena-module.hatena-module-category .hatena-module-title").on("click", function (event) {
            var body = $(".hatena-module.hatena-module-category>.hatena-module-body");
            $(body).slideToggle();
            $(".hatena-module.hatena-module-category .hatena-module-title").toggleClass("closed-body"); // クラスの追加または削除
        });
</script>

おすすめのはてなブログカスタマイズ情報

www.it-the-best.com

www.it-the-best.com

www.it-the-best.com

www.it-the-best.com