【Blogger】多くなってしまったラベルを隠す【Label widget】

サイドバーに表示しているラベルが多くなったので、表示・非表示の切り替えができるボタンを設置してみました。

IB-Noteさんのこちらの記事から着想を得ました。ありがとうございます。

Bloggerでラベルを省略表示する方法 | IB-Note

投稿しているとラベルが増えてきて、ちょっとスッキリさせたいなぁということはありませんか？そんなときは、省略表示をさせると便利です。

itblogger-note.blogspot.com

ラベルウィジェットの表示形式はリストです。（クラウドの場合の設置場所とJavaScriptは記事後半の補足に書きました）

やってみたこと

• ラベルはある程度表示する（指定の数）
• 残りはボタンで表示・非表示を切り替え

HTML、JavaScript、CSSを設置します。

HTMLを編集します。必ずバックアップを取ってから作業してください。

設置場所とコード

テンプレートQooQver.1.31を例にします。

HTML

設置場所

[テーマ] - [カスタマイズ] - [HTMLの編集]で

<b:if cond='data:display == &quot;list&quot;'>を検索

次に、</ul>の下に下記コードを設置

<button id="sidebar__label-button" class="sidebar__label-button" type="button"></button>

<b:if cond='data:display == &quot;list&quot;'>
  <ul>
  ..........
        </b:if>
      </li>
    </b:loop>
  </ul> ← これの下に設置
  <button id="sidebar__label-button" class="sidebar__label-button" type="button"></button>

idやclassの名前は適宜変更してください。

JavaScript

設置場所

</body>の上に設置してください。

<script>
(() => {
  // 表示するリストの数
  const num = 5;

  // 隠すリストを取得します
  const list = document.querySelectorAll(
    `.list-label-widget-content li:nth-child(n+${num + 1})`
  );

  // 隠すリストにclass label--hiddenを付与します
  list.forEach((element) => {
    element.classList.add("label--hidden");
  });

  // ボタンの要素を取得します
  const btn = document.getElementById("sidebar__label-button");

  /* リストの総数が指定した表示するリストの数より少ない場合
     ボタンを非表示にします */
  if (list.length == 0) {
    btn.style.display = "none";
  }

  // ボタン要素にテキストを追加します
  btn.textContent = "すべて見る";

  // テキストをそれぞれ代入します
  const openTxt = btn.textContent;
  const closeTxt = "とじる";

  /* ボタンが押されるたびに
     1.ボタンの文字を変更します
     2.class label--hiddenを除去したり付与したりします */

  btn.addEventListener("click", () => {
    if (btn.textContent == openTxt) {
      btn.textContent = closeTxt;
    } else {
      btn.textContent = openTxt;
    }

    list.forEach((element) => {
      element.classList.toggle("label--hidden");
    });
  });
})();
</script>

数字を変更すると、表示する（隠さない）ラベルの数を変えることができます。

const num = 5;

「すべて見る」「とじる」の文字を変更すると、ボタンの文字が変わります。

btn.textContent = "すべて見る";

const closeTxt = "とじる";

CSS

設置場所

よくわからなければ]]></b:skin>の上に設置してください。

CSSは一例です。

.label--hidden { /* ラベルを非表示にする */
  display: none;
}
.sidebar__label-button { /* ボタンのデザイン */
  display: block;
  cursor: pointer;
  background-color: #eee;
  padding: 0.3em;
  border: solid 1px #666;
  border-radius: 2px;
}

補足

ラベルウィジェットの表示形式[リスト]は<ul> <li>で出力されていました。

表示形式がクラウドの場合

<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>を検索

<b:include name='quickedit'/>の下にボタン要素のHTMLを設置

<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
..........
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/> ← これの下に設置
<button id="sidebar__label-button" class="sidebar__label-button" type="button"></button>

クラウドのときのJavaScript

<script>
(() => {
  // 表示するリストの数
  const num = 5;

  // 隠すリストを取得します
  const list = document.querySelectorAll(
    `.cloud-label-widget-content span:nth-child(n+${num + 1})`
  );

  // 隠すリストにclass label--hiddenを付与します
  list.forEach((element) => {
    element.classList.add("label--hidden");
  });

  // ボタンの要素を取得します
  const btn = document.getElementById("sidebar__label-button");

  /* リストの総数が指定した表示するリストの数より少ない場合
     ボタンを非表示にします */
  if (list.length == 0) {
    btn.style.display = "none";
  }

  // ボタン要素にテキストを追加します
  btn.textContent = "すべて見る";

  // テキストをそれぞれ代入します
  const openTxt = btn.textContent;
  const closeTxt = "とじる";

  /* ボタンが押されるたびに
     1.ボタンの文字を変更します
     2.class label--hiddenを除去したり付与したりします */

  btn.addEventListener("click", () => {
    if (btn.textContent == openTxt) {
      btn.textContent = closeTxt;
    } else {
      btn.textContent = openTxt;
    }

    list.forEach((element) => {
      element.classList.toggle("label--hidden");
    });
  });
})();
</script>

参考サイト

Bloggerでラベルを省略表示する方法 | IB-Note

テンプレートリテラル (テンプレート文字列) - JavaScript | MDN

本当に使えるnth-childまとめ - Qiita