【パンくずの作り方】はてなブログでカテゴリからパンくずを自動で作ってみた

はてなブログでパンくずをカテゴリから自動で作る方法を紹介していきます

はてなブログは、パンくずをつけにくい

はてなブログの機能でカテゴリから、自動で作ることはできますが
「トップ > 最初のカテゴリ > 記事タイトル」で固定されているので、使いにくいですよね。

「トップ > カテゴリ1 > カテゴリ2 > … > 記事タイトル」にしたくてもできないし、最初のカテゴリを狙ったカテゴリにするためにカテゴリ整理をするのも面倒です。

自分でパンくずをカスタマイズしたい！
どうしても思ってしまいますね。

私の場合は、下の表のようなパンくずを作りたいのです。

これは、はてなブログの「記事ページにパンくずリストを表示する」ではできません。

なので自分で作りました！

そのやり方を紹介いたします。

はてなブログに、カスタマイズしたパンくずをつける方法

１、下のコードをコピーする

<script>
// パンくずのテンプレートを定義する
function getBreadcrumbTemplete() {
    // パンくずのテンプレート
    var breadcrumb_templete = {
        'レシピ': {
            '紅茶': {},
            '緑茶': {},
            'コーヒー': {},
            'カクテル': {},
            'ハーブティー': {}
        },
        '暮らし': {
        },
        'お出かけ': {
        },
        'その他': {
        }
    }

    return breadcrumb_templete ;
}
// 次のパンくずを取得する
function getNextBreadcrumb(breadcrumb_templete, category_name_list) {
    result = '';
    Object.keys(breadcrumb_templete).forEach(function(key){
        if (category_name_list.indexOf(key) >= 0) {
            result = key;
        }
    }, breadcrumb_templete);

    return result;
}

// パンくずテキスト一覧
function getBreadcrumbTextList() {
    // パンくずのテンプレートを取得する
    var breadcrumb_templete = getBreadcrumbTemplete();

    // 取得したパンくずを保管する
    var breadcrumb_results = [];

    // カテゴリを取得
    var categories = document.querySelectorAll('.entry-categories a.entry-category-link');
    var category_name_list = [];
    categories.forEach(function(category) {
        category_name_list.push(category.innerText);
    });
    while(true) {
        next_breadcrumb = getNextBreadcrumb(breadcrumb_templete, category_name_list);
        if (next_breadcrumb == '') {
            break;
        }
        breadcrumb_results.push(next_breadcrumb);
        breadcrumb_templete = breadcrumb_templete[next_breadcrumb];
    }

    return breadcrumb_results;
}

// パンくずを表示する
function displayBreadcrumb() {
    // ブログのURLを定義
    host = 'https://' + window.location.host;
    
    // パンくずテキストを取得
    breadcrumb_text_list = getBreadcrumbTextList();

    // ページタイトルを取得
    page_title = document.querySelector('h1.entry-title a.entry-title-link').innerText;

    var html = '<div class="breadcrumb" data-test-id="breadcrumb">'
        + '<div class="breadcrumb-inner">'
        + '     <a class="breadcrumb-link" href="'+host+'/">'
        + '         <span>トップ</span>'
        + '     </a>';

    breadcrumb_text_list.forEach(function(breadcrumb_text) {
        html = html
            + '<span class="breadcrumb-gt">&gt;</span>'
            + '<span class="breadcrumb-child">'
            + '     <a class="breadcrumb-child-link" href="'+host+'/archive/category/'+breadcrumb_text+'">'
            + '         <span>'+breadcrumb_text+'</span>'
            + '     </a>'
            + '</span>'
    });

    html = html
        + '         <span class="breadcrumb-gt">&gt;</span>'
        + '         <span class="breadcrumb-child">'
        + '              <span>' + page_title + '</span>'
        + '         </span>'
        + '     </div>'
        + '</div>';

    json = '<script type="application/ld+json" class="test-breadcrumb-json-ld">'
        + '{'
        + '     "@type":"BreadcrumbList",'
        + '     "itemListElement":['
        + '         {'
        + '             "item":{'
        + '                 "name":"トップ",'
        + '                 "@id":"'+host+'/"'
        + '             },'
        + '             "position":1,'
        + '             "@type":"ListItem"'
        + '         }';

    var position = 2
    breadcrumb_text_list.forEach(function(breadcrumb_text) {
        json = json
            + ',{'
            + '     "@type":"ListItem",'
            + '     "item":{'
            + '         "@id":"'+host+'/archive/category/'+breadcrumb_text+'",'
            + '         "name":"'+breadcrumb_text+'"'
            + '     },'
            + '     "position":'+ position
            + '}'
        
        position = position + 1;
    });

    json = json
        + '     ],'
        + '     "@context":"http://schema.org"'
        + '}'
        + '<\/script>';

    output_html = html + json

    document.querySelector('#content').insertAdjacentHTML('beforebegin', output_html);
}


window.addEventListener('DOMContentLoaded', (event) => {
    // entryページではパンくずを表示する
    pathname = window.location.pathname;
    if (pathname.indexOf('/entry/') === 0){
        displayBreadcrumb();
    }
});
</script>

2、下の表とコードが対応しているので、コードを自分が作りたいパンくず用に修正する

    var breadcrumb_templete = {
        'レシピ': {
            '紅茶': {},
            '緑茶': {},
            'コーヒー': {},
            'カクテル': {},
            'ハーブティー': {}
        },
        '暮らし': {
        },
        'お出かけ': {
        },
        'その他': {
        }
    }

3、はてなブログの管理画面からデザイン設定を開く

4、デザイン設定のヘッダのタイトル下に、コピーしたコードを貼り付ける

5、「変更を保存する」ボタンをクリックする。これで、ブログの記事ページを確認すると以下のようになっているはずです

以上が、はてなブログでパンくずをカテゴリから自動で作る方法でした

これを見ている方も、自分でカスタマイズしたパンくずを作ってみてください

はてなブログのカスタマイズの関連記事

hakodate-glay.hatenablog.com

hakodate-glay.hatenablog.com

銀河マスカレードでは、ブログ編集に役立つ手法や紅茶のレシピなどを紹介しています