ホーム » QooQ »

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

2022年06月04日更新

2022年01月29日公開

当サイトはアフィリエイト広告を使用しています

Blogger QooQ

サイドバーに表示しているラベルが多くなったので、表示・非表示の切り替えができるボタンを設置してみました。IB-Noteさんのこちらの記事から着想を得ました。ありがとうございます。

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

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

itblogger-note.blogspot.com

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

やってみたこと

ラベルはある程度表示する（指定の数）

残りはボタンで表示・非表示を切り替え

これを

こうする

HTML、JavaScript、CSSを設置します。HTMLを編集します。必ずバックアップを取ってから作業してください。設置場所とコードテンプレートQooQver.1.31を例にします。HTML設置場所[テーマ] - [カスタマイズ] - [HTMLの編集]で<b:if cond='data:display == "list"'>を検索

次に、</ul>の下に下記コードを設置<button id="sidebar__label-button" class="sidebar__label-button" type="button"></button>

<b:if cond='data:display == "list"'> <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='"label-size label-size-" + data:label.cssSize'>を検索

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

<span expr:class='"label-size label-size-" + 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>