ゾムビット
ちょっと見てください、コレ!
この検索ボックス可愛くないですか?!(え?)
何もいじってない状態はこれです↓↓
絶対前者の方がオリジナリティにあふれてていいですよね!
今回は「検索ボックスを自分好みに変更する方法」を解説していきます。
秒で終わります。
因みにハイライト表示の記事はこちらからどうぞ
最初にバックアップを取る
バックアップの取り方はこちらからどうぞ
アイコンのアップロード
虫眼鏡アイコン変わりのお好きな画像をアップロードしてください。
アイコンのアップロード方法はこちらからどうぞ
上記の記事のもくじ『03_Wordpress編集』を参考にしてください。
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を置き換えたら、「ファイルを更新」してください。
以上です。
検索ボックスのカラー変更の際はこちらのサイトを参考にしてください。
参考にさせていただきました
『Cocoon』細かいカスタマイズ(まとめ&備忘録)CSSコピペでOK!
ワードプレス無料テーマ『Cocoon』の細かいところをカスタマイズした記録です。メニューにFont Awesomeアイコンを入れたり、目次を中央配置にして背景色の変更をしたり、カテゴリーのラベルを非表示にしたりなど、自己満足的に?細かく変更した箇所などの備忘録です。徐々に増えていく予定!
https://bibabosi-rizumu.com/cocoon-searchform-customize/
まとめ
はい!検索ボックスを自分好みに変更する方法を解説しました。
ね、簡単でしょ?
これ何がいいかって検索ボタンを自分で用意した画像に変えられるところなんですよね。
自分のブログのテーマキャラクターがいる方はぜひぜひ試してみてください!
ゾムビット
ゾムビットは丸より四角の方が好きなので、四角い検索ボックスにしています。
それでは今回はこの辺で。次もぜってぇ見てくれよな☆
コメント