アラフォーママの雑記ブログ

4歳差姉妹(小2&年少)の育児に奔走するアラフォーワーママの雑記ブログ。

【はてなブログ】カテゴリーの階層化でパンくずリスト&サイドバーの表示をスッキリ改善

f:id:xiaocaiaya:20180731161424j:plain

こんにちは。アラフォーママのあやぞうです。

 

のらりくらりとマイペースに書き続けてきたこのブログも開設から半年が経過し、もう間もなく目標の一つである100記事達成まであと一息となりました。

いつもご訪問頂きありがとうございます(^▽^)/

 

100記事を目前にして一つどうしても改善しておきたいことがありました。

それは、増えすぎたカテゴリーを見やすくすること

行き当たりばったりで記事を書くことが多い私は、カテゴリーをあとから適当につけてしまう癖があります。

そのため似たようなカテゴリーが乱立してしまって、毎回仕分けもかなりいい加減になってしまっていました。

さらにサイドバーに表示される「カテゴリー」表示も、ズラッと並んでしまって見た目にもイマイチまとまりがない感じ。

さてどうしたものかと考えあぐねていたところ、正にグッドタイミングでじゅりぃさんのこちらの記事を拝見して、早速私もカテゴリーの階層化にチャレンジしてみました!

 

www.jury99.com

 

とってもわかりやすくて参考になったので、私も自分なりに今回のカテゴリー階層化の流れについてまとめてみたいと思います。

 

 

 

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

“パンくずリスト”とは、ユーザーが閲覧しているWEBページがサイト内のどの位置にあるのか視覚的にわかりやすく表示したものです。

“アラフォーママの雑記ブログ”でも記事ページの上部に表示されています。

※このページでは「トップ>ブログ運営>カスタマイズ」と表示されていると思います。

 

はてなブログにはパンくずリストの表示機能が用意されています。

チェックひとつで簡単に表示できるのでまだパンくずリストを表示していない人は是非利用してみてくださいね。

 

ちなみに“パンくずリスト”という名前はあの有名な童話『ヘンゼルとグレーテル』の中に出てくるワンシーンで、主人公たちが森の中で迷子にならないように通り道にパンくずを置いていく場面に由来しているそうです。

 

※パンくずリストの表示は任意なので、表示させたくない人は飛ばしてください。

 

パンくずリストの表示の仕方

「デザイン」→「カスタマイズ」→「記事」の順にクリックし、下の方にあるパンくずリストの「記事ページにパンくずリストを表示する」にチェックを入れます。

 

管理画面で左側の「デザイン」をクリック。

f:id:xiaocaiaya:20180730103800j:plain

 

「カスタマイズ」(工具マーク)をクリック。

 

f:id:xiaocaiaya:20180730105106j:plain

 

 

「記事」をクリック。

 

f:id:xiaocaiaya:20180730104318j:plain

 下の方にスクロールすると、「パンくずリスト」の設定があるので「記事ページにパンくずリストを表示する」のチェックボックスをクリックしてチェックを入れる。

 

f:id:xiaocaiaya:20180730105623j:plain

 

最後に上部の「変更を保存する」をクリックして設定を反映させれば完了です。

 

 

カテゴリーの階層化 

では続いてカテゴリーの階層化です。

階層化の準備として、まずはメインになる「親カテゴリー」とサブになる「子カテゴリー」を整理しておきます。

 

step1.カテゴリーの整理

私のブログではメインとなるカテゴリー(親カテゴリー)を「子育て」「ブログ運営」「ライフスタイル」の3つに絞り、それ以外を「雑記」にまとめることに。

さらにそれぞれの内容ごとにサブカテゴリー(子カテゴリー)を作りました。

それらを階層化表示するために、子カテゴリーのタイトルを「親カテゴリー-子カテゴリー」のようにハイフンでつないで登録します。

 

例えば、もともと「母子分離不安」というカテゴリーに分別されていたものは、「子育て」という親カテゴリーの中に入れたいので「子育て-母子分離不安」というタイトルに変更しました。

「子育て」という親カテゴリーの中の「母子分離不安」という子カテゴリーですよ~、という表記になります。

 

↓「子育て」のカテゴリ整理後です。

 

f:id:xiaocaiaya:20180730113448j:plain

 

子カテゴリー多すぎw

後から説明しますが、順番を自分で変えられないのでちょっと不便です。

 

この作業、一つ一つの記事のカテゴリー登録を全部変更しないといけないので地味に大変な作業です(^_^;)

私はまだ100記事弱ですが、それなりに時間かかりました。

カテゴリーの階層化を考えている方は早めにやってしまった方が楽ですよ~。

階層化は「親カテゴリー>子カテゴリー>孫カテゴリー」の3階層まで表示可能だそうです。

 

step2.カテゴリー表示設定を“アルファベット順”に 

 詳しい理由はわかりませんが、階層化したカテゴリーの表示をさせるためにはカテゴリー表示設定を“アルファベット順”にしておく必要があるそうなので、以下の手順で表示設定を変更しておきます。

※これを忘れるときちんと表示されないので注意!

 

管理画面から「デザイン」→「カスタマイズ」→「サイドバー」と進み、「カテゴリ」の編集から表示設定を変更します。

 

管理画面で「デザイン」をクリック。

f:id:xiaocaiaya:20180730103800j:plain

 

「カスタマイズ」(工具マーク)をクリック。

 

f:id:xiaocaiaya:20180730105106j:plain

 

「サイドバー」をクリック。

 

f:id:xiaocaiaya:20180727160858j:plain

 

「カテゴリー」の右側にある「編集」をクリック。 

 

f:id:xiaocaiaya:20180727160906j:plain

 

「モジュールを編集」というポップアップが出るので、その中の「並び変え順」を「アルファベット順」に変更して適用ボタンをクリック。

 

f:id:xiaocaiaya:20180730115552j:plain

 

※アルファベット順にすると、カテゴリーの並び順を自分で選べません。

 私の場合はなぜか「はじめまして」が一番上にきました(^_^;)

 そして次が「ブログ運営」。

 本当は「子育て」がメインなんだけどなぁ…。

 

step3.スクリプト&スタイルシートの設定

ス…スクリプトって何!?というカスタマイズ初心者さんもご安心を。

コチラで紹介されているコードをコピペするだけでOKです!

blog.wackwack.net

 

記事の中に詳しく説明されているので手順に沿って進めるだけで設定完了です。

はい、お疲れさまでした!

あとはちゃんと反映されているかどうか確認して問題がなければ終了です。

 

step4.反映されているか確認

階層化前のカテゴリー表示をスクショしておくの忘れちゃったので、カスタマイズ後しかないですけど…(;^ω^)

 

こんな感じでかなりスッキリしました!

 

f:id:xiaocaiaya:20180731153932j:plain

親カテゴリーの前にある三角マークをクリックすると子カテゴリーが表示されます。

試しに「子育て」の子カテゴリーを開くと… 

 

f:id:xiaocaiaya:20180727160921j:plain

 

 

はい、こんな感じです。

今まではこれが初めからズラッと並んで表示されてたんですよね~。

それが普段は全部「子育て」の親カテゴリー内に収まるようになったので、サイドバーの見た目がかなりスッキリ(o´▽`o)♪

 

 おわりに

今回はカテゴリーの階層化とパンくずリストの表示についてまとめてみましたが、いかがでしたでしょうか。

みなさんのブログもスッキリしましたか?

早めにカテゴリーを階層化しておけば記事が増えてカテゴリーが増えてもスッキリ整理できるので、まだ階層化していないという方はぜひカテゴリーの階層化を実践してみてくださいね。

繰り返しますが、記事数が多くなるとカテゴリーの整理が大変になるので、思い立ったらなるべく早いうちにカテゴリーを階層化しておくことを強く、強くお勧めします!w

100記事未満の私でも小一時間かかりました(・´ω`・)

  

 こちらも参考にどうぞ 

mamazakki.hatenablog.com

 

mamazakki.hatenablog.com

 

mamazakki.hatenablog.com

 

mamazakki.hatenablog.com