当ブログでは、小カテゴリの複雑化に伴い、縦にリスト化しているだけでは冗長になってしまっていた。かといって、デフォルトで用意されているドロップダウンでは視認性が低く、パッと見てもカテゴリだと認識し辛い。
そのため、所謂アコーディオン型と呼ばれる「クリックすると開閉を行う」ものにしようかと探していたのだが、ざっと検索したところプラグインばかりヒットした。プラグインを入れると、コードが最適化されていないことによる読み込み速度の低下、テーマ・プラグインとの競合等を引き起こすこともあるため筆者個人としてはあまり入れたくない。
そういう事情があり、今回カテゴリーウィジットのカスタマイズを自作した。
実装
マウスオーバー(クリックせずにカーソルを当てるだけ)で展開するようになっている。
クリックするタイプを想像していたが、下手にJavaScriptコードを突っ込むよりも、CSSだけで実装できるし、行数も少ない。
コード
/* カテゴリウィジットをマウスオーバーで展開 */
.widget_categories ul li a + ul {
display:none;
}
.widget_categories ul li:hover ul {
display:block;
}挿入場所
コードはCSSのため、例の如く「style.css」の中だ。以下の追加方法がある。
- テーマエディター>Style.css
- カスタマイズ>追加CSS
