Bestはてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。:2019/10/23当記事は、はてなブログのカテゴリーを階層化するためのカスタマイズ情報です。当記事のScriptを設置し、記事のカテゴリーを当記事に記してあるように階層化することで、カテゴリーモジュールとパンくずリストを階層化することができます。カテゴリー・パンくずリストを階層化表示にする完成イメージを見る完成イメージ(パンくずリスト)完成イメージ(カテゴリーリスト)はてなブログのカテゴリー・パンくずリストの表示を階層化表示にカスタマイズするには、「階層化表示にするための処理の追加」と「階層カテゴリーの入力」の2つの作業が必要です。「階層化表示にするための処理の追加」を行います。1:階層化表示にするための処理の追加はてなブログのカテゴリー・パンくずリストを階層化表示にするための処理の追加方法を2つ用意しました。外部ファイルの読み込みによる方法と、コードを埋め込む方法の2つです。※HTML要素のid、クラス名や位置を変更している場合は、階層化できない可能性があります。外部ファイルの読み込みによる方法と、コードを埋め込む方法どちらでもjQueryのファイル読み込みは必須です。>headに要素を追加の記述欄に、コチラのコードを貼り付けます。src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>外部ファイルを読み込むカテゴリー・パンくずリストを階層化表示するために読み込む必要のあるファイルは2つあります。JavaScriptファイルCSSファイルファイル一覧を見るJavaScript(通常版と圧縮版)https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.2/hierarchycategory.jshttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.2/hierarchycategory.min.jsCSS(通常版と圧縮版)https://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.csshttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.min.css設置方法Step1:HTMLコードをコピーする階層化するためのファイルを読み込むために下記のHTMLコードをコピーします。>headに要素を追加の記述欄に、コピーしたコードを貼り付けます。※画像のファイルは古いバージョンになります。これで、ファイルを読み込むための設置作業は終了です。コードを埋め込む外部ファイルを読み込まずにScriptコード、スタイルコードを直接html記述欄に記入して実現する方法です。手順Step1:HTMLコードをコピーする下のテキストエリアのHTMLコードには、階層化に必要なScript、スタイルのコードが含まれています。※クラス名に重複があると、正常に動作しない可能性があります。})で囲まれた部分は、カテゴリーの階層化やパンくずリストの表示などの実行コードです。こちらのコードでは、階層化させるカテゴリーリストの指定や、パンくずリストのオプションを指定することができます。コードを書き換えることで、パンくずリストの区切り文字などを変更できます。#f8f8f8;}</style>Step2:HTML記述欄に記入するコピーしたコードをはてなブログのHTML記述欄に記入します。記入場所はjQuery以降ならどこでも大丈夫だと思いますが、コード量が多いためサイドバーのHTMLモジュールに記入することをお勧めします。>HTMLからHTML記述欄に、コピーしたコードを貼り付けます。スマホのブラウザからの場合PC版表示に切り替えることでスマホからでもコードを記述することができます。ページ下部に切り替えボタンがあります。階層化の準備ができたら、記事のカテゴリーを階層書きします。当記事に載せたファイルとコードのScript処理では「-」(半角ハイフン)を区切り文字と認識し、階層化を行います。パンくずリストに表示されるカテゴリーは先頭に置かれたカテゴリーです。パンくずリストを表示しない設定になっていても表示される仕様になっています。表示したくない場合は、「階層化表示にするための処理の追加」の「コードを埋め込む」のHTMLコードから、下記のコードを消すことで表示されなくなります。第一階層から「はてなブログ」、「カテゴリー」、「階層化」の、3階層まであるカテゴリーにしたい場合の記述例。2階層のカテゴリーにしたい場合の記述方法。「"」または「'」で囲みます。最上位カテゴリーの場所に階層カテゴリーが追加されます。折りたたみ機能も備わっているためクリック(タッチ)により下層のカテゴリーが表示されます。イメージパンくずリストをGoogleにクロールさせる方法ページ内のパンくずリストをGoogle検索エンジンに認識させることで、検索結果にパンくずリストを表示させることができます。パンくずリストの設定はSEOにも効果的な対策です。当処理では、動的にパンくずリストを生成するため、画像のようには表示されません。表示させるオススメの方法は、当処理でパンくずリスト要素と同時に生成されるパンくずリストのマイクロデータを記事内に記入する方法です。「コードを埋め込む」のHTMLコードにある下記の赤文字の部分がパンくずリストのマイクロデータを生成するためのオプションです。プレビューを開きます。プレビュー画面からパンくずリストにマウスカーソルを合わせて開発者ツール(Chromeの場合:右クリック>検証)を開きます。Best画像の青くハイライトされているコードがパンくずリストのマイクロデータです。このコードをコピーして記事編集画面のHTML編集テキストエリアに貼り付けます。これで、Googleにパンくずリストを認識させることができるので検索結果にパンくずリストを表示することができます。テストツールスマホの場合スマホの場合はおそらく開発者ツールがないため、パンくずリスト生成ツールから生成して記事に貼り付けることをお勧めします。・2019/10/23バージョン1を公開ファイルを見るhttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.0/hierarchycategory.jshttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.0/hierarchycategory.min.jshttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.0/hierarchycategory.csshttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.0/hierarchycategory.min.css・2019/11/11スマートフォンでのタッチが正常に反応しない不具合の対処。ータッチが正常に反応するように改善。バージョン1.1を公開ファイルを見るhttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.jshttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.min.jshttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.csshttps://cdn.it-the-best.com/hatenablog/hierarchycategory/1.1/hierarchycategory.min.css・2020/01/17階層カテゴリーのタグを非表示にする処理を変更。対象をクラス「archive-category-link」「entry-category-link」を持つものだけに変更。jQueryjQueryでHTML要素の中央位置(座標)を取得します。iosスイッチCSSでiosのスイッチ(switch)を再現するタイトルの通り、HTMLでiPhone(iOS)のスイッチ(switch)のようなデザインのトグルボタンを設置する記事になります。CSSでiosのスイッチのスタイルを再現し、切り替えはJavaScriptで処理します。今回も冬をテーマにした画像のパズルです。きれいな写真で、水面に反射した景色がさらに美しくさせます。画像の半分が反転しているような形になっているので、想像力が良い方は元の画像が見えてくるかもしれません。Puzzle)ゲームです。今回も冬をテーマにした画像のパズルです。Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。欠けているピースは右下です。秋も終わり、冬になり本格的に寒くなってきました。冬と言えば寒さ、雪が思い浮かびます。今回のパズルはそんな冬をテーマにした画像です。Puzzle)ゲームです。ピースをクリックまたはタップすることで移動させることができます。欠けているピースは右下です。全カテゴリー別記事一覧ページ...カスタマイズ概要一つだけではなくすべてのカテゴリーを対象に、記事の一覧を表示するためのはてなブログカスタマイズです。サイト内記事探索が一つのページで可能になるため、サイト訪問者が興味のある記事を容易に探しだすことができます。約100万サイト登録されているにほんブログ村にて、このブログの人気ランキングを見ることができます。