[M]ボタンを押すと上からにゅるっと現れる検索フォームで目指せ収納上手！

こんにちは！みう(@miu0512)です。スマートフォンでブログを読みやすくするために、1画面内に余計なものを置かないように設計しました。その一つとして、検索フォームは「ボタンを押すと出てくる」ようにしています。

実際にスマホテーマで使ったのはこの「検索フォーム」部分！

検索フォームって実は私あんまり使いません。でもやっぱりサイトには必要・・・。かといって、検索画面に飛ばすなんてこともしたくないし、検索フォームをサイト内に表示しておくのも、幅をとってしまい、なんだかもったいない・・・。

じゃあ必要な時だけ取り出せるように、最初は非表示にしておこう！

ということで、ボタンを押すと検索フォームが上からにゅるっと出てくるようにしてみました。必要な時だけ表示させ、あとは隠して見やすく！

導入の仕方はカンタン３STEP

STEP１：headの中に以下を追加する

[HTML]

<!--jQuery読み込み-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

STEP２：設置したい場所に以下を書き込む

[HTML]

<!--検索ボタンの設置。画像にしてもOK-->
<a href="#" class="head_search_link">[検索]</a>

<!--最初は非表示になっている検索フォームブロック-->
<div class="head_search">
<form method="get" action="<?php bloginfo('url'); ?>/">
  <input type="text" name="s">
  <input type="submit" value="検索">
</form>
</div>

[JS]

<!--収納しておくためのスクリプト-->
<script type="text/javascript">
    $('.head_search_link').click(function(e){
      $('.head_search').toggleClass('active');
      $('.head_search_link').toggleClass('active');
      e.preventDefault();
    });
</script>

スクリプトの動きとしては、「head_search_link」をクリックすると、「head_search」の動作がアクティブ状態になるように設定しています。

STEP３：CSSを調整する

[CSS]

/*検索ボタンの設定*/
.head_search_link {
    display: block;
    position: relative;
    z-index: 10;
}

/*検索フォームの設定*/
.head_search {
    position: absolute;
    -webkit-transform: translate3d(0, -100px, 0);
    -moz-transform: translate3d(0, -100px, 0);
    -o-transform: translate3d(0, -100px, 0);
    transform: translate3d(0, -100px, 0);
    -webkit-transition: -webkit-transform 0.25s linear;
    -moz-transition: -moz-transform 0.25s linear;
    -o-transition: -o-transform 0.25s linear;
    transition: transform 0.25s linear;
}

/*[-100px]の部分を調整で、検索フォームを画面の外に！*/
.head_search.active {
    -webkit-transform: translate3d(0,50px,0);
    -moz-transform: translate3d(0,50px,0);
    -o-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
}

/*[50px]の部分を調整で、検索ボタンとの距離を設定*/

もし、動かなかったら・・・？

人によって設定や構築方法が違うため、正常通り動かない場合があります。そんな時、私はWP標準のjQueryを止めたり、クラスを変えたり、以下の参考サイトを拝見させていただいたりしています。

さいごに・・・

スマホはとにかく広く見やすくしたもん勝ち！と思ってゴリゴリテーマを作っていました。今のままでも結構満足しているのですが、スマホでの閲覧も増えているので、まだまだ改造を重ねていこうと思います！