はてなブログ／検索モジュールをどこに配置しよう？ cms-style（６）

はてなブログを WordPress 風に！ > cms-style 記事一覧

はてなブログをどうやって当サイトのデザインにしているかを書いています。

ブログというのは思いついたら書くというパターンが多いですので、なかなかサイト全体の構造をわかりやすく表示することが難しく、その分全文検索が重要になります。

はてなブログには、サイドバーに表示できる検索モジュールが付属していますが、これはサイドバーだけではなくどこにでも表示できるものです。当サイトでは、アニメーションでタイトル下に出し入れするようにしています。

• 検索モジュールのコード
• 検索モジュールを #top-editarea に入れる
• 検索モジュールを上部から出し入れする Javascript & CSS

検索モジュールのコード

検索モジュールの HTML は次のようになっています。

<div class="hatena-module hatena-module-search-box">
  <div class="hatena-module-title">
    検索
  </div>
  <div class="hatena-module-body">
    <form class="search-form" role="search" action="http:// ブログ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>

検索に関わる部分は、<form></form> だけですので、これを HTML を書けるところであればどこにでも入れれば検索フォームが表示されます。記事中でも書けます（多分）。

検索モジュールを #top-editarea に入れる

検索窓は、ページを開いた時に目につくところに表示された方がいいとは思いますが、デザインとの兼ね合いがありますので、当サイトでは検索アイコンを表示しておき、クリックすると検索窓が上からアニメーションで降りてくるようにしています。ひと手間多くならないように自動的にフォーカスが当たるようにしています。

ヘッダ > タイトル下 に次のコードを入れます。検索窓からフォーカスが外れた場合（フォーム以外をクリックなど）に検索窓を消すように onblur属性に閉じるための Javascript を指定しています。

<div class="top-editarea-inner">


<!-- 虫眼鏡アイコンとクローズアイコン -->
<a class="search-show" href="javascript:void(0);" onclick="showSearchBox();return false;"><i class="blogicon-search"></i></a>
<a class="search-hide" href="javascript:void(0)" onclick="hideSearchBox();return false;"><i class="blogicon-close"></i></a>


<!-- 検索フォーム -->
<form class="search-form" role="search" action="http:// ブログURL /search" method="get" name="form">
    <input id="search-input" onblur="hideSearchBox();" type="text" name="q" class="search-input" value="" placeholder="記事を検索" required>
    <input type="button" value="検索" class="search-button" onmousedown="document.form.submit();" />
</form>
</div>

サブミットボタンは汎用ボタンに変更しています。これは、検索窓からフォーカスが外れた場合に非表示になるよう onblurイベント属性を指定していますので、デフォルトのままですとサブミットボタンをクリックしても onblur が働いてしまってサブミットしません。ですので、汎用ボタンに変更し、onmousedown属性に submit関数を指定しています。onclick では発火しません。

検索モジュールを上部から出し入れする Javascript & CSS

虫眼鏡アイコンとクローズアイコンをタイトル下右上に出し、クリックで #top-editarea にクラス名 searching を追加、削除し、表示非表示のトリガーにしています。検索窓は、表示されるとフォーカスが当たるようになっています。

function showSearchBox() {
  document.getElementById('top-editarea').classList.add('searching');
  document.getElementById('search-input').focus();
}


function hideSearchBox() {
  document.getElementById('top-editarea').classList.remove('searching');
  document.getElementById('search-input').value = "";
}

以下の CSS はアニメーション関連だけで、フォームの色やサイズなどデフォルト設定は省略しています。

.search-show,
.search-hide {
  position: absolute;
  /* 以下の値は個々の設定による */
  right: 0; 
  top: 58px;
  transform: scale(-1, 1);
  z-index: 1;
  /* ここまで */ }


.search-show {
  display: block; }


.search-hide {
  display: none; }


.searching .search-show {
  display: none; }
.searching .search-hide {
  display: block; }


.search-form {
  position: absolute;
  transition: all .2s;
  top: 0;
  opacity: 0;
  /* 以下の値は個々の設定による */
  z-index: 1;
  width: 70%;
  /* ここまで */ }


.searching .search-form {
  top: 63px; /* 個々の設定による */
  opacity: 1; }

後はアイコンや検索窓の位置を調整すればうまくいくと思います。