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ファイルを編集する

コピーした子テーマのファイルを編集します。

初期コード

<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 については以下も参考にして下さい。