カテゴリ階層化で発生した配置不具合との奮闘記

ども！あるえです。

皆さんブログの調子はいかがですか？？私はカスタマイズしていたときに大変困った事態に陥ったので今日はその紹介をしていきたい。

何に困ったかと言うと・・・

「 カテゴリーの階層化」

って纏めると少し語弊があるかもしれないが、階層化自体はすんなり出来た、しかしその後とんでもない不具合が待ち受けていた。

 はてなブログのカテゴリ階層化の仕方

 まずは「カテゴリの階層化」とはなんぞやから。

知っている方は目次で次にスキップしてくださいね！

下の画像を見てください。「親カテゴリ」「子カテゴリ」「孫カテゴリ」と、三階層になっていますよね？これがおおまかなカテゴリの階層化です。

例を出すと「旅行」と言う親カテゴリがあり「関東地方」と言う子カテゴリがあり、「東京」と言う孫カテゴリに繋がるイメージです。カテゴリ欄では普段は親カテゴリの「旅行」しか表示されておらず全体的にすっきりさせることができますね。展開用の▲ボタンが表示されそれを押すことで子カテゴリ以降が表示されます。

はてなブログではだいたい初期は以下のような状態じゃないでしょうか？

 まだ数が少ないのであれですが、この状態で増えていけば縦に、或いは横にも広がり、まぁ邪魔でしょうがない。ですがはてなブログ自体に階層化の機能がありませんので自分で導入するしかないのです・・・ただ先駆者の方々が情報を提供してくださっていますので階層化自体はそれほど難しくはありません。

私が参考にさせていただいた記事がこちらになります。ありがとうございます。

sora-no-kimagure.com

さて、前置きが長くなりましたが続いて導入後起こった悲劇についてです。

 階層化後の実際の配置や挙動

結果から先に見ていただきましょう。

ドン！！

ちょっとよくわかりませんね・・・汗

ちなみに、私が使用しているテーマは「Blank」です。とてもシンプルでカスタマイズの幅が広く使い易いので重宝しております。

この症状、他に数テーマ試しましたが出ませんでした、恐らくテーマによってインポートされている情報が異なるからでしょう。 

かといってかなり気に入っているテーマですし、これだけの為に今更テーマを変更して大幅な修正するのも正直だるい。何とかしてやろうと思いました。無理なら階層化は諦めるしかないとｗ

次に展開時の挙動です。

親カテゴリ１を開いても２を開いても以降のカテゴリが左下にワープします。これはやばいよ。いくらなんでも奇天烈すぎる！しかも▲マークも横じゃなくて上についてるよ（泣）

修正するしかない・・・

 CSSでのカテゴリ欄の細かな調整

じゃあどうするか？CSSで無理やり整頓するしかないだろう。私が思いついた限りの手段と結果を情報として残したい。はっきり言ってめっちゃ細かい部分ですけど。

まずは、親カテゴリ２が親カテゴリ１の右隣に来ているのを下に表示させる為に縦に整列させます。恐らく現状では横並びの指令が入っており折り返している状態です。

要素を縦並びに変更するCSSは・・・

.hatena-urllist  {
display: flex;   /* 要素を入れる仮想の箱*/
flex-direction: column; /*中で縦並びさせる*/
}

です。フレックスボックスと呼ばれるもので位置指定に便利です。これでどうなったかと言うと・・・

 見事縦並びになってくれましたね ﾊﾟﾁﾊﾟﾁ

次に私が使っているテーマではカテゴリにボーダーが入ってます。階層化するに当たってちょっと不恰好になるのでCSSで消していきます。

.hatena-module-category .hatena-urllist li a {
border: 1px solid #ffffff;　/*線を白くして隠した*/
font-size: 86.7%;
}

 なぜかnoneで消すことができなかったので、背景色と同化させて擬似的に視界から消しました。結果は

 おお・・！かなり見栄えがよくなりましたね！しかし▲マークとカテゴリの位置がずれたままですね。ですがこの▲マークなんなんですかね？調整したくても要素が不明ではお手上げです。そこで必殺右クリッククリック！

▲マークを右クリックすると一番下に「要素の検索」か「検証」ってのがありますので選択、するとこのような画面になり

右側の要素をマウスオーバーさせると該当する要素が左の様に青くなります。これで▲マークの要素が判明したのでCSSで調整が可能となりました！今回みたいに調整したい物の要素が不明な場合有効な方法です♪

青枠の ▲マークを下に、オレンジ枠のカテゴリを上と右に調整し、残った無駄な余白を消していきます。

.hatena-breadcrumb-plus-toggle-button {
position: relative;
top:15px;　　/*上から15pxの位置へ*/
font-size:130%; /*ついでに大きく*/
}

.hatena-module-category .hatena-urllist li a {
border: 1px solid #ffffff;
position: relative;
left:20px;　/*右に20pxずらす*/
top:-10px;　/*-10px指定で結果上に*/
font-size: 90.7%;
margin-bottom: -8px;　/*余白調整*/
}

結果は・・・

 やったぜええーーーーー！！！

めっちゃ綺麗になりました！！！達成感ＭＡＸ！！

一時はどうなることかと思いましたが無事調整することができました。今回はイレギュラー対応のカスタマイズとなりましたが参考になれば幸いです。

簡単にCSSおさらい

◆ 要素の縦並べ

.hatena-urllist  {
display: flex;   /* 要素を入れる仮想の箱*/
flex-direction: column; /*中で縦並びさせる*/
}

※横並び、縦並びはフレックスボックス以外にも方法はあります。

◆カテゴリ展開の▲ボタンの要素

.hatena-breadcrumb-plus-toggle-button {

以上、最後までお付き合いいただきありがとうございます。

良かったら読者、Twitterフォローお待ちしております！

ではまた。