YoFu’s Taravel Blog

バックパッカーのYoFuが旅情報を発信するブログです

はてなブログ カテゴリーの階層化・サブカテゴリーを作る方法

こんにちは。YoFuです。

今回は『はてなブログ カテゴリーの階層化・サブカテゴリーを作る方法』をお送りします。

記事が増えてきたら困るのが『カテゴリー分け』ではないでしょうか。

カテゴリーの数を増やしすぎると見にくくなる。かといって、一つのカテゴリーに記事を増やしすぎると過去の記事を見てもらえなくなる。カテゴリー分けは意外と難しいものです。

そんな人にオススメなのが、カテゴリーの階層化・サブカテゴリーの作成です。

階層化させることで、カテゴリーがぐっと見やすくなります。

簡単にできるので、試してみてください。以下で手順を解説していきます。

 

ちなみに、階層化させるとこんな感じになります。

カテゴリーの左側の三角をクリックすると、下にサブカテゴリーが出てきます。

f:id:YoFu:20201006220204p:plain

手順1.パンくずリストにチェックを入れる

ブログメニューから『デザイン』→『カスタマイズ』→『記事』の下の方にある『記事ページにパンくずリストを表示する』にチェックを入れます。

画像の赤い丸の部分です。

f:id:YoFu:20201006213934p:plain

手順2.ヘッダの設定

『ヘッダ』にある『タイトル下』という欄に↓↓を貼り付けてください。画像の赤い丸の部分です。

<link type="text/css" rel="stylesheet" href="https://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/>

この部分に広告コードや何かが記述してある人は、改行して新しい行に貼り付けてください。

f:id:YoFu:20201006214329p:plain

手順3.フッタの設定

『フッタ』に↓↓の3つを貼り付けてください。画像の赤い丸の部分です。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js"></script>
<script src="https://hatena.wackwack.net/v1.1/js/category_archive.min.js"></script>

この部分に広告コードや何かが記述してある人は、改行して新しい行に貼り付けてください。

f:id:YoFu:20201006214825p:plain

手順4.カテゴリーの表示設定

『サイドバー』→カテゴリの編集→並び替え順を『アルファベット順』に変更してください。

変更し終わったら、『適用』ボタンを押してください。

これでカテゴリーの階層化の準備完了です。今までの設定を保存してください。

次の手順5でサブカテゴリーを作成します。

f:id:YoFu:20201006215113p:plain

手順5.カテゴリーの階層化(サブカテゴリーの設定)

サブカテゴリーを作成したい記事の編集画面に移動します。

編集画面右側の『カテゴリー』をクリックすると、下の1枚目の画像が出ると思います。

まず、主となるカテゴリーを選択します。(下では、『旅を楽しくする知識』)

次に、サブカテゴリーを直接入力します。主カテゴリーを入力し、サブカテゴリーを入力。主カテゴリーとサブカテゴリーの間を半角のハイフンでつないでください。(下では、『旅を楽しくする知識-建築』)

完了したら、記事を公開して上手にできているか確認します。

下の2枚目の画像のように、サイドバーのカテゴリーに黒い三角形が出来ていれば成功です。黒い三角形をクリックすると入力したサブカテゴリーが開くようになっているはずです。

f:id:YoFu:20201006215551p:plain

f:id:YoFu:20201006220204p:plain

 

あとがき

いかがでしたでしょうか。けっこう簡単に出来たと思います。これで、カテゴリーの整理がぐっと楽になるはずです。

次回以降は、『手順5.サブカテゴリーの設定』だけ行えばオッケーです。