IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

【手順あり】はてなブログのカテゴリー・パンくずをコピペで簡単に階層化表示にする「スマホも簡単」 | はてなブログカスタマイズ | 階層化カテゴリー

f:id:Surprisedblog:20191023185057p:plain
 

投稿日:2019/10/23

当記事は、はてなブログのカテゴリーを階層化(多階層化)するためのカスタマイズ情報です。当記事のScriptを設置し、記事のカテゴリーを当記事に記してあるように階層化することで、カテゴリーモジュールとパンくずリストを階層化することができます。

 

カテゴリー・パンくずリストを階層化表示にする

完成イメージを見る 

f:id:Surprisedblog:20191023014857p:plain

完成イメージ(パンくずリスト)

f:id:Surprisedblog:20191023015106p:plain

完成イメージ(カテゴリーリスト)


はてなブログのカテゴリー・パンくずリストの表示を階層化表示にカスタマイズするには、「階層化表示にするための処理の追加」「階層カテゴリーの入力」の2つの作業が必要です。

まず、「階層化表示にするための処理の追加」を行います。

 

手順1:階層化表示にするための処理の追加

はてなブログのカテゴリー・パンくずリストを階層化表示にするための処理の追加方法を2つ用意しました。外部ファイルの読み込みによる方法と、コードを埋め込む方法の2つです。

jQueryファイルの読み込むはどちらの方法でも必須です!!

※HTML要素のid、クラス名や位置を変更している場合は、階層化できない可能性があります。

 

jQueryファイルの設置

外部ファイルの読み込みによる方法と、コードを埋め込む方法どちらでもjQuery JavaScriptコードをより容易に記述するためのもの。のファイル読み込みは必須です。

はてなブログの管理画面から 設定 詳細設定 検索エンジン最適化 headに要素を追加の記述欄に、コチラのコードを貼り付けます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

 

 

階層化処理の追加方法1:外部ファイルを読み込む

カテゴリー・パンくずリストを階層化表示するために読み込む必要のあるファイルは2つあります。

  1. JavaScriptファイル
  2. CSSファイル

 

設置方法

Step1:HTMLコードをコピーする
階層化するためのファイルを読み込むために下記のHTMLコードをコピーします。

 

Step2:headに追加する
jQuery同様、はてなブログの管理画面から 設定 詳細設定 検索エンジン最適化 headに要素を追加の記述欄に、コピーしたコードを貼り付けます。

f:id:Surprisedblog:20191023032558p:plain

※画像のファイルは古いバージョンになります。

 

 これで、ファイルを読み込むための設置作業は終了です。

 

 

 

階層化処理の追加方法2:コードを埋め込む

外部ファイルを読み込まずにScriptコード、スタイルコードを直接html記述欄に記入して実現する方法です。

手順

Step1:HTMLコードをコピーする
下のテキストエリアのHTMLコードには、階層化に必要なScript、スタイルのコードが含まれています。
※クラス名に重複があると、正常に動作しない可能性があります。

先頭から2行目の$(function(){... })で囲まれた部分は、カテゴリーの階層化やパンくずリストの表示などの実行コードです。こちらのコードでは、階層化させるカテゴリーリストの指定や、パンくずリストのオプションを指定することができます。コードを書き換えることで、パンくずリストの区切り文字などを変更できます。




Step2:HTML記述欄に記入する
コピーしたコードをはてなブログのHTML記述欄に記入します。記入場所はjQuery以降ならどこでも大丈夫だと思いますが、コード量が多いためサイドバーのHTMLモジュールに記入することをお勧めします。
はてなブログの管理画面から デザイン設定  スパナアイコン サイドバー モジュールを追加 HTMLからHTML記述欄に、コピーしたコードを貼り付けます。

f:id:Surprisedblog:20191022195905p:plain

 

スマホのブラウザからの場合
PC版表示に切り替えることでスマホからでもコードを記述することができます。ページ下部に切り替えボタンがあります。

 

 

手順2:階層カテゴリーの入力

階層化の準備ができたら、記事のカテゴリーを階層書きします。当記事に載せたファイルとコードのScript処理では「-」(半角ハイフン)を区切り文字と認識し、階層化を行います。

パンくずリストに表示されるカテゴリーは先頭に置かれたカテゴリーです。

パンくずリストを表示しない設定になっていても表示される仕様になっています。表示したくない場合は、「階層化表示にするための処理の追加」の「コードを埋め込む」のHTMLコードから、下記のコードを消すことで表示されなくなります。
HatenaModule_Category.createBreadCrumbList_entry({top:"Top",delimiter:">",microdata:true});

 

例:3階層カテゴリーの書き方

第一階層から「はてなブログ」、「カテゴリー」、「階層化」の、3階層まであるカテゴリーにしたい場合の記述例。

はてなブログ-カテゴリー-階層化

パンくずリストのイメージ

f:id:Surprisedblog:20191023021848p:plain

 

例:1階層にハイフンを含めたい場合

第一階層から「CSS」、「box-shadow」 の2階層のカテゴリーにしたい場合の記述方法。「"」または「'」で囲みます。

CSS-"box-shadow"  または、 CSS-'box-shadow'

パンくずリストのイメージ

f:id:Surprisedblog:20191023022533p:plain

 

 

補足

カテゴリー一覧の階層カテゴリーの表示方法

最上位カテゴリーの場所に階層カテゴリーが追加されます。折りたたみ機能も備わっているためクリック(タッチ)により下層のカテゴリーが表示されます。

イメージ

f:id:Surprisedblog:20191023025657p:plain

 

 

パンくずリストをGoogleにクロールさせる方法

ページ内のパンくずリストをGoogle検索エンジンに認識させる

ページ内のパンくずリストをGoogle検索エンジン(クローラー)に認識させることで、検索結果にパンくずリストを表示させることができます。パンくずリストの設定はSEOにも効果的な対策です。

f:id:Surprisedblog:20191015004221p:plain

 

当処理では、動的にパンくずリストを生成するため、クローラーに認識させることができず、画像のようには表示されません。

2020/06/01 追記

動的(ページ表示後)にパンくずリストを生成していても検索結果に上の画像のようなパンくずリストが表示されることを確認しました!!

グーグル検索結果のパンくずリスト

スマホの場合も含み、この項の作業をする必要もなく、検索結果にパンくずリストを表示することが可能です。

 

2020/05/24 追記動的にパンくずリストを生成しているため、Googleの構造化データテストツールでは認識されず、パンくずリストが画像のように表示されないと思っていましたが、Google Search Console(グーグルサーチコンソール)ではクロールによるパンくずリストの取得が成功している結果が出ました。
このため、この項(パンくずリストをGoogleにクロールさせる方法)では、生成されるパンくずリストを事前にページに埋め込むことでクローラーに認識させる方法をご紹介しますが、この作業をする必要はないかもしれません。

表示させるオススメの方法は、当処理でパンくずリスト要素と同時に生成されるパンくずリストのマイクロデータを記事内に記入する方法です。

「コードを埋め込む」のHTMLコードにある下記の赤文字の部分がパンくずリストのマイクロデータを生成するためのオプションです。

HatenaModule_Category.createBreadCrumbList_entry({top:"Top",delimiter:">",microdata:true});

 

取得方法

記事編集画面でプレビューを開きます。そしてプレビュー画面からパンくずリストにマウスカーソルを合わせて開発者ツール(Chromeの場合:右クリック検証)を開きます。

誰でも簡単にブログカスタマイズが「楽になる方法 」| 開発ツール - IT the Best

f:id:Surprisedblog:20191023134749p:plain

画像の青くハイライトされているコードがパンくずリストのマイクロデータです。このコードをコピーして記事編集画面のHTML編集テキストエリアに貼り付けます。

f:id:Surprisedblog:20191023042435p:plain

これで、Googleにパンくずリストを認識させることができるので検索結果にパンくずリストを表示することができます。※反映には時間がかかる場合があります

パンくずリストが正確に設定できているか確認する場合はコチラ

構造化データ テストツール

 

スマホの場合
スマホの場合はおそらく開発者ツールがないため、パンくずリスト生成ツールから生成して記事に貼り付けることをお勧めします。

www.it-the-best.com

 

 

更新情報

・2019/10/23

バージョン1を公開

 

・2019/11/11 (バージョン1.1)

スマートフォンでのタッチが正常に反応しない不具合の対処。
ータッチが正常に反応するように改善。

バージョン1.1を公開

 

・2020/01/17 (バージョン1.2)

階層カテゴリーのタグを非表示にする処理を変更。対象をクラス「archive-category-link」「entry-category-link」を持つものだけに変更。

バージョン1.2を公開

 

・2020/01/18 (バージョン1.2.1)

カテゴリーリストの階層化表示処理をDOM要素の構築後に行っていたが、その処理を行わない仕様に変更。

理由:階層化表示のためのレンダリング処理が、ページの表示速度を遅くするため。

下の動画にあるようにボタンを設置して、そのボタンをクリックすることで階層化処理が行われるようにしました。

変更点: 前バージョンからの変更点は、DOM要素構築後に実行される階層化の処理をコメントアウトしただけです。ちなみにこのコードです。
hatena_category.toHierarchy(); // 階層化

ボタンは別で作成しています。他の場所で階層化の処理を実行するのに使ったコードはコチラです。
let hatena_category = new HatenaModule_Category($("#box2 .hatena-module-category"));
hatena_category.toHierarchy(); // 階層化

バージョン1.2.1を公開

 

・2020/02/12 (バージョン1.3)

1.カテゴリーリストで、一階層しかないカテゴリー(階層カテゴリーでなく階層カテゴリーにも含まれないカテゴリー)が表示されない不備を修正

2.カテゴリーリストの階層化表示をDOM要素構築後に実行させるかどうかをURLのクエリから判断させる仕様に変更。(「hierarchy=off」をクエリに含めることで階層化表示を行わない)
<script src="https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.3/hierarchycategory.min.js?hierarchy=off"></script>

3.関数名の変更などの細かい修正。(機能を変更するものではないコードの修正)
※階層化の関数名をtoHierarchy()からtoHierarchize()に変更しました。

バージョン1.3を公開

 

 

 

当記事で記載しているコード、外部ファイル※1のコードはコピーしてご自由にお使いください。ただし、再配布、転載、引用など第三者への公開目的で使用する場合は、必ず下記の著作権の表示をお願い致します。

Copyright (c) 2020 https://www.it-the-best.com https://www.it-the-best.com/entry/hatenablogcustom-category-hierarchy

※1:jQuery以外の外部ファイル