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

2010.01.22. 金 02:02

こういう小技を使った 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>
*************************************
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;
}

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>


back to [wordpressについてのメモ]
  • WordPress 5.8 に更新 2021/07/24
  • WordPress 5.7.1 に更新 ※ 2021/04/28
  • プラグイン W3 Total Cache を追加 2014/07/14
  • モバイル端末表示プラグイン Wiziapp を追加してみたが・・ 2014/05/21
  • wordpress バージョンダウン実施 2014/05/19
  • wordpress バージョンダウン検討中 2014/05/16
  • wordpress ver.3.5.2-JA にバージョンアップ 2013/06/25
  • Facebook に連携させるプラグイン Wordbooker を追加 2013/05/01
  • wordpress ver.3.5.1-JA にバージョンアップ 2013/02/03
  • プラグイン DB Cache Reloaded Fix を追加 2013/02/03
  • プラグイン Lightbox Gallery のExif表示が思い通りに行かないのよね・・ 2012/09/24
  • wordpress ver.3.4.2-JA にバージョンアップ｜ja.po も変更 2012/09/23
  • プラグイン WPtouch を停止 2012/08/29
  • wordpress ver.3.4.1-JA にバージョンアップ｜ja.po も変更 2012/08/29
  • wordpress ver.3.3.2-JA にバージョンアップ｜ja.po の変更も完了 2012/05/09
  • プラグイン Tweetable を停止 2012/01/18
  • プラグイン WP Social Bookmarking Light を追加 2011/09/02
  • プラグイン WPtouch を追加 2011/04/17
  • プラグイン Global Translator を追加 2011/04/17
  • プラグイン Tweetable を追加 2011/04/08
  • css 修正 2011/04/07
  • wordpress ver.3.0.3-ja にバージョンアップ 2010/12/09
  • OptionMenu にページ更新リストを追加 2010/10/02
  • rss の時刻表示の狂いは受け側が原因 2010/10/02
  • パーマリンク設定変更 2010/09/13
  • wordpress ver.3.0-ja、ver.3.0.1-ja にバージョンアップ 2010/07/13
  • プラグイン TaM Google Analytics を追加 2010/03/01
  • プラグイン RSS Includes Pages を追加 2010/02/28
  • ブラウザのデフォルトフォントの変更 2010/02/21
  • wordpress ver.2.9.2 にバージョンアップ 2010/02/17
  • プラグイン WP-Page-Trackback を追加から使用停止 2010/02/16
  • ヘッダの description と title に親ページ名を追加 2010/02/07
  • ヘッダの description と title に5つまでカテゴリ名を追加 2010/02/07
  • ページと投稿を見分ける方法 2010/02/06
  • ヘッダのディスクリプションとタイトルにカテゴリを追加したけど・・ 2010/02/06
  • FireFox でのアーカイブ表示でサムネイル画像が表示される件 2010/02/05
  • lightbox gallery pop-up画像の表示位置を変更 2010/02/02
  • more でページトップへジャンプ 2010/01/30
  • リスト表示の css を変更 2010/01/29
  • カテゴリ及びタグの一括表示方法を変更 2010/01/29
  • 親子ページのページリストの表示方法を変更 2010/01/28
  • サーチページに本文を表示 2010/01/27
  • ページはすべて親子に決定 2010/01/22
  • wordpressについてのメモを子ページに分けた 2010/01/22
  • コード表示のプラグイン WP-Syntax に重大な弱点発見 2010/01/22
  • JAVA スクリプトのイベントハンドラを使用した検索窓に変更 2010/01/22
  • 新規ページ「OptionMenu」を追加 2010/01/16
  • テンプレートタグ wp_tag_cloud() を使用 2010/01/15
  • プラグイン WP-Syntax を追加 2010/01/13
  • 本文内などで使用する css を別ファイルに 2010/01/13
  • コード表示のプラグイン SyntaxHighlighter Evolved を追加 2010/01/11
  • fotofolio の exif の表示も変更 2010/01/11
  • lightbox-gallery を再インストールexif表示変更 2010/01/11
  • プラグイン Better Tag Cloud を追加 2010/01/08
  • バージョンアップで変更した ja.po が書き換えられていた 2010/01/08
  • 自動バージョンアップ　2.9.1 2010/01/07
  • wordpress 複数設置 2010/01/03
  • lightbox-gallery 背景色などを変更 2009/12/30
  • タイトルを入力どおりに表示 2009/12/29
  • タグとアーカイブページにヘッドタイトルと選択名を表示 2009/12/27
  • プルダウン月別アーカイブ使用で表示の乱れを修正 2009/12/26
  • 検索エンジン用のメタタグを追加 2009/12/23
  • 検索エンジン用に header.php にメタタグを追加 2009/12/22
  • single.php 記事タイトル下に日付とTAG名を追加 2009/12/22
  • さくらのレンタルサーバにwordpressを設置 2009/12/16

    • about


  • location


    • archives

     RSSリーダーで購読する

    Portfolio

    The Photographer

    kokupsy_un | K.G.C.Works
    Follow @kinzox2