【AFFINGER5】検索フォームのカスタマイズ方法。PHPとCSSにコピペでOK！

この記事の内容

AFFINGER5で検索フォームのカスタマイズをしたので、手順などを解説🌸

PHPとCSSのコピペでOK🙌

ブログ内を検索できる超有能アイテム、その名も「検索フォーム」。

デフォルトのものでもまったく問題はないのですが、「できればもっと可愛いデザインにならないかな～」という欲に駆られ、検索フォームをちょっとかわいくカスタマイズしてみました。

完成した検索フォームはこちらです👇

できた検索フォームがこちら！

ブログの雰囲気に合った、ふわ～っとした検索フォームにしてみました✨可愛くできて満足です！

あまり難しいことはなかったのですが、つまずいた所もあったため、この記事では

私がした「検索フォームのカスタマイズの方法」や「PHP、CSSの記述」

を、備忘録がてら残しておきます。

Contents

検索フォームのカスタマイズ
- PHP
- CSS
カスタマイズの注意点
まとめ：検索フォームを可愛いデザインに変更しよう

検索フォームのカスタマイズ

私がした検索フォームのカスタマイズは、以下のような感じです。

ボタンの色を変更
角を丸く変更
検索フォームの周りに淡い影

検索ボックスのカスタマイズは以下の流れで出来ました。

子テーマに「searchform.php」を作成
PHPに以下の記述をコピペ
CSSの以下の記述をコピペしてカスタマイズ

「searchform.php」を作成したら、以下の記述をPHPとCSSにコピペして、あとは好きなようにデザインしていくだけ。

ほぼコピペで出来るのでラクでしたよ～。

コピペする記述は以下のとおりです。

PHP

　PHPの記述内容はこちら

<form id="searchform" action="<?php echo esc_url( home_url('/') ); ?>" method="get"><input id="searchboxin" id="s" name="s" type="text" placeholder="ブログ内を検索"/><button type="submit" id="searchbtn"><i class="fa fa-search" aria-hidden="true"></i></form>

CSS

　CSSの記述内容はこちら

/*-----検索フォーム----*/

#searchform{
 position:relative;
 max-width:300px;	
 margin-bottom:20px;
 text-align:left;
 margin:0px auto;
 border:none!important;/*親テーマに上書き*/
}

#searchboxin{
 height:50px;
 padding:0 10px; 
 outline:0;
 background:#fff;
 border:1px solid #eee;
 border-radius:5px;
 box-shadow:0 2px 3px rgba(0, 0, 0, 0.2);
}

#searchbtn{
 height:50px;
 position:absolute; 
 left:255px;/*アイコン左右の位置調整*/
 top:0;
 background:none;
 color:#b3cedd;
 border:none;
 font-size:20px;/*アイコンサイズ*/
}

#searchbtn:hover{
 color:#95bfdd;
}


/*-----検索フォームここまで-----*/

CSSをコピペしたら、あとは自分のブログに合った検索フォームにカスタマイズしていきましょう。