LION MEDIAの検索フォームをカスタマイズする

2019-05-292019-06-03WordPress・カスタマイズLION MEDIA

LION MEDIAの検索フォーム初期デザインでは少し見にくいのでカスタマイズしてみました。

 

LION MEDIAとは

 

無料で高機能、デザイン性にも優れたテーマで、設定項目からのカスタマイズだけで素敵なサイトが完成します。AMPにも対応。

「LION MEDIA」

 

初期デザインは以下のような感じ。

コンパクトですがちょっと見にくい？

特に文字が小さいです。

 

LION MEDIAのその他のカスタマイズについては以下もご覧ください。

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