こんにちは！みう(@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>
[/html]

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>
[/html]
[js htmlscript=”true”]
<!–収納しておくためのスクリプト–>
<script type="text/javascript">
$(‘.head_search_link’).click(function(e){
$(‘.head_search’).toggleClass(‘active’);
$(‘.head_search_link’).toggleClass(‘active’);
e.preventDefault();
});
</script>
[/js]

スクリプトの動きとしては、「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]の部分を調整で、検索ボタンとの距離を設定*/
[/css]

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

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

WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例 – かちびと.net

さいごに・・・

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

最後までお付き合いいだだきありがとうございます！これからも、みう(@miu0512)を応援していただけたら嬉しいです！