はてなブログ

【はてなブログ】カテゴリーを開閉式に階層化。そのカテゴリーの横にフォントアイコンを表示

こんにちは!

はてなブログでカテゴリーを分かりやすく表示させたい

\一番シンプルな見本/

f:id:langnerdmom:20210327192405j:plain:w300

のように表示させたいな〜と思っていました。

をクリックすると小カテゴリと孫カテゴリーが表示される開閉式のものを見つけました!

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

それを忘備録としてご紹介します!

カテゴリー階層化の下準備(全パターン共通)

1. パンくずリストを表示させる

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

f:id:langnerdmom:20210327133816j:plain:w200
「デザイン」をクリック

f:id:langnerdmom:20210327133855j:plain:w200
「🔧カスタマイズ」→「記事」をクリック

f:id:langnerdmom:20210327135458j:plain:w200
「記事ページにパンくずリストを表示する」にチェック。

2. カテゴリーを親・子・(孫)カテゴリーに整理する

カテゴリーを

▼親カテゴリ
  ├小カテゴリ
  ├小カテゴリ
     ├孫カテゴリ
     ├孫カテゴリ
▶親カテゴリ
▶親カテゴリ

のように表示させる場合、記事作成時にカテゴリーを設定する際、

  • 親カテゴリ:ブログ運営
  • 小カテゴリ:ブログ運営-はてなブログ
  • 孫カテゴリ:ブログ運営-はてなブログ-カスタマイズ 孫カテゴリーは任意でどうぞ。クドくなるのでなくても問題ありません。

のようにカテゴリ名の間に-を入れることで小カテゴリ孫カテゴリを作ることができます。

「デザイン」→「カスタマイズ」→「サイドバー」のカテゴリー設定でアルファベット順に変更しましょう。

f:id:langnerdmom:20210327133855j:plain:w200
「サイドバー」をクリック

f:id:langnerdmom:20210327134045j:plain:w200
並び替え順をアルファベット順に変更します。

そして「適用」をクリック。

f:id:langnerdmom:20210327134324j:plain:w200
「変更を保存する」もお忘れなく

これで下準備はOKです

1. 一番シンプルなパターン

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

先ほど紹介した

▶親カテゴリ
 ・小カテゴリ
 ・小カテゴリ

の一番シンプルなパターンをご紹介します。

\コレ/

f:id:langnerdmom:20210327192405j:plain:w300

フッタにコードを貼り付ける

f:id:langnerdmom:20210327140849j:plain:w200

フッタに下のコードを貼り付けるだけ。

<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>

jqueryをどこかで読み込んでいる人は一行目は入れなくて大丈夫です。

これだけでシンプルな階層化が出来ちゃいます。

パターン2. 小カテゴリ&孫カテゴリー横のがいらない場合

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

上のコードを「ヘッダ」→「タイトル下」に追加して下さい。

パターン3. 階層化した親カテゴリのトグル(▶)の色を変える

f:id:langnerdmom:20210327151127j:plain:w300

パターン1に追加で

 .hatena-breadcrumb-plus-toggle-button{
color:#ee8ea066;
}

を「デザインCSS」に貼り付けることで、親カテゴリのトグル(▶)の色を変える事ができます。

color:#ee8ea066;#後のコードを変えることで好きな色に変えられます♪

パターン.4 階層化した子•孫カテゴリー前にアイコンをつける

はてなブログなのにとっても可愛い「【ちゃんこめBlog】インド在住OLの雑記ブログ」を読んでいて、カテゴリーの前にアイコンを表示できるの?

と思い、調べてみました。

私がやったらこんな感じになりました。
f:id:langnerdmom:20210327151233j:plain:w300

パターン1+2+3に追加で

.hatena-module-category>.hatena-module-body>ul>li>ul>li>a:before {
font-family: 'blogicon';
font-weight: 900;
content: '\f022';
padding-right: 4px;
font-size: 1em;
color: #ee8ea066;
}
.hatena-module-category>.hatena-module-body>ul>li>ul>li>ul>li>a:before {
font-weight: 900;
font-family: 'blogicon';
content: '\f04a';
color: #ee8ea066;
font-size: 15px;
padding-right: 5px;
}
.hatena-module-category>.hatena-module-body>ul>li>ul>li>ul>li {
display: inline-block;
font-size: 14px;
margin: 2px;
padding: 0 8px;
background: #eee9;
border-radius: 20px;
}

上記のコードを張り付けると、小カテゴリ•孫カテゴリー前にアイコンを表示することができます。

content:’\⚫⚫⚫⚫’f022f04aのコードを変えて、自分好みに変えてください。

はてなブログのアイコンフォントは「はてなブログアイコン素材一覧127種と使い方 – かまさんちのブログ」がとても参考になります

まとめ

書きたいことが多すぎて説明が上手く出来ているのか不安ですが…

自分のブログのカスタマイズを変えたい時のために忘備録として書いておくことにしました。

.hatena-breadcrumb-plus-toggle-button:before {}で親カテゴリの前のアイコンも変えれそうな気がするんですが、パソコンを使わずにカスタマイズをしているので、上手くいきません。笑

また、本格的に変えたくなったらパソコンから挑戦してみたいと思います

忙しいワーママに

忙しいワーママでも「はてなブログPro」でなら、簡単なのに本格的なブログが始められる

一緒に始めてみませんか?