【自分でSANGOをカスタマイズ】サイト内検索ウィジェットをシンプルにする

カスタマイズは自己責任で！

このブログのワードプレス環境

ワードプレステーマ

子テーマ

この記事ではサイト内検索の部分をシンプルにカスタマイズした方法を説明。

このサイトの環境

テーマ

子テーマ

プラグイン

Before

After

文字を入力しているとき↓

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 サイト内検索ウィジェットをカスタマイズをする準備
2 カスタマイズコードを追加
- 2.1 style.cssにコードを追加する
- 2.2 検索欄に文字を表示させる
3 まとめ：サイト内検索部分をシンプルにするカスタマイズ

サイト内検索ウィジェットをカスタマイズをする準備

追加CSSの手順

外観

カスタマイズ

追加CSS

子テーマの手順

外観

テーマの編集

FTPソフトの手順

FTPソフト起動

自サイトに接続

style.cssを開く

追加CSSの使い方はこちら

ブログのカスタマイズを加速させる「追加CSS」の使い方

カスタマイズコードを追加

style.cssにコードを追加する

CSSコード（コメントあり）

/*--------------------------------------
サイト内検索ウィジェットを変更
--------------------------------------*/
input#s {/*検索部分全体*/
    background: #f3f3f3;/*背景色（お好みで）*/
    box-shadow: none;/*影を削除*/
    padding: 0 10px 0 50px;/*内側の余白 上0 右10 下0 左50*/
}
#searchsubmit {/*アイコン部分*/
    background-color: #f3f3f3!important;/*背景色（お好みで）*/
    color: #424242;/*アイコンの色（お好みで）*/
    left: 0;/*左側に移動*/
    border-bottom: solid 1px transparent;/*下線を透明に*/
}
input#s:focus {/*検索部分全体（フォーカス時）*/
    box-shadow: none;/*影を削除*/
    border: solid 1px #42424230;/*枠線を追加*/
}
input#s:focus + #searchsubmit.fa {/*アイコン（フォーカス時）*/
    font-size: 22px;/*サイズ小さく（追加はお好きに）*/
}

/*--------------------------------------

サイト内検索ウィジェットを変更

--------------------------------------*/

input#s {/*検索部分全体*/

background: #f3f3f3;/*背景色（お好みで）*/

box-shadow: none;/*影を削除*/

padding: 0 10px 0 50px;/*内側の余白上0 右10 下0 左50*/

}

#searchsubmit {/*アイコン部分*/

background-color: #f3f3f3!important;/*背景色（お好みで）*/

color: #424242;/*アイコンの色（お好みで）*/

left: 0;/*左側に移動*/

border-bottom: solid 1px transparent;/*下線を透明に*/

}

input#s:focus {/*検索部分全体（フォーカス時）*/

box-shadow: none;/*影を削除*/

border: solid 1px #42424230;/*枠線を追加*/

}

input#s:focus + #searchsubmit.fa {/*アイコン（フォーカス時）*/

font-size: 22px;/*サイズ小さく（追加はお好きに）*/

}

CSSコード（コメントなし）

/*--------------------------------------
サイト内検索ウィジェットを変更
--------------------------------------*/
input#s {
    background: #f3f3f3;
    box-shadow: none;
    padding: 0 10px 0 50px;
}
#searchsubmit {
    background-color: #f3f3f3!important;
    color: #424242;
    left: 0;
    border-bottom: solid 1px transparent;
}
input#s:focus {
    box-shadow: none;
    border: solid 1px #42424230;
}
input#s:focus + #searchsubmit .fa {
    font-size: 22px;
}

/*--------------------------------------

サイト内検索ウィジェットを変更

--------------------------------------*/

input#s {

background: #f3f3f3;

box-shadow: none;

padding: 0 10px 0 50px;

}

#searchsubmit {

background-color: #f3f3f3!important;

color: #424242;

left: 0;

border-bottom: solid 1px transparent;

}

input#s:focus {

box-shadow: none;

border: solid 1px #42424230;

}

input#s:focus + #searchsubmit .fa {

font-size: 22px;

}

確認の手順

保存ボタンを押す

ブラウザでキャッシュを削除して更新

検索欄に文字を表示させる

こちらのカスタマイズはマクリンさん（@Maku_ring）のTwitterでの素晴らしい発言を参考にさせていただきました。１.　子テーマにsearchform.phpファイルを作成テキストエディタソフトでファイル名「searchform.php」を作成します。保存先は子テーマのstyle.cssとかがある場所でOKです。

２.　コードを記入作成したsearchform.phpに下記のコードを記入します。

searchform.php（追加するコード：サイト内検索ウィジェット）

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <input type="search" placeholder="サイト内を調べて見る" id="s" name="s" value="" />
        <button type="submit" id="searchsubmit" ><i class="fa fa-search"></i>
        </button>
    </div>
</form>