【はてなブログ】検索窓の表示位置とデザインを変更する方法🔍コピペOK！

はてなブログの検索窓は元々サイドバーに配置されており、スマホから見るとページの下の方に表示されます。（サイドバー全体がごっそり、記事下に表示されるため）

検索窓はなるべく分かりやすい位置にあるのが個人的に理想なので位置を変えてみました🔎

書いてあること

はてなブログの検索窓を任意の位置に配置する方法
検索窓のデザインをカスタマイズする方法

検索窓を任意の位置に配置する
- 変更しなければならない箇所
- 変更しても良い箇所
検索窓のデザインを変える
- パソコン表示
- スマホ表示
検索結果ページの検索窓
検索窓の設置に関する注意点

検索窓を任意の位置に配置する

以下のHTMLコードを『検索窓を表示させたい場所』に貼り付けます。

<div class="hatena-module-search-box">
<div class="hatena-module-body">
<form class="search-form" role="search" action="https://yunico-fluffylife.com/＜⬅ご自身のブログ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>

当ブログでは現在、パソコン版はデフォルトのままサイドバーに設置、スマホ版はメニューバーの中に配置しています。

変更しなければならない箇所

コードの3行目〜action="https://yunico-fluffylife.com/search" 〜
⬆この太字の部分を必ずご自身のブログURLに変更ください。

変更しても良い箇所

コードの4行目〜placeholder="記事検索" required〜
⬆この太字部分はお好きな文言に変更することができるので、ブログの雰囲気に合わせて変えてみてください。

検索窓のデザインを変える

CSSコードの使い方

はてなブログのトップページから【デザイン】へアクセスする。
上記画像の順番に選択し、③にコードを貼り付ける。
最後に【変更を保存する】を押して完了。

コードの後ろに説明をつけているので、ご自由にデザインを変更してみてくださいね。

パソコン表示

/* 検索窓 */
.hatena-module-search-box  .search-form{
   width: 30%; /*横幅*/
   margin-left: auto; /*配置：左からの位置*/
   margin-right: 0; /*配置：右からの位置*/
   margin-bottom: 30px; /*下の余白*/
   border: 2px solid #000000; /*囲い枠の装飾*/
   border-radius: 30px; /*囲い枠の丸み*/
   background: #FFFFFF; /*検索窓内の背景色*/
   }

スマホ表示

パソコンとスマホで表示方法（位置やデザイン）を変えたい場合は『スマホ画面のみに反映させるコード』も記入します。

/* 検索窓スマホ表示 */
@media screen and (max-width:767px){
.hatena-module-search-box  .search-form{
   width: 55%; /*横幅*/
   margin-left: auto; 
   margin-right: auto; /*左右位置をautoにすることで中央寄せ*/
   margin-bottom: -10px; /*下の余白*/
   border: 2px solid #000000; /*囲い枠の装飾*/
   border-radius: 30px; /*囲い枠の丸み*/
   background: #FFFFFF; /*検索窓内の背景色*/
   }
}

上記のコードをそれぞれ、そのまま使用すると

パソコン	ヘッダー（画面上部）の右側
スマホ	ヘッダー（画面上部）の真ん中

に検索窓が表示されるようになります。

この記事をリライトしている現在はブログのデザインが変更されているので、見本がなくて申し訳ありません。
いろいろ試して調整してみてくださいね！

検索結果ページの検索窓

はてなブログ検索窓カスタマイズ
好きな場所に検索窓を配置して、実際に検索窓を使用すると検索結果のページには検索窓が2つ表示されます。

重複しないように検索窓を1つ非表示にするには以下のコードを貼り付けてください。

/* 検索結果ページの検索窓を非表示にする */
.search-result-form {
    display: none;
    }

すっきりしました！

検索窓の設置に関する注意点

デフォルトの状態（サイドバーに検索窓がある状態）で、別の場所にも重複して検索窓を配置すると検索動作がうまく機能しない場合があるようです。（使用するテーマデザインによるのかも）

動作が機能しない時はサイドバーの検索欄を削除してみてください。サイドバーの追加/削除は【ダッシュボード→デザイン】からできますのでご確認ください。

　
たくさんの記事の中から特定の記事を探したいことがあると思います。そんな時、検索窓が使いにくいと困ってしまいますね。

任意の位置に表示させることにより、より使いやすさがアップすると思います୨୧

参考になれば嬉しいです。
ご不明な点がありましたらお気軽にコメントください。

今日はそんな感じ！
それではまたね。

yunico's fluffy life

横着主婦の暮らしの詰め合わせ