【Cocoon】サイドバーの検索窓をカスタマイズ

2025年2月18日2025年2月21日

Cocoonのサイドバーに表示される検索窓（フォーム）を下サンプル画像にカスタマイズする方法となります。

サイドバーに検索窓を追加

外観＞ウィジェット＞検索＞サイドバー＞ウィジェットを追加

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加

input.search-edit {
	background-color: #dceaeb; /*背景色*/
	border: none; /*枠線*/
	padding: 10px; /*上下左右余白*/
	border-radius: 5px; /*角丸*/
	font-size: 14px; /*文字サイズ*/
}
input.search-edit::placeholder {
	color: #7d9394; /*枠内文字色*/
}
#sidebar span.fa-search::before {
	color: #7d9394; /*虫眼鏡色*/
}

以上でCocoonのサイドバーの検索窓のカスタマイズ方法となります。