WordPress

WordPressで階層化されたカテゴリーを開閉式で表示!簡単CSSで実現

広告:ページ内にてアフィリエイト広告を利用しています。

カテゴリーメニューを開閉式で表示

WordPress のカテゴリーウィジェットでカテゴリーを表示した場合、カテゴリーの種類(数)が多いと縦に間延びして表示することになります。

サイドバーが縦に長くなりユーザビリティがよくありません。

ポイント

本記事では、

初期表示では親カテゴリーのみ表示し、ホバー(マウスが重なった場合)に

子カテゴリーを自動開閉する CSS を紹介します。

カテゴリーウィジェットと、簡単な CSS で実現します。

2階層のカテゴリーに対応しています。3階層は対応していません。

おすすめ副業

\ココナラ成功パターンを詳しく見たい方は こちら をクリックしてください/

PR

カテゴリーの階層自動開閉の実現イメージ

実際にカテゴリーを開閉式にしたイメージです。

開閉式にしなければ、タテの高さが 10倍ぐらいになりますが、開閉式にしたので親カテゴリーの数の縦の高さで表示しています。

カテゴリーを開閉式にしたサンプル
  • マウスが親カテゴリー上をホバーしたタイミングで子カテゴリーを表示します
  • マウスが親カテゴリー上および子カテゴリ上をホバーしている間は子カテゴリーを表示し続けます
  • マウスが親カテゴリー上および子カテゴリ上から離れた場合、子カテゴリーを非表示にします

ポイント

スマホではマウスホバーがなく、タップ=クリックとなりますので、開閉は若干難しい操作になります。

※ スマホでは、親カテゴリーを長押しすることで子カテゴリーの一覧を開きます。

カテゴリーの階層を開閉式にする方法

step
1
カテゴリーウィジェットを配置する

カテゴリーウジェットの配置

WordPress の管理画面から 「外観」 → 「ウィジェット」 で、サイドバーにカテゴリーウィジェットを配置します。

カテゴリウィジェットで次の設定をします。

項目設定
ドロップダウンで表示

チェックしない

投稿数を表示

(10) などの記事数を表示したい場合はチェック

階層を表示

チェックする

本設定でカテゴリーを表示できます。この時点では、子カテゴリーは常に表示されている状態となります。(カテゴリー数分、縦長に表示されます)

追加CSSを入力する

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 もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

まとめ

WordPress のカテゴリーウィジェットを使って、子カテゴリーを開閉する方法です。

ポイント

  • カテゴリーウィジェットを配置する
  • CSSで開閉(表示・非表示)するコードと、見た目を整えるコードを追加設定する

簡単な CSS を使うだけでできるのは便利ですね。

Enjoy!カテごる!

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

地方で快適に暮らす!地方がチャンスのおすすめ副業を紹介!在宅でパソコンがあれば「できる」副業

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

この副業
アフィリエイトスクール
ノートパソコン
もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン

おすすめ副業「ブログ・アフィリエイト」

本気でストック型の収益を目指すなら、

おすすめ副業は「ブログ・アフィリエイト」

  • 本業(会社勤め)をしながら、空いた時間でできるから気楽に収益を目指せる
  • 本業があるからリスクが少ない、少額で始められるから、失敗が怖くない
  • 毎月のお小遣いから、将来の FIRE の夢まで、幅広く狙える副業

世の中のニーズ(お客が欲しいもの)を知る力が自然と身に着く

副業「ブログ・アフィリエイト」をお試しください。

初心者向け!アフィリエイトの始め方をステップで解説

PR
―― 今日のおみくじ ――

第 64 番

”小吉"


今日のメッセージ

ほどよいテキトーさを持つと、けっこう人生楽に生きられます。
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記