JAVA スクリプトのイベントハンドラを使用した検索窓に変更

こういう小技を使った UI はいいっすね～。人に優しい。

以下のページを参考・・・ではなく、そのままコピー。
input に onfocus で背景色や文字を消す

・・当ブログでは本文内容が貧弱なので検索してもあまり良い結果が得られるとは思えない。その点は大いに反省しなくてなりません～(笑)。

single.php、footer.php、search.php の変更部分

*************************************
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" id="searchbox" name="s" onfocus="if (this.value == 'Search keywords') this.value=''; this.style.background = '#fff';" onblur="if (this.value == '') this.value = 'Search keywords'; this.style.background = '#f1f1f1';" value="Search keywords" />
<!-- <input type="submit" class="submitbutton" value="Find it" /> この行はテキスト使用ボタン -->
<input type="image" src="<?php bloginfo('url'); ?>/wp-content/favicon/7-favicon.ico" alt="検索する" title="検索する" id="search-button" />
</form>
*************************************

************************************* <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> <input type="text" id="searchbox" name="s" onfocus="if (this.value == 'Search keywords') this.value=''; this.style.background = '#fff';" onblur="if (this.value == '') this.value = 'Search keywords'; this.style.background = '#f1f1f1';" value="Search keywords" />  <input type="image" src="<?php bloginfo('url'); ?>/wp-content/favicon/7-favicon.ico" alt="検索する" title="検索する" id="search-button" /> </form> *************************************

2010.01.19 ——————–

・ブログ内検索ボックスの css を変更。検索ボタンに画像(フリーアイコン)を使用した。
マイ css の追加部分。

#searchbox {
  display: block;
  width:120px;
  height:20px;
  margin: 24px 0 24px 0;
  padding: 0 12px;
  background: #eee;
  float: left;
  overflow: hidden;
}
#search-button {
  margin: 24px 0 24px 0;
  padding: 0 5px;
  float:left;
}

#searchbox { display: block; width:120px; height:20px; margin: 24px 0 24px 0; padding: 0 12px; background: #eee; float: left; overflow: hidden; } #search-button { margin: 24px 0 24px 0; padding: 0 5px; float:left; }

single.php、footer.php、search.php の変更部分

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
<input type="text" value="Search keywords" name="s" id="searchbox" onfocus="this.value=""　/>
<!-- <input type="submit" class="submitbutton" value="Find it" /> -->
<input type="image" src="<?php bloginfo('url'); ?>/wp-content/favicon/7-favicon.ico" alt="検索する" title="検索する" id="search-button" />
</form>

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/"> <input type="text" value="Search keywords" name="s" id="searchbox" onfocus="this.value=""　/>  <input type="image" src="<?php bloginfo('url'); ?>/wp-content/favicon/7-favicon.ico" alt="検索する" title="検索する" id="search-button" /> </form>

コメントを残す