はてなブログのサイドバーにはデフォルトで検索フォームが設置されていますが、元々のやつとは別に新しい検索フォームを作ってカスタマイズする方法です。
HTMLでサイドバーに検索フォームを表示する
デザイン＞サイドバー＞「モジュールを追加」をクリックし、「HTML」を選択
タイトルに「検索」と入力して、タイトル下の欄に下のコードを入力する。
デザインを変更する
タイトルバーにFontawesomeアイコンを追加する
Fontawesomeを利用するためには、下のサイトに登録後自分専用のコードを入手し、
設定＞詳細設定＞headに要素を追加 の欄にコードを入力する必要があります。
①<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=”″
に変更します。
入力後、デザイン＞カスタマイズ＞デザインCSSの上で書いた.sbtnの下に下記コードを追加します。
font-family: “Font Awesome 5 Free”;
content: “\f002”;/* アイコンフォント */
font-weight:900;
検索ボタンがFontawesomeの虫眼鏡アイコンになりました。
コメント