【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額880円にする手順

【はてなブログ】5ステップで解説!カテゴリの階層化する方法

どうも、ブログ運営者のポチ(@sunrise_033)です。

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。
うさぎ
「はてなブログ」でカテゴリーの階層化ってどうやってやるんだろう?

そんな疑問をこの記事で解決します。

この記事では、はてなブログでカテゴリの階層化する方法を画像付きで解説していきたいと思います。

カテゴリを階層化することで、読者がこのサイトはどんな内容の記事があるのかが分かりやすくなります。

読者へのわかりやすさは直接的なPVアップにもつながるのでぜひ取り入れていきたいものです。

完成形はこんな感じになります。

f:id:sanrisesansan:20200809155239j:plain

やり方は下記の通りです。

・パンくずリストを作成
・カテゴリ作成とブログパーツで作れる

この作業で作ることができますので、詳しく見ていきます。

目次

「カテゴリの階層化」とは

ブログ記事はカテゴリによってグループ化されています。

例をあげると、僕の場合は「ラーメン」ネタの記事には「ラーメン」というカテゴリでグループ化しています。

f:id:sanrisesansan:20200809160201j:plain

カテゴリでグループ化していれば、内部リンクを貼り、よりカテゴリ内で閲覧されやすくすることもできます。

はてなブログでカテゴリをつける方法は、

記事作成ページから→「カテゴリ」で作成することができます。

で、カテゴリの階層化とは、

f:id:sanrisesansan:20200809155908j:plain

このように「ラーメン」のカテゴリの中で更に詳細化したカテゴリのことを指します。

これを子カテゴリともいいます。

カテゴリ内で細分化することにより、読者にとっても分かりやすく親切な構成にすることができます。

はてなブログではカテゴリの階層化に対応していない

記事がある程度、増えていくとカテゴリの階層化を検討する機会も出てきます。

しかし、はてなブログでは「カテゴリの階層化」に対応していません。

なので、ブログパーツを使って階層化をしていきます。

【簡単5ステップ】カテゴリの階層化する方法

下記のサイトを参考にさせていただきました。

blog.wackwack.net

コードについてはこちらからコピペしてみてください。ではやり方を見ていきます。下記が流れになります。

1.パンくずリストを表示する

2.フッタのタイトル下にhtmlコードを貼り付ける

3.ヘッダのタイトル下にスタイルシートを貼り付ける

4.カテゴリを指定の方法で登録をする

5.カテゴリをアルファベット順にする

それぞれ見ていきます。

1.パンくずリストを表示する

はてなブログの管理画面から「デザイン」「カスタマイズ」「記事」と進みます。下の方にある「パンくずりリスト」にチェックをいれて「変更を保存する」を保存します。

f:id:sanrisesansan:20200809161750j:plain

2.フッタのタイトル下にhtmlコードを貼り付ける

はてなブログの管理画面から「デザイン」→「カスタマイズ」→「フッタ」とすすみます。

下にHTMLコードを貼り付けるところがありますので、貼り付けて「変更を保存」します。

f:id:sanrisesansan:20200809161842j:plain

HTMLコードは上記に載せたサイトさんに書いてありますが、一応のせていきます。

<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>

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

3.ヘッダのタイトル下にスタイルシートを貼り付ける

管理画面から「デザイン」「カスタマイズ」「ヘッダ」とすすみます。

f:id:sanrisesansan:20200809162316j:plain

この中の「タイトル下」にスタイルシートを貼り付けて「変更を保存」します。
こちらも上記の記事サイトにスタイルシートのコードは載っていますが、載せていきますね。

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

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

4.カテゴリを指定の方法で登録をする

次にカテゴリを指定の方法に変更していきます。指定の方法は2つで、

・「親カテゴリ-子カテゴリ」と組む
・親カテゴリを必ず設定する

というものです。僕の例をあげると、

f:id:sanrisesansan:20200809162514j:plain

こんな感じです。親カテゴリを「親カテゴリ-子カテゴリ」の前に入れることで、階層化することができます。(「-」は半角です。)

5.カテゴリをアルファベット順にする

さいごに、管理画面から「デザイン」「カスタマイズ」「サイドバー」から「カテゴリ」で編集ページに入ります。

f:id:sanrisesansan:20200809161923j:plain

この中にある「並び替え順」を「アルファベット順」に変更→「適用」して完了です。

完成すると、

f:id:sanrisesansan:20200809162737j:plain

このように階層化されるようになりました。

まとめ

この作業は、カテゴリ分けがされていれば簡単にできる作業です。
記事数が少ない時の方が作業がスムーズですので、せひ早めの活用してみてください。

NEXT→サイドバー「検索ボックス」のカスタマイズする

最後まで読んでいただき、ありがとうございます。

あわせて読みたい
はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

 

ポチ
この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

↓「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

スマホ代が高いと感じていませんか?ワイモバイルはスマホ料金を節約したい人にぴったりです。

ギガ繰越しもできるので、余ったデータも無駄になりません。

\ 今ならオンラインストアでお得なキャンペーンも実施中/

\ オンライン機種変更、徹底解説/

コメント

コメントする

目次