LION MEDIAの検索フォームをカスタマイズする
LION MEDIAの検索フォーム初期デザインでは少し見にくいのでカスタマイズしてみました。
LION MEDIAとは
無料で高機能、デザイン性にも優れたテーマで、設定項目からのカスタマイズだけで素敵なサイトが完成します。AMPにも対応。
初期デザインは以下のような感じ。
コンパクトですがちょっと見にくい？
特に文字が小さいです。
LION MEDIAのその他のカスタマイズについては以下もご覧ください。
カスタマイズ
デザインを変えて、文字も大きく変更します。
デザインを変える
/*検索フォーム*/
.searchBox__input {
height:50px;
padding:0 10px;
position:absolute;
left:0;
top:0;
border-radius:25px;
outline:0;
background:#eee;
}
[type="submit"].searchBox__submit {
height:50px;
width:50px;
top:0;
right:0;
background:#5787b7;
color:#fff;
border:none;
border-radius:0 25px 25px 0;
}
[type="submit"].searchBox__submit:hover{
color:#5787b7;
background:#ddd;
}
文字サイズを変える
.searchBox__input{
font-size:14px;
}
デザインについては以下も参考にして下さい。
更に変えたい時
「記事検索」となっている文字自体を変えたいなどといった場合は、PHPファイル編集で可能です。
親テーマにある「searchform.php」をコピーし、子テーマディレクトリへアップロードします。
FTPについては以下をご覧ください。
PHPファイルを編集する
コピーした子テーマのファイルを編集します。
「外観」→「テーマエディタ」から子テーマのsearchform.phpを編集。
初期コード
<div class="searchBox">
<form class="searchBox__form" method="get" target="_top" action="<?php echo home_url( '/' ); ?>" >
<input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="記事検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button>
</form>
</div>
「サイト内検索」に変えてみる
<div class="searchBox">
<form class="searchBox__form" method="get" target="_top" action="<?php echo home_url( '/' ); ?>" >
<input class="searchBox__input" type="text" maxlength="50" name="s" placeholder="サイト内検索"><button class="searchBox__submit icon-search" type="submit" value="search"> </button>
</form>
</div>
以上です！
CSSが反映されない場合
以下も参考にして下さい。
LION MEDIA については以下も参考にして下さい。
