更新日
はてなブログの検索窓をカスタマイズ┃表示位置とデザインを変更する方法（コピペで実装！）
はてなブログの検索窓はデフォルトでサイドバーに配置されています。
スマホから見るとページ下部に表示されます。これはサイドバーの要素が全て記事の下に表示されるためです。検索窓はなるべく分かりやすくて、使いやすい位置に置きたいので設置位置を変えてみます。
はじめに
コードの使用について
- 公開しているコードは個人利用でのコピペ、ご自身でのカスタマイズはご自由にどうぞ。
- カスタマイズ方法をブログなどで紹介する場合は本記事をリンクして、引用である旨の表記をしていただきますようお願い致します。
使用するコード
HTML（表示させるためのコード）
<div class="hatena-module-search-box"> <div 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>
検索窓を表示させたい場所に貼り付けて使用しますが、上記のコードは貼り付ける場所によって改行が読み込まれデザインが崩れることがあります。そんな時は以下のコードを使用します（改行を取り除き、コードが1行になっています）。
<div class="hatena-module-search-box"><div 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>
yunicoHTML内の補足を参考にご自身のブログURLや検索窓内のテキストを編集してくださいね。
CSS（デザインを変えるコード）
コードの使い方
- はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
- 上記画像①→②→の順番に選択して、③にCSSコードを貼り付ける。
- 【変更を保存する】を押して完了。
/* 検索窓 */ .hatena-module-search-box .search-form { width: 30%; /*横幅*/ margin: 0 auto; /*上下左右の位置調整*/ margin-bottom: 30px; /*下の余白*/ border: 2px solid #000000; /*囲い枠の装飾*/ border-radius: 30px; /*囲い枠の丸み*/ background: #FFFFFF; /*検索窓内の背景色*/ }
パソコンとスマホで表示位置やデザインを変えたい場合はスマホ画面のみに反映させるコードも必要です。
/* 検索窓（スマホ設定） */ @media (max-width:767px){ /*スマホのみに反映させる*/ .hatena-module-search-box .search-form { width: 55%; /*横幅*/ margin: 0 auto; /*上下左右の位置調整*/ margin-bottom: -10px; /*下の余白*/ border: 2px solid #000000; /*囲い枠*/ border-radius: 30px; /*囲い枠の丸み*/ background: #FFFFFF; /*検索窓内の背景色*/ } }
yunicoベースコードとスマホ用コードの両方を使う場合、全く同じになる部分はスマホ用コードから削除しても差し支えありません。
検索結果の検索窓を消すコード
検索窓を設置する場所によっては、検索結果が表示されるページに検索窓が2つ表示されます。重複しないように、デフォルトの検索窓を非表示にするコードは以下の通りです。
/* 検索結果ページの検索窓を非表示にする */ .search-result-form { display: none; }
yunicoこちらもデザインCSSに貼り付けて使ってくださいね。
検索窓の設置に関する注意点
使用しているデザインテーマによって同じページ内に複数の検索窓が存在していると、検索機能が正常に動作しなかったりデザインが崩れる場合があります。
そのような時は、サイドバーにあるデフォルトの検索窓を削除すれば正常に動作するはずです（サイドバーの追加／削除はデザインページから行います）。
△ ▼ △ ▼
yunicoたくさんの記事の中から特定の記事を探したいとき、検索窓が使いにくいと不便だよね。
もくもく検索窓を任意の位置に表示させることで使いやすさが向上するね！
ご不明な点がありましたらお気軽にコメントやメールでお問い合わせくださいね。
