はてなブログの階層化をやってみた

はてなの階層化 細分化

 

記事が増えカテゴリーも増え、ごちゃごちゃして読みにくいので、階層化して整理しました。
記事が少ないうちに整理しましょう!
だいぶ読みやすくなります

カテゴリーの階層化は、ネットで調べながら以下の手順で行いました
詳細は、階層化のスクリプト, スタイルシートを作成された作者の方

こちらのブログを参考にさせていただきました

 

 ここで使用するブログパーツスクリプトCSSファイル)は、作者のレンタルサーバから提供しているため予告なく機能が停止する場合があります

 

パンくずリストを有効に

ブログの管理ページで、デザイン→カスタマイズ→記事を選択

f:id:hirohiro124:20190607234020p:plain

f:id:hirohiro124:20190607234039p:plain

f:id:hirohiro124:20190607234117p:plain

 
下に パンくずリストがあるので、記事ページのパンくずリストを表示するにチェックを入れます

サイドバーを編集

カテゴリーの表示順の設定  

(1) デザイン→カスタマイズ→サイドバー→カテゴリ→編集を選択
並び替え順 で アルファベット順を選択し、適用

f:id:hirohiro124:20190607234425p:plain

(2)スクリプトの設定  
デザイン→カスタマイズ→フッタを選択

f:id:hirohiro124:20190607234615p:plain

html編集で、以下の3行を追加

<script src="">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
<script src="">https://hatena.wackwack.net/v1.1/js/breadcrumb.min.js">
<script src="">https://hatena.wackwack.net/v1.1/js/category_archive.min.js">

 

 

(3)スタイルシートの作成

はてなブログの管理ページから デザイン→カスタマイズ→ヘッダと進み、以下のスクリプトを貼りつけます

 <link type="text/css" rel="stylesheet" href="">https://hatena.wackwack.net/v1.1/css/fulldisplay.min.css"/>

 

【はてなブログ】公式パンくずリストの階層化とカテゴリーのアーカイブ表示を行うブログパーツを作りました - 小さな星がほらひとつ

 

動作確認

記事のカテゴリーを、以下のルールで階層設定

f:id:hirohiro124:20190607235917p:plain

画像のように、「ガジェット」の中に「Anker」を追加するとします 

親のカテゴリー「ガジェット」を作成
子のカテゴリー「ガジェット-Anker」を作成

f:id:hirohiro124:20190608000421p:plain

ルール

親のカテゴリー名「-」子のカテゴリー名"
- は半角文字
  

 

動作や表示がおかしいときは

  • 作者のページが表示できているか確認
  •  スクリプトスタイルシートが正しく設定できているか確認
  • ブログデザインを変更してみる

 

最後に

カテゴリーの階層化は、2-3階層程度がユーザーへの負担も少なく、効率的に操作できると言われています