IT the Best

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

はてなブログ | 階層化カテゴリー |【手順付き】カテゴリー・パンくずリストを階層化表示にする

f:id:Surprisedblog:20191023185057p:plain
 

投稿日:2019/10/23

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

完成イメージを見る 

f:id:Surprisedblog:20191023014857p:plain

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

f:id:Surprisedblog:20191023015106p:plain

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


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

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

 

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

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

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

 

jQueryファイルの設置

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

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

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

 

外部ファイルを読み込む

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

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

 

設置方法

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

 

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

f:id:Surprisedblog:20191023032558p:plain

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

 

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

 

 

 

コードを埋め込む

外部ファイルを読み込まずに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検索エンジンに認識させることで、検索結果にパンくずリストを表示させることができます。パンくずリストの設定はSEOにも効果的な対策です。

f:id:Surprisedblog:20191015004221p:plain

 

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

「コードを埋め込む」の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を公開