【Cocoon】コピペでおしゃれな検索窓のカスタマイズ方法

管理人

こんにちは！！ブログ「マネちる.com」の管理人のよしです。

WordPressテーマCocoonのカスタマイズ備忘録です。つまり私のデータが消えてしまった場合に備えている記事とも言えます。

今回は検索窓のデザインをカスタマイズしてみました。

CSSをコピペするだけですぐ終わります。

変更前の検索窓
完成後の検索窓
カスタマイズ方法
1. CSSをコピー
まとめ

変更前の検索窓

完成前の検索窓はこんな感じです。

少し地味と思う方もいるかもしれません。この記事に辿り着いたということは検索窓をおしゃれにしたいという思いがあるのかもしれません。

完成後の検索窓

当ブログはスキンをseasonsのwinterを使用しています。本来なら検索窓はそのままでも問題はありません。

それでも色をつけておしゃれにしたいと思いカスタマイズしました。

カスタマイズ方法

CSSをコピー

ペーストする場所は「外観 > テーマエディター > style.css(子テーマ)」。または「外観 > カスタマイズ > 追加CSS」のどちらでもOKです。

/*検索ボタン*/
.search-box .search-edit {
	padding: 8px;
	padding-right: 68px;
	border-color: #f5f5f5;
}

.search-box .search-submit {
	top: 0;
	right: 0px;
	height: 100%;
	width: 60px;
	color: #fff;
	background-color: #84acdc;
	border-radius: 0 4px 4px 0;
}

.search-box .fa-search {
	display: block;
	margin-top: 3px;
}

/*入力欄と検索ボタンの強調の無効化*/
.search-box .search-edit:focus, .search-box .search-submit:focus {
	outline: 0;
	outline-offset: unset;
}

上記のコードをコピペしてください。

色については#◯◯◯◯◯◯の部分を各自変更してください。基本的にはサイドバーと同じ色にすることをおすすめします。