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

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については以下をご覧ください。

FTPクライアントの使い方（FFFTP）とワードプレスのファイル構成

今回は、私が何十年も変わらず使っているソフト「FFFTP」で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>

以上です！