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

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

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

こんなことが書いてあります

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

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

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

コードの使用に関して
公開しているCSSコードは個人利用のコピペはOKですがブログなどでカスタマイズ方法を紹介する場合は、本記事をリンクして引用である旨の表記をお願いします。

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

<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コード

CSSコードはダッシュボード→🎨デザイン→🔧{}デザイン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; /*検索窓内の背景色*/
   }

スマホ表示

当ブログの場合、パソコンとスマホで表示方法を変えたかったので、スマホ専用のCSSコードも記入しています。

/* 検索窓スマホ表示 */
@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; /*検索窓内の背景色*/
   }
}

パソコン表示とスマホ表示を使うことで

パソコンではヘッダー右側
スマホではヘッダーの真ん中

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

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

パソコンとスマホの表示が同じで良い場合は、スマホ表示のCSSは記入しなくてOKです！

検索結果ページの検索窓

はてなブログ検索窓カスタマイズ
⬆これは当ブログのスマホ表示の画面です（現在はデザインが変更されています）。

好きな場所に検索窓を配置して実際に検索をした結果、検索結果のページには自動で検索窓が表示されるため同じページ内に検索窓が2つ表示されています。

「検索窓が重複表示されるの気になる！」という方は、以下のコードを{}デザインCSSにコピペしてください。

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

自動で表示されていた検索窓が表示されなくなり、すっきりしましたね。

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

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

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

おわりに

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

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

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

今日はそんな感じ！
それではまたね🧸◌𓈒𓐍

yunico-fluffylife.com

yunico's fluffy life

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