*

[html/css]検索ボックスをオリジナルの画像で表示させる

公開日: : 最終更新日:2013/08/06 未分類

デフォルトの検索ボックスといえば・・・

検索ボックスカスタマイズ

このように味気ないデザインですよね。

やはりサイトの個性を出すには検索ボックスのデザインも変えたいところ。

これは画像に置き換えることにより下図ようないろいろなデザインの検索ボックスにすることができます。( ご自由にお使いください )

例1   検索ボックスを画像で表示a-1検索ボックスを画像で表示するa-2

例2   検索ボックスを画像で表示するb-1検索ボックスを画像で表示するb-2

例3   検索ボックスを画像で表示するc-1検索ボックスを画像で表示するc-2

それでは検索ボックスをオリジナルの画像でカスタマイズする方法を説明していきます☆

まずは、検索キーワード記入欄の画像を用意します。

検索ボックスを画像で表示a-1searchA-1.png

つづいて、送信ボタンの画像を用意します。

検索ボックスを画像で表示するa-2searchA-2.png

このように2つの画像を用意する必要があります。

それでは、まずはキーワード記入欄の変更です。

デフォルトのソースを見てみましょう。

<input type=”text” name=”sample_name” id=”sample_id”  ” size=”20″  />

上のようなソースになっていますが、ここのid=”sample_id”をCSSで指示していきます。

CSSに以下の記述をしてください

#sample_id

{ border: none;    // デフォルトではボーダーがついているので消す

background-color: transparent;        // デフォルトでは白が入っているので、透明にさせる

background-image: url( パス / searchA-1.png    );

background-repeat: no-repat;

padding-left: 7px;

}

これで  検索ボックス ⇒ 検索ボックスを画像で表示a-1 になります。

つづいて、送信ボタンです。

デフォルトのソースは

<input type=”submit”  id=”sample_id” value=”検索開始” />

となっていますが、これを

<input type=”image” src=” パス / search.png” id=”sample_id” value=”" />

とすることにより、検索ボックスボタン画像  ⇒   検索ボックスを画像で表示するa-2  となります。

検索ボックスを画像で表示a-1検索ボックスを画像で表示するa-2

以上で完成です☆

ともう1つ、検索ボックスの中の説明( value )をクリックによって表示・非表示にさせる方法を載せておきます。

検索ボックスをカスタマイズ

クリックすると   ↓

検索ボックスの装飾

文字が消えて、また選択が外れると・・・ ↓

検索ボックスをカスタマイズ

復活します☆

やり方はjavascriptをソースに埋め込みます。

デフォルト

<input type=”text” name=”sample_name” id=”sample_id”  ” size=”20″  />

↓   ↓   ↓   ↓

<input type=”text” value=” お探しキーワード” name=”sample_name” id=”smple_id”  onfocus=”if( this.value == ‘お探しキーワード’ ) { this.value = ”; } “  onblur=”if( this.value == ” ) { this.value = ‘お探しキーワード’; } ” size=”20″ />

と書き換えれば完成です!

ad

関連記事

no image

無料のウイルス対策ソフトMicrosoft Security Essentials (マイクロソフト セキュリティ エッセンシャルズ) を使う

今まで使用していたアンチウイルスソフトの期限が切れてしまい、しばらくウイルスソフトなしで使っていたの

記事を読む

no image

1.グーグルの無料メール(gMail)を取得する

完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する

記事を読む

no image

[WordPress]ウィジェットの固定ページを特定のページのみ表示させるプラグイン

ワードプレスで「ウィジェットの固定ページを特定のページのみ表示させる方法」を探していま した。で、

記事を読む

no image

[Welcart]会員のログイン状態とログアウト状態でリンク先を変える

Welcartでウィジェットのログイン・ログアウト状態によって表示を変えたり、リンク先を変えたりした

記事を読む

no image

2.ワードプレスが使えて、広告の表示が無い無料レンタルサーバーwkey.meでサイトを作る

完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する

記事を読む

no image

[WordPress]ContactForm7をオリジナルページで表示させる方法

大変便利なプラグインContactForm7ですが、通常の設置方法は の  を投稿ページや固定

記事を読む

no image

[welcart]商品複合検索ページの ①「カテゴリー : AND検索」という題文を変える ②チェックボタンと文字のスペースを空ける方法

①ウェルカートの商品複合検索ページはデフォルトで題が カテゴリー : AND検索 となっていま

記事を読む

no image

WordPressテーマ「stinger」にはメタキーワードタグとディスクリプションタグが無い!?

SEOにつよいWordpressテーマ「stinger」には、「meta keyword」、「met

記事を読む

no image

[Windows7]ファイル拡張子ごとのアイコンを簡単に変更する方法

Windows7 でファイルを拡張子ごとにアイコンを変えたいときの方法です。 たとえば、txtファ

記事を読む

no image

twitterの埋め込みタイムラインウィジェットの表示がおかしい!開く、伸びる、閉じない!

現在サイトでのtwitterの埋め込みタイムラインウィジェットの表示がおかしいことに・・・!

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

ad

PAGE TOP ↑
  プロフィール  PR:無料HP  柿崎自動車学校  グラフィックデザイン 専門学校  エンドレス・アドバンス  中古ホイール 熊本  タイヤ ステップワゴン 格安  美容専門学校  BP  サンモータースクール  ラピスラズリ  和歌山 合宿免許  音楽 専門学校 福岡  タイヤ 取付 津山市  セキスイのリノベ