【Bloggerカスタマイズ】階層化したラベル（カテゴリ）を自由な順番に並べ替える方法

 ※ここのやり方は自己責任となります。

いじってめちゃくちゃになる可能性もありますので、どうしてもやってみたい！という人は自己責任が分かる人のみやってください。

（元をHTML編集から全てを選択してテキスト等にコピーしておく等）

なお、かなり前から使ってるラベルの階層なのですが、大本の人の記事がどれだったか忘れてしまいました。申し訳ありません。

たぶんですが

タイトルは今のところないというサイトの、とってもピンチさんです。

では本題に入ります。

Bloggerのラベルウィジェットは、標準では「五十音順」か「使用頻度順」でしか並びません。

特にスラッシュ（/）を使ってラベルを階層化している場合、思うような順番に並ばず困っている方も多いのではないでしょうか。

今回は階層化スクリプトを活かしたまま、ラベル名の先頭に数字を付けることで自由な並び順を実現し、かつブログ上の表示からはその数字を消すというカスタマイズ方法を解説します。

（なお、この方法はGeminiに聞いて作ったコードとなっています）

1. ラベルの並び順の仕組みと準備

例えば、「PCパーツ」という親ラベルの中に、「CPU」「HDD」「USB」という子ラベルがある場合、標準の五十音順では次のように並んでしまいます。

CPU

HDD

USB

これを自分の好きな順番（例：HDD → USB → CPU）に並べたい場合、ラベル名の先頭に「01_」「02_」といった数字を振ることで、Bloggerの五十音順ルールを利用して並びを強制的に制御します。

設定の確認

Blogger管理画面の「レイアウト」から「カテゴリ（ラベル）」ウィジェットの設定を開き、並び替えが「五十音順」になっていることを確認してください。

2. ラベル名に数字を一括割り当てする方法

記事が大量にある場合、1回ずつ記事を開いてラベルを書き換えるのは大変です。

以下の手順で一括編集を行いましょう。

対象ラベルの記事を抽出

管理画面の「投稿」一覧で、上部にある「ラベルマーク（フィルタ）」をクリックし、変更したいラベル（例：USB）を選択して「適用」を押します。

全選択して管理

抽出された記事の一覧で、左上のチェックボックス（すべて選択）を押し、その右側にある「ラベルマーク」をクリックします。

新しいラベルを入力

ここで数字付きの新しいラベル名を入力します（階層の区切り「/」も忘れずに！）。

例：親ラベルは維持し、子ラベルだけ順番を指定する場合

PCパーツ/01_HDD

PCパーツ/02_USB

PCパーツ/03_CPU

古いラベルを外す

新しいラベルを入力し終えたら、元の（数字のない）ラベルのチェックを外して「適用」を押します。

画面が更新されない場合はブラウザの更新ボタンを押して確認してください。

3. HTMLを編集して表示から数字を消す

このままだとブログ上にも「01_HDD」と数字が表示されてしまいます。

これをスクリプトで自動的に隠す設定を行います。

Blogger管理画面の「テーマ」を開き、「カスタマイズ」横のプルダウンから「HTMLを編集」を選択します。

検索機能（Ctrl+F）を使い、以下のコードを見つけて書き換えます。

A箇所の書き換え

【書き換え前】

$(this).children('a').text(work[work.length-1]);

【書き換え後】

$(this).children('a').text(work[work.length-1].replace(/^\d+_/,""));

B箇所の書き換え

【書き換え前】

$(this).children('span:first').text(work[work.length-1]);

【書き換え後】

$(this).children('span:first').text(work[work.length-1].replace(/^\d+_/,""));

右上の保存アイコンを押して保存します。

4. 動作確認

ブログを表示してサイドバーのカテゴリを確認してみましょう。

並び順は指定した数字通り（HDD → USB → CPU）になりつつ、表示上は「01_」などの数字が消えていれば成功です！

この方法を使えば今後ラベルの項目が増えても、数字を調整するだけでいつでも理想の並び順を維持することができます。

以上です、いかがだったでしょうか？

少しでも皆さんのお役に立てれば幸いです(^ヮ^)

元からラベルに数字が入ってる人は…Geminiに解決方法をきいてください。

試しにその場合どうすればいいのか？というのを聞いてみたところ、結構専門知識なものが出てきて私自身が分からなかった為、コードを載せるのをやめました。