こんばんは、上司に腹パンされた氷太です。
SEOを期待してパンくずリスト導入してカテゴリーを階層化している方。
サイドバーのカテゴリー、偉い事になってませんか？
「うわ・・・私のサイドバー、縦に長すぎかも・・・！？」
そう思ったそこの貴方。
かも・・・じゃねえよ、なげーんだよ！！
全く・・・読者だって暇じゃないんですからねっ！
時間潰すために、対して興味もない記事をグルグルと閲覧する作業があるんですから。
ご理解頂けたようなら早速、カテゴリーをドロップダウン形式に変更しましょう！
胸に手を当て、髪型をツインテールにして「時は戻らない・・・それが自然の摂理」を３回復唱しましょう。
サンハイッ！！
今回このブログに施したカスタマイズ
サイドバーのカテゴリーをドロップダウン形式に変更
まずは元の状態がこちら。
はい、見事にディスプレイに収まっておりません。
縦にクソ長い状態ですね。
そして俺はサイドバーを追従するように設定している為、スクロールしていくと下の方にあるカテゴリーがフッタに食い込んで訳ワカメな状態になります。
階層化した子カテゴリー、孫カテゴリーを非表示にすれば話が早いんでしょうが、できれば表示させたいところです。
初めはカテゴリーを2列や3列にしようかと迷ったのですが、このデザインテーマだとむしろ見にくくなる事が判明し断念しました。
というか通常のブログであっても「ギュッ！」と凝縮されるような形になるので、あんまりオススメできないかもしれませんね・・・。
何とかならないものか・・・と、4時間程かけて完成したのがこちらです。
自分で言うのも何なんですが・・・。
シャレオツ過ぎて濡れてくる。
一応分かりやすいように、マウスオーバーで色が変化するようにしております。
まあただ弱点もあってですね。
読者さんがドロップダウンボタンである『▼』マークをクリックしなければ子カテゴリー・孫カテゴリーが出てこない。
それこそ見ねーよ！！ってご意見がありそうですが・・・。
そこらへんはアナリティクスで解析して、人気のある子カテゴリーや孫カテゴリーは親カテゴリーに昇格させる等の対策をしましょう（震え声
ではカスタマイズの方法に参りましょうか。
まずはドロップダウンの基盤を作りましょう。
こちらのサイトを参照なさってください。
凄い、この方本当に凄いですよ。
ヘッダとフッダにコピペ１発のコードを準備して下さってます。
ありがてえぜ・・・！！
ただある程度カスタマイズしている人、jqueryが２重に記述しないように注意です。
別にしても構わないんですが、読み込みが若干遅くなる可能性がありますので。
つーかね、はてなブログ公式でこの機能入れなさいよって話しなんですよ。
アーカイブにはあるくせに・・・。
最近ようやっと記事下に関連記事入れられるようになったくらいですからね。
機能が薄いよ、運営なにやってんの！
続いてこちらのブログを参考に、カテゴリーをデザインしましょう。
このブログもめっちゃオシャレなんですよね～。
こちらはパンくずリストに関してのデザインコピペになるので、これをカテゴリーに反映させるには一手間加える必要があります。
.breadcrumb-link
の部分を
.hatena-module-category .hatena-urllist li a
に置き換えればOKです。
というかパンくずリストにもこの設定を活かす為に、新しく指定した方が良いかと思われます。
こんな感じでパンくずリストが表示されるようになりますから。
う～ん、シャ・レ・オ・ツ☆
マウスオーバーする場合はそれぞれの部分に
:hover{
color:好きな色のコード;
background-color:好きな色のコード;
}
を入れましょう。
俺ブログだとマウスオーバーした場合、文字は白・背景は青という設定にしています。
カテゴリーに適用する場合は
.hatena-module-category .hatena-urllist li a:hover{
color:#fff;
background-color:#26C6DA;
}
パンくずリストに入れる場合は
.breadcrumb a:hover{
color:#fff;
background-color:#26C6DA;
}
をCSSに記入してます。
ご自身のブログのコンセプトカラーを指定しましょう。
記事下のカスタマイズ
１列表示が野暮ったいな～・・・と感じたので２列に分けました。
今現在このように表示されているハズです。
もうちょっと文字を大きくしてもいいかな～と思ってるんですが・・・。
スマホの事考えるとこれくらいでいいのかな・・・。
ここの記事数や大きさは、サイドバーの関連記事から指定できます。
初期設定のままだと、ちょっと大きいかもしれませんね・・・。
２列にする場合はこちらの記事をご参考になさってください。
どちらもありがたい事にコピペ1発でござります。
どうぞよしなに。
ちなみに自分はこのブログデザインの生みの親c-miyaさんのコードを利用させて頂いております。
特にそんな違いは生まれなかったので、後に記述した方をそのまま・・・って感じです。
どちらかが優れているって訳じゃありませんよ、どっちも優れてます。
あとは見やすく（なってるかは分かりませんが）する為に2列目と4列目の背景に色を付けております。
これは
#relateArticle ul {
margin-bottom: 10px;
}
#relateArticle li {
padding: 10px;
}
#relateArticle li:nth-child(4n-1) { /* 2行目 */
background-color: 好きな色のコード;
}
#relateArticle li:nth-child(4n) { /* 4行目 */
background-color: 好きな色のコード;
}
このコードをCSSに入力すればOKです。
まとめ
記事下は特に構わなくてもいいかもしれませんが・・・。
カテゴリーのドロップダウンは導入する価値が充分あります。
めっちゃスッキリしますもの！
コレで回遊率が少しでも上がればいいなぁ・・・。