IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【はてなブログカスタマイズ】長くなったカテゴリーモジュールを開閉可能にする【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>

 

 

ステップ1

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

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

 

ステップ2

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

<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>

 

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

 

ステップ3

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

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

 

ステップ4

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

.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>

 

ステップ5

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

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

 

 

コード

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

<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>

 

 

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