【Cocoon】ウィジェット [C] ボックスメニューとカテゴリー

WordPressテーマ Cocoon

このMASAa.netは、WordPressテーマ Cocoonを使って構築しています。

MASAa.net | 製品レビューとPCやWordPressに関する情報発信サイト

masaa.net

今回は、WordPressテーマ Cocoonの「ウィジェット [C] ボックスメニューとカテゴリー」のカスタマイズについてまとめてみました。

WordPressテーマ Cocoon ウィジェット [C] ボックスメニューとカテゴリー

前回のエントリー記事で、MASAa.netのサイドバーに「ウィジェット [C] ボックスメニュー」を設置しました。

【Cocoon】ウィジェット [C] ボックスメニューのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット [C] ボックスメニュー」のカスタマイズについてまとめてみました。今回のカスタマイズでは格子をサイトカラーに合わせて変更、ホバー時のバックカラーの設定を行ってみました。

masaa.net

2020.07.20

「ウィジェット [C] ボックスメニューとカテゴリー」のスタイルは、次の様になっています。

今回、このサイドバーに設置した「ウィジェット [C] ボックスメニュー」と「ウィジェット カテゴリー」を一つのウィジェットに見せるようにカスタマイズしてみたいと思います。

ウィジェット [C] ボックスメニューとカテゴリーのカスタマイズ

WordPressテーマ Cocoonでの「ウィジェット [C] ボックスメニューとカテゴリー」のカスタマイズを行います。

カスタマイズ内容

「ウィジェット [C] ボックスメニューとカテゴリー」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■ウィジェット ボックスメニューとカテゴリー結合
************************************/
#slide-in-categories-2 .widget-title,
#categories-2 .widget-title { /*カテゴリータイトル*/
  display:none!important; /*タイトル削除*/
}
#slide-in-box_menu-2,
#box_menu-2 { /*ボックメニュー*/
  margin-bottom:0!important; /*ボックスメニューとカテゴリー間隔調整*/
}

※表示されない場合は、カスタマイズ内容の「#categories-2」を変更する必要があります。

その場合は、Google Chromeのブラウザを使って【検証(I)】(Ctrl+Shift+I)を行い、設定されているID(<aside id="XXXXXX">)を検索して下さい。

カスタマイズ後のウィジェット [C] ボックスメニューとカテゴリー

今回のカスタマイズによって、「ウィジェット [C] ボックスメニューとカテゴリー」のスタイルは次の様になりました。

今回の「ウィジェット [C] ボックスメニューとカテゴリー」のカスタマイズでは、下記の2点について行っています。

1. サイドバーに表示しているカテゴリーのタイトルを削除
2. 「ウィジェット [C] ボックスメニュー」と「ウィジェット カテゴリー」の間隔を調整

最後に

「ウィジェット [C] ボックスメニュー」と「ウィジェット カテゴリー」を一つのウィジェットとして見せたい場合は有効なカスタマイズです。

特に「ウィジェット [C] ボックスメニュー」を親カテゴリーに設定しておくことで、親カテゴリーが分かりやすくなります。