【WordPress】Cocoonで検索ボックスをカスタマイズする

高機能なWordPressテーマのCocoonですが、非常に便利です。

細かい事を気にしなければデフォルトの状態でも不自由なく使えます。
しかしやはりブログを運営しているからには、多少はデザインを自分好みにカスタマイズしたいと思う気持ちがあるはずです。

今回は細かすぎて伝わりにくいカスタマイズです！
Cocoonで「検索ボックス」をカスタマイズしていきます！
コピペで簡単にできるので、ぜひ試してみて下さい。

Cocoonのカスタマイズ記事はこちらでまとめています。

高機能なWordPressテーマ「Cocoon」なんだったら、カスタマイズなんて必要はないですが、やはり多少はカスタマイズしないと個性があまり出ないような気もします。そのため、当ブログで細かいカスタマイズ記事を少しずつ書いています。そのカス...

子テーマを使用しましょう
ビフォー・アフター
コードはコピペでＯＫ！
コピペも良いですが・・・

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

国内シェアNo.1の高速サーバーなのでストレスフリー！
自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

子テーマを使用しましょう

カスタマイズをするので子テーマを使いましょう！
子テーマの使い方がわからない場合は、こちらの記事を参考にしてください。

【WordPress】テーマをカスタマイズをするときは、子テーマを使うべし！

WordPressの機能の一つとして、「子テーマ」というものがあります。ブログを書き始めた方の場合や、WordPressを使い始めた方の場合は、「子テーマ？なんだそれ」とか「親テーマにそのままコードを書けばいいじゃん」と思うかもしれません。...

【WordPress】子テーマの導入方法と使い方を覚えてガンガンカスタマイズする！

前回こちらの記事で、子テーマの重要性について説明しました。今回はその子テーマの導入方法と、使い方についてご説明します。子テーマを導入する！子テーマを導入する方法は2通りあります。１つは親テーマと一緒にダウンロードする！もう１つは自分で子テー...

Cocoonの子テーマ導入方法はこちらの記事で紹介しています。

【初心者向け】Cocoonの導入方法と子テーマの使い方だよ！

高機能無料WordPressテーマ「Cocoon」3月頃からβ版が公開され、作成者である「わいひら」さんが、利用者の意見を広く取り入れ、先月7月から正式公開となりました。β版は会員登録をしなければ、ダウンロードできませんでしたが、正式公開と...

ビフォー・アフター

デフォルトの状態はこのようになっています。

ちょっと検索ボックスが大きめですね。

今回のカスタマイズでこのようになります。

角を丸くし、高さを減らしたことで、シャープになりました。
また、検索ボタンにカーソルを合わせると、色が変わるようになっています。

コードはコピペでＯＫ！

今回のカスタマイズを適用させるためには、以下のコードをstyle.cssに追記してください。
コピペでもＯＫです！

input::placeholder{
	font-size:0.75em;/*「サイト内を検索」の文字サイズ*/
}
.search-edit{
	border-radius:10px;/*検索ボックスの角のまるさ*/
	height:40px;
}
.search-submit{
	top:0px;
	line-height:0.25;
	bottom:0;
}
.search-submit:hover::before{
	color:#ffbc00;/*検索ボタンホバー時の色*/
}

上記のコードは、コピペ後変更しやすいように、一部のコードの横にコメントを記入しています。
コメントに対応する箇所を変更することで、自分好みの色等に変更できるのでお試しください！