miMemo(ミメモ)

jQuery Web制作

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

20131030104041

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

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

20131030104041

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

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

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

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

STEP1:<head>の中に以下を追加する

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

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>
[/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」の動作がアクティブ状態になるように設定しています。

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]の部分を調整で、検索ボタンとの距離を設定*/
[/css]

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

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

さいごに・・・

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

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

この記事が気に入ったら
いいね!しよう

About Me

みう

みう(@miu0512)

フリーランス
Webコーディネーター

フリーランスWeb屋。マンチカン5匹と一緒に仕事をしています。 【 猫 / マンチカン / Webデザイン / ブログ / ミメモ / フリーランス / カメラ / 旅行 / 車 / 水樹奈々 / ライブ / カラオケ / アニソン / マンガ / アニメ / iPhone / Mac / 白猫 / メロディア】

PAGETOP