はてなブログの設定:カテゴリーの階層化


どうも、果汁1%程度です

 

はてなブログの設定シリーズ

 

f:id:kajyu-1per:20200223143613p:plain

 

今回はカテゴリーを階層化

階層化しないとカテゴリー増えた場合に見にくいね(まだ2個しかない

 

階層化をするとこんな感じでまとめることができる

f:id:kajyu-1per:20200112204818p:plain

 

ただブログ開設時にやっとかないとカテゴリー整理が大変かも

なので自分も含めてブログ開設した初心者向けに覚書

  

やることはこれ

 

それでは1つ1つやっていこう

 

 パンくずリストを有効にする

パンくずリストって何?というところからスタート

 

パンくずリストとは

パンくずリストとは

「サイトを見ているユーザが今どこにいるのかわかりやすくした誘導表示」

のことのようだ

 

はてなブログでは有効にするとこんな感じになる

今どこにいるのか確かにわかりやすい

f:id:kajyu-1per:20200112210120p:plain

 

有効に設定

 設定は「デザイン」→「カスタマイズ」→「記事」にある

「記事ページにパンくずリストを表示する」にチェックをいれるだけ、簡単

 f:id:kajyu-1per:20200112213002p:plain

 

設定は下のほうにあるのでスクロールする

チェックを入れたら「変更の保存」も忘れずに

 

f:id:kajyu-1per:20200112213311p:plain

 

カテゴリーをルールに沿って作成する

階層化のルールはカテゴリーを「」(ハイフン)でつなげて記述してあげる

こんな感じ

f:id:kajyu-1per:20200112215118p:plain

 

そして階層化された表示はこれ

f:id:kajyu-1per:20200112214437p:plain

ちなみに「親階層ー子階層」だけにしてみると

f:id:kajyu-1per:20200112215343p:plain

 

カテゴリーの階層表示はこんな感じ、親階層の数がおかしくなるようだ、注意

f:id:kajyu-1per:20200112215525p:plain

 

カテゴリー表示設定を変更

この設定は「デザイン」→「サイドバー」→「カテゴリの編集」をクリック

 f:id:kajyu-1per:20200112220548p:plain

 

設定画面がでてくるので「並び替え順」を変更する

f:id:kajyu-1per:20200112220837p:plain

フッタのスクリプトを設定

フッタにスクリプトの設定が必要なようだ、おまじないか

「デザイン」→「カスタマイズ」→「フッタ」にコピペ

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

 

f:id:kajyu-1per:20200112222210p:plain

ヘッダのスタイルシートを設定

こちらもおまじない

「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」にコピペ

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

 

f:id:kajyu-1per:20200112222511p:plain

 

以上、カテゴリのカスタマイズが完了、結構大変