ドムストの雑記帳

全然器用に生きられない私の真面目な事、勉強の事、お楽しみの事を書くために開設したブログです。

MENU

【はてなブログ】パンくずリストの階層化とカテゴリの一覧を表示する

スポンサーリンク

 みなさん、パンくずリストの階層化はしているでしょうか。

 

私の場合、アニメの各話レビューなど、1つの話題に対して、複数の記事を書くことも多いので、パンくずリストを以下のように階層化しています。

 

f:id:domustoX:20210310212815j:plain



 

このように、サブカテゴリを作製し、パンくずリストで表示すると、より近い話題のカテゴリの記事を集めることができ、訪問者の回遊にも役立ちます。

 

また、ブログの製作者視点で見ても、記事が整理されていることは、ブログの整理やリライトする記事の選定などのタイミングで役立つので、おススメです。

 

 基本的には以下の記事と同様の方法を利用しています。

 

blog.wackwack.net

 

ですが、当記事では、上記サイトではカバーされていないエラーについても補足して説明しております。

 

 

 

操作手順

1.パンくずリストの有効化

 

パンくずリストとは、タイトルの上部に表示されるカテゴリを辿って行った経路のことです。

f:id:domustoX:20210310151636p:plain

これを表示させることは、比較的古典的にSEO的に重要な要素とも言われています。

 

パンくずリストの表示は、はてなブログのダッシュボードから「デザイン」>「カスタマイズ」>「記事」の一番下の「記事ページにパンくずリストを表示する」にチェックを入れば完了です。

f:id:domustoX:20210310165607p:plain

 

2.カテゴリの階層化

 

f:id:domustoX:20210310151636p:plain

こちらの記事の様に、親カテゴリと子カテゴリを結び付けるには以下の様にカテゴリを設定します。

f:id:domustoX:20210310151508p:plain

1つ目に「親カテゴリ名」を、2つ目に「親カテゴリ名-子カテゴリ名」と(ハイフンを間に入れて)入力します。これで、親子カテゴリの設定はできました。

 

もし、親子孫カテゴリまで設定したい場合には「親カテゴリ名-子カテゴリ名-孫カテゴリ名」としたものを最後に入れればOKです。

f:id:domustoX:20210310170217p:plain

 

3.サイドバーにカテゴリリストを追加する

、はてなブログのダッシュボードの「デザイン」から「詳細」>「サイドバー」>「モジュールを追加」から「カテゴリー」を追加してください。

 

これによって、サイドバーにカテゴリー一覧が表示されます。

 

4.スクリプトを追加する

 

スクリプト(プログラムのような物)を追加することで、設定は完了します。

と言いっても、指定した場所に、コピペをするだけで良いので、身構える必要はありません。

 

はてなブログのダッシュボードから「デザイン」から「詳細」>「フッタ」に以下のスクリプトをコピペします。

 

<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:domustoX:20210310211139p:plain

もし、他の設定でここに追記しているスクリプトがあっても、それを消さずに、そのまま貼り付けてください。

 

同様に、 はてなブログのダッシュボードから「デザイン」から「詳細」>「ヘッダ」に以下のスクリプトをコピペします。

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

 

以上で、設定は完了します。

 

これで、サイドバーに階層化されたカテゴリー一覧が表示され、タイトル上部にパンくずリストが表示されるはずです。

 

サブカテゴリが正しく表示されない

 

ところが、これだけだと上手くいかない場合があります。サブカテゴリが、まったく別のカテゴリに含まれてしまうことがあるのです。

 

例えば、記事の編集画面で以下のようにカテゴリを設定した記事があるとします。

f:id:domustoX:20210310151508p:plain

 

この記事のパンくずリストをみると「雑記」のサブカテゴリとして、「会社」があって、この記事にたどり着くように階層化されています。

 

また、タイトル下のカテゴリも、「雑記」と「会社」が両方正しく設定されています。

f:id:domustoX:20210310151636p:plain

 

ところが、にもかかわらず、サイドバーでカテゴリを表示させると、うまくいかないことがあります。

f:id:domustoX:20210310152344p:plain

本来あるべき、「雑記」の下にあるはずの「会社」が、「考察」の下に来ています。(しかも数字には影響が出ていない)

 

これは、カテゴリの表示順番を「カスタム」にしている時だけ発生するエラーです。

 

f:id:domustoX:20210310170443p:plain


それ以外の「アルファベット順」などでは、自動的に調節されるのですが、「カスタム」の場合はそうはなりません。

 

個人的には、順番は「カスタム」に設定すると良いと思います。

その際、並べ替える順番は力を入れているカテゴリを上に、別にそれほど見られなくていいカテゴリは下に、とするといいと思います。

 

この場合には、はてなブログのダッシュボードの「デザイン」から「詳細」>「サイドバー」>「カテゴリ」をクリックします。

f:id:domustoX:20210310152629p:plain

 

そして、表示されたウィンドウで、間違った位置にあるサブカテゴリを、本来の親のカテゴリの下まで移動させて、適応をクリックします。

 

f:id:domustoX:20210310155810p:plain

 

すると、正しいカテゴリのサブカテゴリとして表示されます。

f:id:domustoX:20210310161145p:plain

 

ただ、位置を変える簡単なことで、この問題は解決します。

 

 

 

 

カテゴリの一括設定

 

また、ある程度記事の数がある状態で、記事をカテゴリに追加する場合には、複数の記事を一気にカテゴリに追加する機能を使うと便利です。

 

はてなブログのダッシュボードから「記事の管理」で記事を選択した後、「チェックした記事にカテゴリーを追加」をクリックすることで、カテゴリに追加ができます。

f:id:domustoX:20210310163546p:plain

 

その際に、記事をキーワードで検索しておくと、カテゴリーに追加する記事がより探しやすくなるので、おススメです。

 

ただし、この方法を使う場合でも、先述した通り、カテゴリの追加は、記事の編集画面からしか行えないので、要注意です。

 

おわりに

以上で、パンくずリストとカテゴリー一覧が表示されると思います。

 

細かい仕組み等の説明は省きましたが、実装するだけならば問題ないと思います。

 

これを少しでも皆様のお役に立てれば幸いです。