WordPress のカテゴリウィジェットでカテゴリを表示した場合、カテゴリの種類(数)が多いと縦に間延びして表示することになります。
サイドバーが縦に長くなりユーザビリティがよくありません。初期表示では親カテゴリのみ表示し、ホバー(マウスが重なった場合)に子カテゴリを自動開閉する CSS を紹介します。
カテゴリウィジェットと、簡単な CSS で実現します。
ポイント
2階層のカテゴリに対応しています。3階層は対応していません。
カテゴリの階層自動開閉の実現イメージ
実際にカテゴリを開閉式にしたイメージです。
開閉式にしなければ、タテの高さが 10倍ぐらいになりますが、開閉式にしたので親カテゴリの数の縦の高さで表示しています。
- マウスが親カテゴリ上をホバーしたタイミングで子カテゴリを表示します
- マウスが親カテゴリ上および子カテゴリ上をホバーしている間は子カテゴリを表示し続けます
- マウスが親カテゴリ上および子カテゴリ上から離れた場合、子カテゴリを非表示にします
ポイント
スマホではマウスホバーがなく、タップ=クリックとなりますので、開閉は若干難しい操作になります。
※ スマホでは、親カテゴリを長押しすることで子カテゴリの一覧を開きます。
カテゴリーの階層を開閉式にする方法
step
1カテゴリウィジェットを配置する
WordPress の管理画面から 「外観」 → 「ウィジェット」 で、サイドバーにカテゴリウィジェットを配置します。
カテゴリウィジェットで次の設定をします。
ドロップダウンで表示 | チェックしない |
投稿数を表示 | (10) などの記事数を表示したい場合はチェック |
階層を表示 | チェックする |
本設定でカテゴリを表示できます。この時点では、子カテゴリは常に表示されている状態となります。(カテゴリ数分、縦長に表示されます)
追加CSSを入力する
WordPress の管理画面から 「外観」 → 「カスタマイズ」 から 「追加CSS」 を選択し、次のコード(CSS)を入力します。
.widget_categories ul li {
color: #404040;
border-left: solid 2px #77ffaa;
}
.widget_categories ul li ul li{
color: #404040;
border-left: solid 10px #eeeeff;
}
.widget_categories ul li ul {
display:none;
}
.widget_categories ul li:hover ul {
display:block;
}
「widget_categories 」がカテゴリーのクラスです。「ul」「li」タグに対して、マウスオーバーの有無で表示非表示を切り替えています。
配色(#eeeeff など)は適宜変更して、保存(公開)してください。
完成です。
まとめ
WordPress のカテゴリウィジェットを使って、子カテゴリを開閉する方法です。
- カテゴリウィジェットを配置する
- CSSで開閉(表示・非表示)するコードと、見た目を整えるコードを追加設定する
簡単な CSS を使うだけでできるのは便利ですね。
Enjoy!カテごる!
WordPress のおすすめテーマ
- SEO に強く【集客力強化】が望める
- かっこいい(かわいい)ホームページを作りやすい
- 初心者でも使えて、上級者になっても満足できる
本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!
WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。
-
-
AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】
AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。
続きを見る
WordPress の情報、テクニック一覧はこちらをクリック!