【はてなブログ】 ブログ内の記事検索窓を設置する方法（コピペOK）

私はまだまだ初心者ですので、探り探りで機能を取り入れています。

「１日前の自分が知らなかった事」をテーマに

はてなブログの細々した機能の使い方を綴っていきます。

他の方のブログを見ていると、たまに「ブログ内の記事を検索する窓」を見かけます。

私も設置したいと思い、その方法を学びましたので綴りたいと思います。

↓こんな感じのやつです。(^^)

手順

⓪準備

　デザインのカスタマイズアイコンをクリック（タップ）

①「ヘッダ」の「タイトル下」にHTMLを記述

【記述するコード】

<!-- 検索ボックスここから -->

<div class="hatena-module hatena-module-search-box">

  <div id="original-search-box" class="hatena-module-body">

    <form class="search-form" role="search" action=" ブログURL /search" method="get">

      <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required>

      <input type="submit" value="検索" class="search-module-button" />

    </form>

  </div>

</div>

<!-- 検索ボックスここまで -->

◆赤字の部分に、自分のブログURLを入れます。

（私の場合はhttps://ymk111.hatenablog.com　が入ります。）

②デザインCSSへCSSを記述

【記述するコード】

#original-search-box{

  position:fixed;

  top:80px;

  right:12px;

  z-index:999 !important;

}

.hatena-module-search-box{

  height:0;

  padding:0;

  margin:0;

}

◆青字の数値を変えることで、検索窓の位置を変えられます。

以上で完成です♪

まとめ

この流れで、簡単に設置できました(^^)