
こんにちは!みう(@miu0512)です。スマートフォンでブログを読みやすくするために、1画面内に余計なものを置かないように設計しました。その一つとして、検索フォームは「ボタンを押すと出てくる」ようにしています。
実際にスマホテーマで使ったのはこの「検索フォーム」部分!
検索フォームって実は私あんまり使いません。でもやっぱりサイトには必要・・・。かといって、検索画面に飛ばすなんてこともしたくないし、検索フォームをサイト内に表示しておくのも、幅をとってしまい、なんだかもったいない・・・。
じゃあ必要な時だけ取り出せるように、最初は非表示にしておこう!
ということで、ボタンを押すと検索フォームが上からにゅるっと出てくるようにしてみました。必要な時だけ表示させ、あとは隠して見やすく!
導入の仕方はカンタン3STEP
STEP1:headの中に以下を追加する
[HTML]
<!--jQuery読み込み-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
STEP2:設置したい場所に以下を書き込む
[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」の動作がアクティブ状態になるように設定しています。
STEP3: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を止めたり、クラスを変えたり、以下の参考サイトを拝見させていただいたりしています。
さいごに・・・
スマホはとにかく広く見やすくしたもん勝ち!と思ってゴリゴリテーマを作っていました。今のままでも結構満足しているのですが、スマホでの閲覧も増えているので、まだまだ改造を重ねていこうと思います!
最新情報をお届けします
Twitter でみうをフォローしよう!
Follow @miu0512