デフォルトの検索フォームとは別にオリジナルの検索フォームを設置する方法

はてなブログのサイドバーにはデフォルトで検索フォームが設置されていますが、元々のやつとは別に新しい検索フォームを作ってカスタマイズする方法です。

HTMLでサイドバーに検索フォームを表示する

デザイン＞サイドバー＞「モジュールを追加」をクリックし、「HTML」を選択

タイトルに「検索」と入力して、タイトル下の欄に下のコードを入力する。

デザインを変更する

タイトルバーにFontawesomeアイコンを追加する

Fontawesomeを利用するためには、下のサイトに登録後自分専用のコードを入手し、
設定＞詳細設定＞headに要素を追加　の欄にコードを入力する必要があります。

Font Awesome

①<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
※v5.6.1はバージョンのため、適宜最新のバージョンに書き換える
②<script src="https://kit.fontawesome.com/付与されたコード.js" crossorigin="anonymous"></script>

入力後、デザイン＞カスタマイズ＞デザインCSSに下記コードを入力します。

虫眼鏡アイコンが追加されました。

検索フォームのデザインをカスタマイズする

デザイン＞カスタマイズ＞デザインCSSに下記コードを入力します。

上のCSSを全部適用するとこうなります。

検索ボタンにFontawesomeを適用する

下記コードの
<input id="sbtn" type="submit" value="検索" /> の「value="検索"」を

value="&#xf002"
に変更します。

入力後、デザイン＞カスタマイズ＞デザインCSSの上で書いた.sbtnの下に下記コードを追加します。
font-family: "Font Awesome 5 Free";
content: "\f002";/* アイコンフォント */
font-weight:900;

検索ボタンがFontawesomeの虫眼鏡アイコンになりました。