はてなブログで階層化したカテゴリを表示するために、記事一覧ページにサブメニューを設置してみた

はてなブログではカテゴリを階層化してサブカテゴリを作る機能や、カテゴリとは別にタグを設定する機能がありません。いささか不便ですが、とある方が開発したスクリプトを導入することでカテゴリ階層化は実装できるので、それで満足するしかないのが現状のようです。

ただ私はどうしてもカテゴリ別のメニュー、いうなれば子カテゴリのメニューやナビ的なものが欲しかったので、カテゴリ別記事一覧ページにサブメニューを設置してみることにしました。

当ブログのカテゴリページには、小さなメニューが設置されています

画像に表示されている、「アプリ・サービス」「はてなブログ」「雑記」などが表示されている部分のメニューを表示するカスタマイズを置いておきます。

カテゴリを階層化するスクリプト

blog.wackwack.net

カテゴリの階層化については、こちらの記事をご覧ください。

カテゴリメニューのカスタマイズ

HTML

<ul class="navi-categorypage">
    <li><a href="URL">メニュー１</a></li>
    <li><a href="URL">メニュー２</a></li>
    <li><a href="URL">メニュー３</a></li> 
</ul>

これをはてなブログのカテゴリー一覧ページから、表示したいカテゴリの説明文に書き込みます。

リストの数やリンク先、文言などは自由に編集してください。

CSS

ul.navi-categorypage, ul.navi-categorypage a {
    color: #fff; /*文字の色*/
    background-color:#364f6b; /*メニューバーの背景色*/
}

ul.navi-categorypage {
    background-color: #fff; /*メニューの区切り線の色*/
    margin: 0 auto;
    padding: 0;
    font-size: 0;
    width: 100%;
}

ul.navi-categorypage li {
    display: inline-block;
    list-style-type: none;
    width : 49% ;
    width : -webkit-calc(50% - 1px) ;
    width : calc(50% - 1px) ;
    margin: 0 0 1px 1px;
    font-size: 14px;
}

ul.navi-categorypage a {
    line-height: 36px; /*メニューの高さ*/
    text-align: center;
    padding: 2px 0 0;
    text-decoration: none;
    font-weight: bold;
    display: block;
}
    
ul.navi-categorypage a:hover {
    color: #fff; /*マウスオーバーの時の文字の色*/
    background-color: #ff5638; /*マウスオーバーの時の背景色*/
}

ul.navi-categorypage li:nth-child(odd):last-child { /* 最後のリスト横幅の設定 */
    width : 99% ;
    width : -webkit-calc(100% - 1px) ; 
    width : calc(100% - 1px) ; 
}

はてなブログのデザインCSSに貼り付けると、先ほどのHTMLに作用します。

解説

基本的なinline-blockのリストメニューです。文字色、背景色などを変更してお使いください。

横幅を50%で指定し、１行に２つずつ表示する設定にしています。３つや４つ表示したい場合は、％の値を変更してください。カラム落ちを防ぐためmargin分の横幅を引いています。calc関数に対応していないブラウザでも表示するため、１％小さいwidthを指定してから上書きするという方法で横幅を指定しています。

/ 最後のリスト横幅の設定 / について

１行に２つずつ表示しているとき、リストが奇数個だと最後のリストの横にスペースができて収まりが悪い気がしたので、最後の行が奇数の場合は横幅を100%にしています。

nth-childは奇数(odd)や偶数(even)や関数(3n+2)など、何番目のリストに適用するかを設定できる便利な疑似クラスです。

途中のリストの横幅を100%にしたい場合

こんな感じで最後の行だけでなく途中の行の横幅を100%にしたい場合は、別途でCSSを用意してliにクラスを適用する必要があります。

それが面倒な場合は、ulから始まるリストを複数書くだけでも見た目上は実装できます。

<ul class="navi-categorypage">
    <li><a href="URL">通常</a></li>
    <li><a href="URL">通常</a></li>
    <li><a href="URL">横幅最大</a></li> 
</ul>
<ul class="navi-categorypage">
    <li><a href="URL">通常</a></li>
    <li><a href="URL">通常</a></li>
    <li><a href="URL">横幅最大</a></li> 
</ul>

こんな感じです。

最後に

カテゴリページにもサブメニューが欲しいと思ったので適当に実装してみました。

ただ軽くはてブロサーフィンをしてみても、このようなメニューをカテゴリページに表示しているブログを見たことがないので、あまり良いUIではない可能性があります。ご利用・実装の際は計画的に。