【Cocoon】検索ボックスの色や形、アイコンを変える方法【カスタマイズ】

ブログ

 

ちょっと見てください、コレ!

この検索ボックス可愛くないですか?!(え?

何もいじってない状態はこれです↓↓

絶対前者の方がオリジナリティにあふれてていいですよね!

今回は「検索ボックスを自分好みに変更する方法」を解説していきます。

秒で終わります。

因みにハイライト表示の記事はこちらからどうぞ

 

Sponsored Links

最初にバックアップを取る

style.cssを編集するので、作業前に必ずバックアップを取ってください。

バックアップの取り方はこちらからどうぞ

 

アイコンのアップロード

虫眼鏡アイコン変わりのお好きな画像をアップロードしてください。

アイコンのアップロード方法はこちらからどうぞ

上記の記事のもくじ『03_Wordpress編集』を参考にしてください。

 

Sponsored Links

 

style.cssにコードの追加

WordPressの編集画面で『外観→テーマエディター→style.css』に行きます。

『編集するテーマを選択』はCocoon childを選択してください。

列の一番下に以下のコードを貼り付けてください。

/* 検索ボックス(通常時) */
.search-edit, input[type="text"] {
 border: 2px solid #8B9305; /* 太さ・線種・色 */
}

/* 検索ボックス(クリック時) */
.search-edit:focus{
 outline: none;
 border: 2px solid #8B9305; /* 太さ・線種・色 */
 background-color: #FFFEEE; /* 背景色 */
}

/* 検索ボックス(枠の形) */
.search-edit,
.search-box input[type="text"] {
	border-radius: 30px; 
}

/* 検索ボックス(アイコン変更) */
.search-submit:before {
	content: "";
	background: url(自分でアップロードした画像のURL) no-repeat;
	background-size: contain;
	position: absolute;
	right: 1px; /*右から1pxの位置で表示、2pxで右余白が広くなる */
	top: 1px; /* 上から1px、2pxで上の余白が開く */
	width: 45px; /* 任意の数値 */
	height: 45px; /* 画像にあわせて任意 */
}

/* 検索ボックス(アイコン変更) */欄の自分でアップロードした画像のURL」の文章アイコン画像のURLを置き換えたら、「ファイルを更新」してください。

以上です。

 

・/* 検索ボックス(アイコン変更) */欄の『right』と『top』の数字を変更することで、アイコン画像の位置を調節できます。

・/* 検索ボックス(枠の形) */欄を削除したら四角い検索ボックスになります。

検索ボックスのカラー変更の際はこちらのサイトを参考にしてください。

 

参考にさせていただきました

 

Sponsored Links

 

まとめ

はい!検索ボックスを自分好みに変更する方法を解説しました。

ね、簡単でしょ?

これ何がいいかって検索ボタンを自分で用意した画像に変えられるところなんですよね。

自分のブログのテーマキャラクターがいる方はぜひぜひ試してみてください!

 

本記事のまとめ
  • 最初にバックアップを取る
  • アイコンのアップロード
  • style.cssにコードの追加

 

ゾムビット
ゾムビット

ゾムビットは丸より四角の方が好きなので、四角い検索ボックスにしています。

 

それでは今回はこの辺で。もぜってぇ見てくれよな☆

コメント