Cocoonのサイドバー「カテゴリー」のウィジェットのCSSを修正しました

「旅馬」のCSSを修正しました。

 

waq3-travelog.com

 

 

「カテゴリー」ウィジェット

 

カテゴリーウィジェット

 

トップページ以外のページには、サイドバーが表示されるようになっています。

 

 

「ツーリング」カテゴリーの上にマウスポインターを置いたところ

 

カテゴリーのリンクには、マウスオーバーすると赤く光るようなCSSを仕込んでいます。

 

 

修正前のCSS

 

使用される際は、そちらの環境で十分テストのうえ使用してください。

 

/*20190607カテゴリー追加*/
.widget_categories a.cf{
	background-color:#161616;
	color:#dfdfdf;
	padding: 6px;
	margin:3px;
	font-size:12px;
	border-radius: 1px;
	border: solid 1px #383838;
}

.widget_categories a.cf:hover {
	color:#dfdfdf;
	background-color:rgba(220,20,60,0.5);
	text-decoration:none;
	transition:none;
}

 

最近気が付いたのですが、グローバルメニュー等からカテゴリーを指定して検索したとき、選ばれているカテゴリーには適用されていないことが分かりました。

 

そこで、次のようにstyle.cssに追加し、選ばれているカテゴリーは赤く光ったままになるようにしました。

 

 

追加したCSS

 

/*20200820 選択されているカテゴリー*/
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a{
	background-color:rgba(220,20,60,0.5);
	color:#dfdfdf;
	padding: 6px;
	margin:3px;
	font-size:12px;
	border-radius: 1px;
	border: solid 1px #383838;
}

.widget_recent_entries ul li a:hover, .widget_categories ul li a:hover, .widget_archive ul li a:hover, .widget_pages ul li a:hover, .widget_meta ul li a:hover, .widget_rss ul li a:hover, .widget_nav_menu ul li a:hover{
	background-color:rgba(220,20,60,0.5);
	color:#dfdfdf;
}

 

修正前のCSSの次に書き加えました。

 

 

適用後の画面

 

「ツーリング」カテゴリーが選ばれているとき

 

メニューから「ツーリング」を選んだ時のサイドバーです。赤く光っています。