はてなブログのカテゴリーを階層化 | はてなブログで階層化カテゴリーを作成する方法なら保護ねこおやじ

2023/6/5 記事公開

2023/6/22　手順を変更し引用元の記載を先頭に移動

本記事で紹介している「はてなブログ」におけるカテゴリーの階層化の手順及びHTMLコードは全面的に次の記事を参考にしています。

尚、参照元の記事には、

『2023年4月2日、サーバーからのスクリプト配信を停止しました。スクリプトファイルはGitHub上で提供しておりますので、引き続きご利用される方はこれまでの設定部分を修正してください。』

とお知らせがありました。このお知らせに基づいて、本記事も更新しました。

小さな星がほらひとつ「【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました」

はじめに

「保護ねこおやじのブログ」のカテゴリを見ると「定年後の収入」カテゴリが突出している。

ブログ技術　カテゴリ　階層化

このカテゴリには定年後に収入を得るためのいろいろな記事が雑多に詰まっている。

読者の方がカテゴリをクリックすると、そのカテゴリに含まれる記事の一覧が表示される。「定年後の収入」をクリックしたときに、２９もの記事が並ぶのはさすがに多すぎる。カテゴリを分けようかと考えたが、作成した記事を整理しなおすのも大変である。加えて単純にカテゴリを増やすのも芸がないと感じた。

カテゴリが階層化できればきれいに整理できそうなのであるが、残念ながらはてなブログのカテゴリには階層化する機能はなさそうである。今更ブログツールを変更できない。調査したところ、HTMLを編集することで階層化したカテゴリを実現できそうなことが分かった。

本記事でははてなブログのカテゴリを階層化する方法を紹介する。私と同様、はてなブログでカテゴリを階層化したいがどのようにすればよいかわからないという方は、是非この記事をご参照いただきたい。それほど技術に明るくない方にもわかりやすいように解説している。

はてなブログのカテゴリー

2月3日の記事　アフィリエイト奮闘記でブログを始めて以来、調査したブログ技術を記事で紹介している。始めた当初は記事が少なかったのであるが、少しずつ記事を増やしていくにつれ、ブログ全体が混沌としてきてしまった。

ある程度の記事数のあるブログは、カテゴリー分けを適切に行うことでSEO的に良い効果が期待できる、と聞きかじった私は、はてなブログの機能でカテゴリー分けを行い、分けたカテゴリの内容でグローバルメニューとパンくずリストを作成した。

カテゴリー作成

はてなブログの記事編集画面で、右側の「カテゴリーアイコン」をクリックし、カテゴリーボックスの中に分類したいカテゴリーを入力してEnterする。カテゴリーのリストに入力したカテゴリーが追加される。

一通りのカテゴリーを入力し終わったら、記事ごとの編集画面でカテゴリーを選択して記事を更新・公開すればそのカテゴリーに分類される。複数のカテゴリーに分類することも可能である。カテゴリーを削除したい場合はカテゴリーの右側に表示されている×をクリックすれば消える。

ブログ技術　カテゴリ　階層化

グローバルメニュー

カテゴリー分けを行ったら、読者さんが興味のある記事を検索しやすいように、グローバルメニューを作成する。

ブログ技術　カテゴリ　階層化

グローバルメニューとは記事の上部に表示されているメニューのことであり、分類したカテゴリーに加えて、「TOP」、「Profile & Privacy Policy」、「お問い合わせ」などを配置して目的のページに１クリックで遷移できるようにしたものである。

グローバルメニューを作成するためには、ヘッダに埋め込む必要がある。次の手順でヘッダの編集画面を表示する。

ダッシュボード⇒デザイン⇒カスタマイズ（レンチアイコン）⇒ヘッダ⇒ブログタイトル下

ブログ技術　カテゴリ　階層化

私のブログのHTMLを以下に共有するので、参考にしていただきたい。

<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='https://hogonekooyaji.hatenablog.com/entry/2025/01/01/102718'>TOP
<li><a href='https://hogonekooyaji.hatenablog.com/archive/category/くも膜下出血'>くも膜下出血</a></li>
<li><a href='https://hogonekooyaji.hatenablog.com/archive/category/定年後の収入'>定年後の収入</a></li>
<li><a href='https://hogonekooyaji.hatenablog.com/archive/category/健康・美容'>健康・美容</a></li>
<li><a href='https://hogonekooyaji.hatenablog.com/archive/category/ペット・生活'>ペット・生活</a></li>
<li><a href='https://hogonekooyaji.hatenablog.com/archive/category/旅行'>旅行</a></li>
<li><a href='https://hogonekooyaji.hatenablog.com/about'>Profile & Privacy Policy</a></li>
<li><a href='https://hogonekooyaji.hatenablog.com/entry/2022/12/31/000000'>お問い合わせ</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".menu-toggle").on("click", function() {
$(this).next().slideToggle();
});
});
$(window).resize(function(){
var win = $(window).width();
var p = 768;
if(win > p){
$("#menu").show();
} else {
$("#menu").hide();
}
});
</script>
<style>
.hatena-module-category ul li{display:block;padding:8px 0;border:0;list-style-type:none}.hatena-module-category ul li a{display:inline-block;padding:0;text-decoration:none;color:#000;border:none;transition:1s ease}.hatena-module-category ul li.on-border{border-top:1px solid #ddd}ul.hatena-breadcrumb-plus-child1{padding-left:30px}ul.hatena-breadcrumb-plus-child2{padding-left:15px}.hatena-breadcrumb-plus-toggle-button{cursor:pointer}
</style>

ヘッダと同じ並びに「デザインCSS」がある。ここに以下のCSSコードを貼り付けて、グローバルメニューのレイアウトを設定する。

/* <system section="theme" selected="sushiyuki"> */
@import "/css/theme/sushiyuki/sushiyuki.css";
/* </system> */

/* <system section="background" selected="default"> */
/* default */
/* </system> */
#menu {
position: relative;
width: 100%;
padding-left: 0px;
height: 40px;
background: #343838;/*グローバルメニュー背景色*/
}
.menu-inner{
width: 968px;
margin: 0 auto;
height: 40px;
}
#menu li {
list-style-type: none;
float: left;
height: 40px;
text-align: left;
}
#menu li a {
padding-left: 15px;
padding-right: 15px;
display: block;
color: #ffffff;/*グローバルメニュー文字色*/
font-size: 80%;
font-weight: bold;
line-height: 40px;
}
#menu li:hover a {
color: #00DFFC;
background: #ffffff;
transition: all .5s;
}
.menu-toggle{
display: none;

}
/*パソコン１カラム*/
@media screen and (max-width:968px){
.menu-inner{
width: 768px;
}
}
/*タブレット*/
@media screen and (max-width:768px){
#top-editarea{
height: initial;
background: #343838;/*MENU背景色*/
text-align: right;/*MENUの文字の位置*/
width: 100%;
}
.menu-toggle{
color: #ffffff;/*MENUの文字色*/
display: inline-block;
padding: 5px;
margin: 3px;
}
#menu {
width: 100%;
display: none;
height: initial;
padding: 0;
margin: 0;
}
.menu-inner{
width: 100%;
height: initial;
position: static;
margin: 0;
}
#menu li{
float: none;
height: 35px;
width: 100%;
list-style-type: none;
background: #00DFFC;/*リスト文字の背景色*/
margin: 0 auto;
text-align: left;/*リストの文字の位置*/
}
#menu li a {
height: initial;
color: #343838;/*リスト文字色*/
display: block;
}
#menu li:hover a{
color: initial;
background: initial;
}
}