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

スポンサーリンク
BLOG

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

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に下記コードを入力します。

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

f:id:ymm_520:20200103105029p:plain

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

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

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

f:id:ymm_520:20200103154522p:plain

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

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

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


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

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

f:id:ymm_520:20200103181707p:plain

コメント