【Cocoon】コピペで一発!検索窓を可愛くするカスタマイズ

【Cocoon】コピペで一発!検索窓をカスタマイズする方法

くるみ

検索窓のデザインを可愛くしたいんだぞ
ということで今回は

  • Cocoonの検索窓がちょっと地味に感じる
  • もっと目を引く感じの検索フォームにしたい

という方に向けて「Cocoonの検索フォームをカスタマイズする方法」をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

検索窓の完成イメージ

Cocoonの検索窓の完成イメージ

カスタマイズ後の検索窓は上の様になります。

「お前のサイトまんまやん」と思われるかもしれませんが…そう、ご察しの通りSANGOの検索フォームを意識したカスタマイズになります。

マテリアルで可愛いめなデザインが好きな方には気に入っていただけるものかと思います。

注意
周りの影が薄いため、サイドバーの背景が白の場合は検索フォーム自体が埋もれてるように見えてしまいます。なのでその際は後述するコードのドロップシャドウの値を濃くしてあげてください。

カスタマイズ手順

方法はいたってシンプルかつ簡単です。

手順
step1
CSSコードをコピペする
step2
ボタンをお好みの色にカスタマイズする
step3
フォームの文言を変更する

「上の完成イメージとは違う色合いにしたい…」という場合はstep2で色を変更し、「フォームの文言を変えたい」という方はstep3まで行う必要があります。

すぐ終わりそう!

くるみ

バックアップを忘れずに

早速カスタマイズしていきたいところですが万が一の事態を考え、事前にバックアップを取っておくことをオススメします。

「バックアップするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでのCSSのバックアップの取り方【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法

ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

Cocoonの検索窓のカスタマイズ方法

CSSコードをコピペする

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加

以上のどれかの方法でカスタマイズコードをコピペします。

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めて…」という方は以下の記事を参考にしてみてください。

WordPressでCSSコードを追加する方法【初心者向け】WordPressでCSSを編集する方法を徹底解説

CSSコード

input.search-edit{
  border: none;
  border-bottom: solid 1px #efefef;
  box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgb(0 0 0 / 5%);
}
input.search-edit::placeholder {
  color:#ddd;
}
.search-submit{
  border-bottom: solid 1px rgba(0,0,0,.1);
  border-radius: 0 3px 3px 0;
  color: #fff;
  background-color: #f8c678;/*お好みの色に*/
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
}
input.search-edit{
  border: none;
  border-bottom: solid 1px #efefef;
  box-shadow: 0 4px 4px rgb(0 0 0 / 2%), 0 2px 3px -2px rgb(0 0 0 / 5%);
}
input.search-edit::placeholder {
  color:#ddd;
}
.search-submit{
  border-bottom: solid 1px rgba(0,0,0,.1);
  border-radius: 0 3px 3px 0;
  color: #fff;
  background-color: #f8c678;
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
}

ボタンをお好みの色にカスタマイズする

ここは「上の完成イメージとは違う色合いにしたい」という方向け。

background-color: #f8c678;/*お好みの色に*/

コピペしたCSSの「お好みの色に」とコメントがあるところのカラーコードを変更してあげれば、フォーム右にあるボタンの色を変更できます。

フォームの文言を変更する

検索窓の「サイト内を検索」という文言を変更したい場合は、cocoon-master>serchform.php

<?php _e( 'サイト内を検索', THEME_NAME ) ?>" name="s" class="search-edit" aria-label="input" value="<?php echo esc_attr($s); ?>">

の「’サイト内を検索’」の所の文字列を好きなものに書き換えればOKです。

ここまで終わればカスタマイズは終了。お疲れ様です!

お疲れ様!

くるみ

CSSの変更が反映されない場合

「あれ…?CSSが反映されないぞ…」となった場合は、キャッシュが原因であることが多いので以下の2つの方法を試してみてください。

キャッシュ系プラグイン

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上、Cocoonの検索窓のカスタマイズ方法でした。

「もっとド派手にカスタマイズしたい」という方は、以下の記事で今までのCocoonカスタマイズをまとめているので参考にしてみてください。

Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】Cocoonのおしゃれなカスタマイズ全集【初心者もコピペで簡単】

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す