*

[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

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

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

記事を読む

no image

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

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

記事を読む

no image

[Welcart] 注文完了画面をCSSでカスタマイズする

Welcartをオリジナルテンプレートで作成した場合、注文完了画面が下記図のように「送信が完了しまし

記事を読む

no image

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

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

記事を読む

no image

Adobeのソフトのアイコンが正しく表示されない時の直し方(Photoshop・Illustrator・Flash・Fireworks・Bridge・Extension Manager等)

AdobeのCS6を購入し、インストールしたのですがいくつかのソフトのアイコンが正しく表示されない現

記事を読む

no image

[HTML/CSS]classかつclassでセレクタを指定するときの方法(2つ以上複数のclassで指定するとき)

WordPrsssを使っているとbodyクラスが大変便利ですが、トップページもその他ページも「固定ペ

記事を読む

no image

未来サーバーの無料で広告が出ないプランでwordpressをインストールしてサイトを作成する方法

未来サーバーの無料で広告が出ないプランででwordpressをインストールしてサイトを作成する方法を

記事を読む

no image

3.無料で高機能なアクセス解析Google Analytics(アナリティクス)を設置する

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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  合宿免許 大型  ファクタリング 評判  プログラマー 専門学校  オートエクゼ  中古ホイール 福井  タイヤ パッソ 新品  体育教員 大学  レカロ 中古  ブレスレット  保育士 短期大学  音楽 専門学校 福岡  サニー 日産 中古  名簿屋