メメント・オレの生存記録

メメント・オレの生存記録

オレが生きた証を残したい。

はてなブログのカテゴリーの階層化が出来なくなったときの修正方法【オレ調べ】

 

どうも、なぜか階段の踊り場で記事書いてるメメント・オレです。

理由は床が冷えて気持ちいいから、ノーパソの充電コードがそこまでしか伸びないから。

 

記事の更新してたらパンくずリストの階層化が解除されてることに気づいた。

TwitterのTLとかでも同じ症状のひとがいるみたいだからオレなりにまとめるわ。

 

なんで解除されたか

blog.wackwack.net

開発者のブログに「サーバーのスクリプト配信を停止しました」の文字が。もしかしたら、またこういう症状が起きるかもしれんけど、とりま、今は直せるところ花おしておこう。それかオレがエンジニアになるかだな。

修正方法

①公式パンくずリストの有効化
管理画面→デザイン→カスタマイズ→記事
「記事ページにパンくずリストを表示する」に✔を入れる。

 

②カテゴリーの階層化
親カテゴリー、子カテゴリーは既に設定してあるので、ここは省略。

例えば、オレのブログを例にすると『山林開拓』『山林開拓-開拓記録』がそれ。

 

③カテゴリーの表示設定


カテゴリーの表示はアルファベット順を選択。 

ゲームのバグテスターアルバイトしていた癖で、自分で間違った手順するとどうなるかやってみたけど、追加日順とかに確かに表示が変になったわ。

 

スクリプトの設定

ここが一番面倒というか、他のブログみても以下のコードを貼り付けるって欄をわざわざ一回別サイトでコピーしてから済ませないといけない感じになっているからオレは一回のコピペで済むように書くわ。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>GitHubからコピーしたbreadcrumb.min.jsの内容を貼り付け</script>
<script>GitHubからコピーしたcategory_archive.min.jsの内容を貼り付け/script>

 

管理画面→デザイン→カスタマイズ→フッタ
HTMLに以下のスクリプトを貼り付ける。

 

<!-- カテゴリー階層化 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>var host=$(location).attr("host");function remapBreadcrumb(breadcrumb){new_breadcrumb_html="";for(var i=0;i<breadcrumb.length;i++){url_category=;for(var j=0;j<=i;j++)url_category[j]=breadcrumb[j];var category_url="https://"+host+"/archive/category/"+url_category.join("-");new_breadcrumb_html+='<span class="breadcrumb-child""><a class="breadcrumb-child-link" href="'+category_url+'"><span>'+breadcrumb[i]+"</span></a></span>",i+1<breadcrumb.length&&(new_breadcrumb_html+='<span class="breadcrumb-gt"> &gt;</span>')}""!=new_breadcrumb_html&&$("#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first").prop("outerHTML",new_breadcrumb_html)}function remapArticleCategory(categories){for(var index=0;void 0!==categories[index+1]&&categories[index+1].text.includes("-");)index+=1;breadcrumb_array=categories[index].text.split("-"),remapBreadcrumb(breadcrumb_array),category_num=categories.length;for(var i=0;i<category_num;i++)category_branch=categories[i].text.split("-"),categories[i].text=category_branch[category_branch.length-1]}function remapCategoryBreadcrumb(breadcrumb){new_breadcrumb_html="";for(var i=0;i<breadcrumb.length;i++)if(i+1<breadcrumb.length){url_category=;for(var j=0;j<=i;j++)url_category[j]=breadcrumb[j];var category_url="https://"+host+"/archive/category/"+url_category.join("-");new_breadcrumb_html+='<span class="breadcrumb-child"><a class="breadcrumb-child-link" href="'+category_url+'">'+breadcrumb[i]+"</span></a></span>",new_breadcrumb_html+='<span class="breadcrumb-gt"> &gt;</span>'}else new_breadcrumb_html+='<span class="breadcrumb-child">'+breadcrumb[i]+"</span>";""!=new_breadcrumb_html&&$("#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first").prop("outerHTML",new_breadcrumb_html)}function remapArchiveCategory(categories){for(var i=0;i<categories.length;i++)category_branch=categories[i].text.split("-"),categories[i].text=category_branch[category_branch.length-1]}$(document).ready(function(){var $entry_categories=$("#main-inner > article.entry > div.entry-inner > header > div.entry-categories > a");0<$entry_categories.length&&remapArticleCategory($entry_categories);var $archive_entries=$("#main-inner > div.archive-entries");0<$archive_entries.length&&($breadcrumb_child=$("#top-box > div.breadcrumb > div.breadcrumb-inner > span.breadcrumb-child:first"),breadcrumbs=$breadcrumb_child.find("span").text().split("-"),remapCategoryBreadcrumb(breadcrumbs),$archive_entries.each(function(){remapArchiveCategory($(this).find("section > div.categories > a"))}))});</script>
<script>function processArchive(a,b,c){for(flag=!0;a<$all_li.length;){if($li=$($all_li[a]),$a=$li.find("a"),category_name=$a.text(),breadcrumb=category_name.split("-"),level=breadcrumb.length,1==level&&a>0&&$li.attr("class","on-border"),level<b)return b>2&&$($all_li[a-1]).css("padding-bottom","0px"),a-1;level==b?($a.text(breadcrumb[level-1]),null!=c?$li.appendTo(c):($opend_span=$('<span class="hatena-breadcrumb-plus-toggle-button" id="opend-'+a+'">▼</span>'),$closed_span=$('<span class="hatena-breadcrumb-plus-toggle-button" id="closed-'+a+'">▶</span>'),$closed_span.css("visibility","hidden"),$opend_span.css("display","none"),$li.prepend($closed_span),$li.prepend($opend_span))):(id=a-1,ulid="hatena-breadcrumb-plus-toggle-"+id,$new_ul=$('<ul id="'+ulid+'" type="square"></ul>'),level>2?$new_ul.attr("class","hatena-breadcrumb-plus-child2"):($new_ul.attr("class","hatena-breadcrumb-plus-child1"),$new_ul.css("display","none")),$($all_li[id]).append($new_ul),$("#closed-"+id).css({visibility:"visible",display:"inline"}),$("#opend-"+id).on("click",{_id:id,_toggle:"close"},toggleCategory),$("#closed-"+id).on("click",{_id:id,_toggle:"open"},toggleCategory),a=processArchive(a,level,$new_ul)),a+=1}return a}function toggleCategory(a){"close"==a.data._toggle?($("#hatena-breadcrumb-plus-toggle-"+a.data._id).toggle(),$("#closed-"+a.data._id).toggle(),$("#opend-"+a.data._id).toggle()):"open"==a.data._toggle&&($("#hatena-breadcrumb-plus-toggle-"+a.data._id).toggle(),$("#opend-"+a.data._id).toggle(),$("#closed-"+a.data._id).toggle())}var $hatena_module_category=$("div.hatena-module-category"),parent_level=1;$all_li=$hatena_module_category.find("li"),$(document).ready(function(){"undefined"!=typeof $hatena_module_category&&processArchive(0,1,null)});</script>

 

クソながコードじゃねーか笑

グーグルのアドセンスコード挿入してる人もいると思うから、見分け付きやすいようにソース無効のタイトル名も先頭に配慮。

そりゃ見た目気にするブロガーはやらんわな。

オレは事実をちゃんと、そのまま伝えたいからこれでいくぜ。

 

スタイルシートの設定
管理画面→デザイン→カスタマイズ→ヘッダ
「ブログタイトル下」に貼り付ける。

 

<!-- カテゴリ階層化 -->
<style>.hatena-module-category ul li{display:block;padding:8px 0;border:0;list-style-type:none}.hatena-module-category ul li a{display:inline-block;padding:0;text-decoration:none;color:#000;border:none;transition:1s ease}.hatena-module-category ul li.on-border{border-top:1px solid #ddd}ul.hatena-breadcrumb-plus-child1{padding-left:30px}ul.hatena-breadcrumb-plus-child2{padding-left:15px}.hatena-breadcrumb-plus-toggle-button{cursor:pointer}</style>

 

これを追加すると、子カテゴリーの先頭に・が表示されないようになる。

俺的にはデザインの問題だから、つけないことにしている。

なので実質必要なのは④まで。

 

あとがき

なんとか、元に戻すことに成功した。

かれこれ、1時間ぐらいはブログ執筆と含めて費やしてる…

あと、踊り場で記事を書くと尻が痛くなることが分かった。

座布団を敷こう。

全然関係なこと最後に書いたけど…

 

それでいいんだよ(最近好きな言葉)