Bloggerでラベルを省略表示する方法

2021/05/23

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

通常の設定ではラベルを省略表示させることができないので、HTMLを編集することになります。以下で詳しい手順をご紹介。違う仕様のものを2種類用意しているので、お好きなほうを選んでください。

表示タイプ①

最大表示数以上は「etc..」となり表示されないタイプ。導入イメージは画像の通りです。

では、早速導入方法を見ていきましょう。

テーマのバックアップ

まず、バックアップを取っておきましょう。

管理画面から「テーマ」→「バックアップ」を選択し、ダウンロードしてファイルを保存します。

ラベル表示部分の変更

ソースコード内で以下の箇所を探します。Ctrl+Fで「label1」と検索すると見つけやすいです。

見つけたら、<b:if cond='data:display == "list"'> ~ <b:else/>の部分を以下のコードと置き換えてください。

<b:if cond='data:display == "list"'>
  <ul>
    <b:loop index='i' values='data:labels' var='label'>
      <b:if cond='data:i &lt; 5'> <!-- 最大表示数 -->
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:if>
    </b:loop>
    <li>etc..</li>
  </ul>
<b:else/>

※ラベル設定が「リスト」の場合

<b:if cond='data:i < 5'>の部分はラベルの最大表示数です。本来は「data:i < 5」ですが、そのままだとエラーになってしまうため文字コードに置き換えています。

「etc..」の部分はお好みでサイトマップへのリンクを付けたりしても良いかもしれません。

導入は以上で完了です。テーマを保存し、表示が変わっているか確認してみてください。

表示タイプ②

見た目は①と同じで展開表示できるタイプ。クリックで「etc..」部分が消え、全ラベルが表示されます。

テーマのバックアップ

①と同じく、まずはバックアップ。

ラベル表示部分の変更

①と同じ箇所を探し、<b:if cond='data:display == "list"'> ~ <b:else/>の部分を以下のコードと置き換えます。

<b:if cond='data:display == "list"'>
  <ul>
    <b:loop index='i' values='data:labels' var='label'>
      <b:if cond='data:i &lt; 5'> <!-- 最大表示数 -->
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      <b:else/>
        <li class='li-hidden' style='display: none;'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>        
        </li>
      </b:if>
    </b:loop>
    <li id='li-btn' onclick='li_open()'>etc..</li>
  </ul>
  <script>
  //<![CDATA[
  function li_open() {
    document.getElementById('li-btn').style.display = 'none';
    const elms = document.querySelectorAll('.li-hidden');
    elms.forEach(elm => {
      elm.style.display = 'block';
    });
  }
  //]]>
  </script>
<b:else/>

※ラベル設定が「リスト」の場合

コードが①より長くなっていますが、基本的な構成自体は同じです。クリック時の処理を行うためにJavaScriptを使用しています。

「etc..」部分はそのままだと少しわかりにくいので、表記を変えたりボタン風にしてみたり、適宜調整して頂ければと思います。

表示 ⇔ 非表示を切り替えたい場合

「etc..」部分を消さずに表示と非表示を切り替えたい場合は、script部分を以下のコードに置き換えて頂ければOKです。

<script>
//<![CDATA[
function li_open() {
  const elms = document.querySelectorAll('.li-hidden');
  elms.forEach(elm => {
    if(elm.style.display == 'block') {
      elm.style.display = 'none';
    } else {
      elm.style.display = 'block';
    }
  });
}
//]]>
</script>