スマートフォン用にいい感じの検索フォームスタイルにカスタマイズしてみます。

Expandable Mobile Search Formで紹介されていた 「Expandable Mobile Search Form」がステキなので Geeklog2.0のテーマWAIproCSS又はProfessional Cssの検索部分をこのデザインにカスタマイズしてみたいと思います。尚、この記事はGeeklog初心者又はCSS初心者のかたむけです。

スマートフォン用以外は｢Demo: Expandable Search Form｣のDemo Aのデザインにし、スマートフォンだけDemo Bのデザインにしたいと思います。

では早速、カスタマイズ方法(テーマWAIproCSS 2.6.0 for 2.0.0の記述で説明します)を説明していきます。

1. まず　検索部分を左ブロックの位置からヘッダの位置に移動させるために、leftblocks.thtmlの10行目の<div class="block-left" id="block-left-search">から33行目の</div>まで 切り取りheader.thtmlの31行目の<p class="site_slogan">{site_slogan}</p>の下にペーストします。これで検索部分はヘッダの位置に移動します。
2. 不必要なタイトルや検索オプション等を表示させないようにheader.thtmlの34行目の<div class="block-left" id="block-search">から36行目の<div class="block-left-content">まで、 と51行目の<ul>から53行目の</ul>、56行目の</div>から57行目の</div>コメントアウト(<!-- -->で囲う)します。(念のためコメントアウトしてますが削除しても問題ないかと思います)

   
   <!--       <div class="block-left" id="block-search">
           <h2>{button_search}</h2>
           <div class="block-left-content"> -->
             <form action="{site_url}/search.php" method="get" id="searchform" class="basic">
               <fieldset>
                 <legend>{button_search}</legend>
                 <ul>
                   <li><input type="text" class="search" size="16" maxlength="255" value="{button_search}" name="query"
                     onfocus="if (this.value == '{button_search}') this.value = ''"
                     onblur="if (this.value == '') this.value = '{button_search}'" onclick="document.getElementById('btn_search').style.display = 'block';"{xhtml}></li>
                   <li>
                     <input type="hidden" value="all" name="type"{xhtml}>
                     <input type="hidden" value="all" name="keyType"{xhtml}>
                     <input type="hidden" value="search" name="mode"{xhtml}>
                     <input type="submit" value="{button_search}" class="submit" id="btn_search"{xhtml}>
                   </li>
                 </ul>
   <!--               <ul>
                   <li><a href="{site_url}/search.php">{button_advsearch}</a></li>
                 </ul>  -->
               </fieldset>
             </form>
   <!--        </div>
         </div>  -->
   

3. スタイルがデフォルトのものしか設定されていない状態なので、まずヘッダの右側　サイトスローガンの下に位置するようCSSを設定し、Demo AのデザインになるようCSSをcustom.cssに記述します。

   form#searchform {
   	float: right;
   	line-height: 26px;
   	margin: 10px 20px 0 0;
   	padding: 2px 5px;
   	position: relative;
   	width: 160px;
   	height: 26px;
   }
   
   form#searchform fieldset {
   	margin: 0;
   	padding: 0;
   }
   
   form#searchform ul {
   	list-style: none;
   	margin: 0;
   	padding: 0;
   }
   
   form#searchform ul li {
   	display: inline-block;
   }
   
   form#searchform input.search {
   	padding: 2px 10px 2px 30px;
   	width: 80px;
   	height: 25px;
   	border: 1px solid #cccccc;
   	background-color: #f1f1f1;
   	border-radius: 20px 20px 20px 20px;
   	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
   	transition: all 0.7s ease 0s;
   }
   
   form#searchform input.search:focus {
   	width: 130px;
   	background-color: #fff;
   	border-color: #6dcff6;
   	box-shadow: 0 0 5px rgba(109, 207, 246, 0.5);
   }
   
   form#searchform input.submit {
   	position: absolute;
   	top: 5px;
   	left: 10px;
   	width: 25px;
   	height: 25px;
   	background: url("images/icon_search.png") no-repeat 3px center transparent;
   	border: medium none;
   	cursor: pointer;
   	color: transparent;
   }
   

4. 次に、スマートフォン用のスタイルを設定していきます。 初めに虫眼鏡アイコンをタップしても検索が始まらないようCSSでsubmitを表示しないようにします。 submitを表示させないようにするので、虫眼鏡アイコンは検索窓(input.search)の背景画像として設定します。 そして、Demo BのデザインになるようCSSをcustom.cssに記述します。

   
   @media only screen and (max-width: 519px) {
   form#searchform input.search {
   	width: 15px;
   	padding: 2px 8px;
   	background: url("images/icon_search.png") no-repeat 6px center #f1f1f1;
   	color: transparent;
   }
   form#searchform input.submit {
   	display: none;
   }
   form#searchform input.search:focus {
   	width: 130px;
   	padding-left: 25px;
   	background: none;
   	color: #000;
   }
   }
   

5. 次に、header.thtmlの10行目あたりに <meta name="viewport" content="width=device-width; initial-scale=1.0" {xhtml}>を追記します。viewportは次の記事を参考にしサイトに応じた記述にしてください。 CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
6. そして、header.thtmlの48行目のinputにidを振ります。 今回は、id="btn_search"を追記しました。 43行目のinputの中に

   onclick="document.getElementById('btn_search').style.display = 'block';"

   を追記します。(getElementByIdの後のbtn_searchは、48行目で振ったIDです)
   修正前の記述

   
   <input type="text" class="search" size="16" maxlength="255" value="{button_search}" name="query"
                     onfocus="if (this.value == '{button_search}') this.value = ''"
                     onblur="if (this.value == '') this.value = '{button_search}'"{xhtml}>

   ↓ 修正後の記述

   <input type="text" class="search" size="16" maxlength="255" value="{button_search}" name="query"
                     onfocus="if (this.value == '{button_search}') this.value = ''"
                     onblur="if (this.value == '') this.value = '{button_search}'" onclick="document.getElementById('btn_search').style.display = 'block';"{xhtml}>

   これで一番初めに虫眼鏡アイコンをタップしても検索が始まらず、検索窓をタップした時にsubmit部分が表示されるようになります。 (Javascriptの記述は、もっとスマートな方法があると思いますが今回はこの記述にしました)

動作確認は、Windows XP - Firefox 20.0.1,Google Chrome 27.0.1453.94 m,Opera12.15+ Windows7 - Internet Explorer9+Mac OS X 10.7.5 - Safari6.0,Firefox 21.0+iPod tauch - iOS 6.1.3+ iPad - iOS 6.1.3で行ってます。

デモはこちらです。

簡単にカスタマイズできるので、やってみてください。