Bloggerのラベル・パンくず・ナビゲーション設定｜サイト構造を整える方法

Bloggerのラベル、パンくずリスト、ナビゲーション設定をテーマにしたアイキャッチ画像。サイト構造、カテゴリ、メニュー、記事への導線を図解している

※この記事は公開から時間が経っているため、現在の環境とは内容が異なる場合があります。

Bloggerで記事が増えてくると、記事そのものを書くよりも、読者が目的の記事にたどり着きやすい形に整えることが大事になります。

Bloggerには「ラベル」という記事分類の機能があります。

複数の切り口で記事を整理できるため、記事数が増えてきたときにも使いやすい機能です。

ただ、WordPressのカテゴリーのように、親カテゴリーと子カテゴリーをきれいに階層化する機能はありません。

そのため、Bloggerでサイト構造を整えたい場合は、ラベル名の付け方、サイドバーの見せ方、パンくずリスト、ナビゲーションメニューを組み合わせて調整していきます。

この記事では、Bloggerのラベルを階層のように見せる方法、パンくずリスト風の表示、QooQテーマのナビゲーション調整、HTMLとCSSで作るドロップダウンメニューをまとめて整理します。

サイト構造を整える流れ

最初に、ラベル・パンくず・ナビゲーションをどういう順番で考えるかを整理します。

Bloggerの導線を整えるときは、次の順番で考えると分かりやすくなります。

記事を分類するラベルを決める
ラベルを階層のように見せる
パンくずリスト風に現在地を見せる
上部ナビゲーションの項目を整える
必要に応じてドロップダウンメニューを追加する

ラベルは記事分類、パンくずは現在地、ナビゲーションは主要ページへの導線です。

それぞれの役割を分けて考えると、サイト全体を整理しやすくなります。

Bloggerのラベルは階層化できない

Bloggerのラベルは、1つの記事に複数つけられます。

そのため、「Blogger」「Blogger設定」「Bloggerカスタマイズ」のように、複数の切り口で記事を分類できます。

ただし、Bloggerのラベルには、WordPressのカテゴリーのような親子関係はありません。

たとえば、

Blogger
  └ Blogger設定
  └ Bloggerテーマ
  └ Bloggerカスタマイズ

のように見せたくても、Blogger標準のラベル機能だけでは、きれいな階層として管理できません。

そこで、ラベル名の付け方やHTML表示を工夫して、階層のように見せていきます。

ラベルを階層のように見せる考え方

ラベルを階層のように見せるには、まずラベルの並び順を整えます。

Bloggerのラベルは、名前順に並びます。

そのため、思い通りの順番に並べたい場合は、ラベル名の先頭に番号を付ける方法があります。

たとえば、次のようにラベルを付けます。

050000 プログラミング
050010 Scratch
050020 Viscuit

070000 Blogger
070010 Blogger設定
070020 Bloggerテーマ
070030 Bloggerカスタマイズ

最初の3桁を大きな分類、後半の3桁を小さな分類として使うと、あとから間にラベルを追加しやすくなります。

ただ、このままだと画面にも番号が表示されます。

そのため、表示するときだけ先頭の番号を消して、ラベル名だけ見せるようにします。

パンくずリスト風に表示する

また、記事を選択したときに表示される「パンくずリスト」は、ユーザーに現在地を分かりやすく知らせられるうえ、SEO上の効果もあるということで、ぜひ導入したい機能です。

こちらもBloggerのデフォルト機能にはないので、一緒にカスタマイズして「パンくずリスト」っぽい表示にしていきます。

記事ページでは、記事につけたラベルを使って、パンくずリストのような表示にできます。

たとえば、記事に次の2つのラベルを付けます。

050000 プログラミング
050010 Scratch

表示時に先頭の番号を消せば、次のように見せられます。

プログラミング / Scratch

Bloggerのラベルは名前順に並ぶため、番号を付けておくと「親に見せたいラベル → 子に見せたいラベル」の順に表示しやすくなります。

簡単に済ませたい場合は、親に見せたいラベルに記号を付けて、先に並ぶようにする方法もあります。

〖プログラミング〗
Scratch

この場合、表示は次のようになります。

〖プログラミング〗 / Scratch

細かく整えるなら番号方式、手軽に試すなら記号方式、という考え方で使い分けるとよいです。

すべてのラベルを表示する

Bloggerのテーマによっては、記事ページで表示されるラベルが1つだけになっていることがあります。

複数のラベルを使ってパンくずのように見せたい場合は、記事についているラベルをすべて表示するようにHTMLを調整します。

HTMLを編集する前に、テーマのバックアップを保存しておきます。

Bloggerの管理画面で テーマ を開き、カスタマイズボタン横の▼ボタンをクリックします。

Bloggerのテーマ画面でテーマメニューを開く場所を赤枠で示したスクリーンショット

表示されたメニューからバックアップを選択してバックアップを保存します。

Bloggerのテーマ画面でバックアップなどのメニューを示したスクリーンショット

バックアップを取っておくと、編集後に表示が崩れた場合でも戻しやすくなります。

HTML編集を開く場合は、テーマのメニューから HTMLを編集 を選びます。

Bloggerのテーマ画面でHTMLを編集メニューを赤枠で示したスクリーンショット

テーマのHTMLから、次のような記述を探します。

<b:if cond='data:label.isLast == "true"'>
  ...
</b:if>

この条件があると、最後のラベルだけを表示するような動きになります。

複数のラベルを表示したい場合は、該当する条件部分をコメントアウトします。

<!-- <b:if cond='data:label.isLast == "true"'> -->
  ...
<!-- </b:if> -->

テーマによってHTMLの構造が違うため、保存前に変更箇所を確認します。

作業後は、記事ページで全てのラベルが並んで表示されるかを確認します。

サイドバーにラベルを階層表示する

次に、サイドバーのラベル表示を整えます。

Bloggerの標準ラベルウィジェットでもラベル一覧は表示できますが、階層のように見せたい場合は、表示方法を少し工夫します。

ラベルウィジェットを分けて表示する

まずは、ラベルウィジェットを複数使う簡単な方法です。

サイドバーにラベルが並ぶと、次のような表示になります。

Bloggerの レイアウト を開き、サイドバーで ガジェットを追加 を選びます。

Bloggerのレイアウト画面でサイドバーのガジェットを追加する場所を示したスクリーンショット

ガジェット一覧から ラベル を追加します。

Bloggerのガジェット追加画面でラベルガジェットを選ぶ場所を示したスクリーンショット

ラベル設定でタイトルを入力し、表示したいラベルだけを選びます。

Bloggerのラベル設定画面で表示するラベルを編集する場所を示したスクリーンショット

たとえば、「プログラミング」という見出しで、Scratch と Viscuit だけを表示します。

Bloggerのラベル一覧からScratchとViscuitを選んでいるスクリーンショット

同じ手順で「Blogger」などの分類も作ると、サイドバー上では階層に近い表示になります。

この方法は、HTMLをほとんど触らずに済むのがメリットです。

ただし、分類が増えるとウィジェット数も増えるため、規模が大きいブログでは少し管理しにくくなります。

HTML/JavaScriptガジェットでカテゴリを作る

もう少し自由に見せたい場合は、HTML/JavaScriptガジェットでカテゴリリストを作る方法もあります。

Bloggerの レイアウト から ガジェットを追加 を開き、HTML/JavaScript を選びます。

Bloggerのガジェット追加画面でHTML/JavaScriptガジェットを選ぶ場所を示したスクリーンショット

タイトルには「カテゴリ」などを入力し、コンテンツにHTMLを書きます。

<ul>
  <li><a href="#">階層1のラベル</a>
    <ul>
      <li style='margin-left:20px'><a href="#">階層2のラベル</a></li>
      <li style='margin-left:20px'><a href="#">階層2のラベル</a>
    </ul>
  </li>
  <li><a href="#">階層1のラベル</a>
    <ul>
      <li style='margin-left:20px'><a href="#">階層2のラベル</a></li>
      <li style='margin-left:20px'><a href="#">階層2のラベル</a></li>
      <li style='margin-left:20px'><a href="#">階層2のラベル</a></li>
    </ul>
  </li>
</ul>

# の部分には、ラベルページや固定ページのURLを入れます。
Bloggerのラベルページは、次のようなURLになります。

/search/label/Scratch

たとえば、次のように書けます。

<ul>
  <li><a href="/search/label/%E3%80%90%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%80%91">〖プログラミング〗</a>
    <ul>
      <li style="margin-left:20px"><a href="/search/label/Scratch">Scratch</a></li>
      <li style="margin-left:20px"><a href="/search/label/Viscuit">Viscuit</a></li>
    </ul>
  </li>
  <li><a href="/search/label/%E3%80%90Blogger%E3%80%91">〖Blogger〗</a>
    <ul>
      <li style="margin-left:20px"><a href="/search/label/Blogger%E8%A8%AD%E5%AE%9A">Blogger設定</a></li>
      <li style="margin-left:20px"><a href="/search/label/Blogger%E3%83%86%E3%83%BC%E3%83%9E">Bloggerテーマ</a></li>
      <li style="margin-left:20px"><a href="/search/label/Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">Bloggerカスタマイズ</a></li>
    </ul>
  </li>
</ul>

保存すると、サイドバーにカテゴリリストが表示されます。

HTML/JavaScriptガジェットで作成したカテゴリリストがサイドバーに表示されている例

この方法は、表示名やリンク先を自由に決められるのがメリットです。

固定ページへのリンクとラベルページへのリンクを混ぜることもできます。

番号付きラベルから番号を消して表示する

番号付きラベルを使う場合は、画面に表示するときだけ番号を消します。

ここでは、050000 プログラミング のように、先頭6桁の番号と半角スペースを付ける前提で説明します。

この場合、表示したい文字は8文字目以降になるため、JavaScriptの substr(7) を使っています。

番号の桁数を変えた場合は、substr(7) の数字も合わせて変更してください。

記事タイトル付近のラベル表示

次のようなラベル表示を探します。

<a class='single-header-category-item' expr:href='data:label.url'><data:label.name/></a>

番号を消して表示する場合は、次のように変更します。

<a class='single-header-category-item' expr:href='data:label.url'>
  <script>document.currentScript.insertAdjacentHTML('beforebegin',"<data:label.name/>".substr(7));</script>
</a>

記事下のラベル表示

記事下のラベルも同じように変更します。

<a class='single-footer-category-item' expr:href='data:label.url'><data:label.name/><data:postLabelsLabel/></a>

次のように置き換えます。

<a class='single-footer-category-item' expr:href='data:label.url'>
  <script>document.currentScript.insertAdjacentHTML('beforebegin',"<data:label.name/>".substr(7));</script><data:postLabelsLabel/>
</a>

パンくずリストのラベル表示

パンくずリストでラベル名を表示している部分も、番号を消して表示します。

<span itemprop='name'><data:label.name/></span>

次のように変更します。

<span itemprop='name'>
  <script>document.currentScript.insertAdjacentHTML('beforebegin',"<data:label.name/>".substr(7));</script>
</span>

記事一覧画面のラベル表示

記事一覧でラベル名が表示される部分も、必要に応じて変更します。

<span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>

次のように置き換えます。

<span class='list-item-category-item'>
  <a expr:href='data:label.url'>
    <script>document.currentScript.insertAdjacentHTML('beforebegin',"<data:label.name/>".substr(7));</script>
  </a>
</span>

表示位置によって同じラベル名が複数箇所で使われているため、すべてを一度に変更しようとせず、1箇所ずつ表示を確認しながら進めます。

サイドバーのラベルウィジェットを番号なしで表示する

サイドバーのラベルウィジェットでも、番号を消して表示できます。

ラベル名を整形するための関数を、ラベルウィジェットの表示部分の前に追加します。

<script type='text/javascript'>
    var ldir = "<data:blog.languageDirection/>";
    var fnum = "<data:showFreqNumbers/>";
    //<![CDATA[
    // ラベルリストのHTMLを取得する
    function getLabelList(lname, lcnt = 0, lurl = '') {
 
      var retStr;
 
      // 第1階層のラベル？
      if(lname.substring(3,6) == '000') {
        retStr = "<li>";
 
      // 第2階層のラベルは、字下げして表示
      } else {
        retStr = "<li style='margin-left:20px'>";
      }
 
      // URLが指定されている？
      if(lurl.length == 0) {
        // ラベル名は番号を除いた7文字目からの名前のみを表示
        retStr += "<span expr:dir=" + ldir + ">"+ lname.substring(7) + "</span>";
      } else {
        // URLが指定されていれば、リンクを設定　
        retStr += "<a dir=" + ldir + " href='"+lurl+"'>"+ lname.substring(7) + "</a>";
      }
 
      // 投稿数を表示？
      if(fnum == 'true') {
        retStr += "<span class='label-count' dir='ltr'>("+lcnt+")</span>";
      }
      retStr += "</li>";
      return retStr;
    }
    // ]]>
  </script>

第1階層かどうかは、次の部分で判定しています。

if(lname.substring(3,6) == '000') {

050000 プログラミング のように、後半3桁が 000 のラベルを親ラベルとして扱う考え方です。

ラベルの命名ルールを変える場合は、この判定も合わせて変更します。

ナビゲーションの項目を変更する

次に、上部ナビゲーションを整えます。

Bloggerテーマ「QooQ」では、上部にナビゲーションバーが表示されます。
ここに表示する項目を整理しておくと、主要ページへ移動しやすくなります。

Bloggerの レイアウト を開き、ナビゲーションの編集を選びます。

Bloggerのレイアウト画面でナビゲーションの編集を開く場所を示したスクリーンショット

ページリストの設定画面で、表示したいページを選びます。

ここでは、サイトマップ・利用規約・お問い合わせなど、上部に置きたいページを選択します。

Bloggerのページリスト設定画面でナビゲーションに表示するページを選んでいるスクリーンショット

ナビゲーションは、読者がよく使うページに絞ると見やすくなります。

全部のリンクを上部に置こうとすると、かえって分かりにくくなるので、主要なページだけにします。

ナビゲーションの表示位置を調整する

QooQのナビゲーションを右寄せにしたい場合は、CSSを調整します。

テーマのHTMLでナビゲーション周りのCSSを探します。

/****************************************
    ナビゲーション
*****************************************/
#navigation{
  padding: .2em 0 .2em 0;
  font-size: 1.3rem;
  background: $(brand.subcolor);
  color: $(brand.subfont);
}

#navigation-content ul{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

justify-content: flex-end; を追加すると、ナビゲーションの項目を右側に寄せられます。

文字が大きく感じる場合は、font-size も調整します。

保存したら、実際の表示を確認します。

ドロップダウンメニューを追加する

記事が増えてくると、上部メニューにサブメニューを出したくなることがあります。

ここでは、JavaScriptを使わず、HTMLとCSSだけでマウスオーバー時にサブメニューを表示する方法を使います。

スマホなど画面幅が狭い場合は、サブメニューを表示させないようにしておくと扱いやすくなります。

ドロップダウンメニュー用のCSSを追加する

テーマのHTMLを開き、<b:skin><![CDATA[ と ]]></b:skin> の間にCSSを追加します。

/****************************************
        メニュー
*****************************************/
ul.menu  {
  display: flex;
  justify-content: center;
  padding: .2em 0 .2em 0;
  background: $(brand.subcolor);
  font-size: 1.5rem;
  font-weight: bold;
  z-index: 1;
  position: relative;
}

ul.menu a {
  text-decoration: none;
  color: $(brand.subfont);
}

ul.menu li {
  list-style: none;
  line-height: 40px;
  height: 42px;
  width: 180px;
  background: #45b014;
}

ul.menu li:hover ul {
  display: block;
}

ul.menu ul {
  display: none;
  padding: 0;
}

ul.menu ul li {
  padding-left: 5px;
}

@media ( max-width : 768px ) {
  ul.menu  {
    flex-wrap: wrap;
    font-size: 1.2rem;
    white-space: nowrap;
  }

  ul.menu li {
    line-height: 30px;
    height: 30px;
    width: 110px;
  }

  ul.menu li:hover ul {
    display: none;
  }
}

ポイントは、次の2つです。

ul.menu ul {
  display: none;
}

でサブメニューを非表示にし、

ul.menu li:hover ul {
  display: block;
}

で、マウスをのせたときだけ表示します。

メニュー用のセクションを追加する

次に、テーマのHTML内にメニュー用のセクションを追加します。

記事表示部分の前に、次のような記述を入れます。

<div id='menu'>
  <b:section id='メニュー'/>
</div>

QooQ list版を使っている場合など、テーマによって記事表示部分のHTMLが少し違う場合があります。

id='main' や class='width-100' など、記事本文の手前にある位置を探して、その前に追加します。

HTML/JavaScriptガジェットにメニューを書く

Bloggerの レイアウト を開くと、追加したメニューセクションが表示されます。

Bloggerのレイアウト画面でメニューセクションにガジェットを追加する場所を示したスクリーンショット

メニューセクションに HTML/JavaScript ガジェットを追加します。

タイトルは空欄のまま、コンテンツにメニュー用のHTMLを入力します。

<nav>
  <ul class="menu">
    <li><a href="#">メニュー1</a>
      <ul>
        <li><a href="#">サブメニュー1</a></li>
        <li><a href="#">サブメニュー2</a></li>
        <li><a href="#">サブメニュー3</a></li>
      </ul>
    </li>
    <li><a href="#">メニュー2</a>
      <ul>
        <li><a href="#">サブメニュー1</a></li>
        <li><a href="#">サブメニュー2</a></li>
        <li><a href="#">サブメニュー3</a></li>
      </ul>
    </li>
  </ul>
</nav>

# の部分には、リンク先のURLを入れます。

ラベルページへリンクする場合は、ラベル名のリンクをコピーして使います。
内部リンクなら、https://example.blogspot.com の部分を省いて、/search/label/... から始めても使えます。

たとえば、次のように書けます。

<nav>
  <ul class="menu">
    <li><a href="/p/index_12.html">ラズベリーパイ</a>
      <ul>
        <li><a href="/search/label/010010%20%E3%83%A9%E3%82%BA%E3%83%99%E3%83%AA%E3%83%BC%E3%83%91%E3%82%A4%E5%85%A5%E9%96%80">ラズベリーパイ入門</a></li>
        <li><a href="/search/label/010020%20%E3%83%A9%E3%82%BA%E3%83%99%E3%83%AA%E3%83%BC%E3%83%91%E3%82%A4%E8%A8%AD%E5%AE%9A">ラズベリーパイ設定</a></li>
        <li><a href="/search/label/010030%20%E9%9B%BB%E5%AD%90%E5%B7%A5%E4%BD%9C">電子工作</a></li>
      </ul>
    </li>
    <li><a href="/search/label/050000%20%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">プログラミング</a>
      <ul>
        <li><a href="/search/label/050070%20Scratch">Scratch</a></li>
        <li><a href="/search/label/050080%20Viscuit">Viscuit</a></li>
      </ul>
    </li>
    <li><a href="/p/blogger.html">Blogger</a>
      <ul>
        <li><a href="/search/label/070010%20Blogger%E8%A8%AD%E5%AE%9A">Blogger設定</a></li>
        <li><a href="/search/label/070020%20Blogger%E3%83%86%E3%83%BC%E3%83%9E">Bloggerテーマ</a></li>
        <li><a href="/search/label/070030%20Blogger%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA">Bloggerカスタマイズ</a></li>
      </ul>
    </li>
    <li><a href="/search/label/080000%20%E3%81%9D%E3%81%AE%E4%BB%96">その他</a></li>
    <li><a href="/p/profile.html">プロフィール</a></li>
  </ul>
</nav>

保存すると、マウスをのせたときにサブメニューが表示されます。