*

[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

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

完全に無料でWordPress(ワードプレス)サイトを作る手順を書きます。 目次 グー

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

[Photoshop]透過画像のふちをきれいに書き出し保存する

フォトショップ(Photoshop)で作成した透明部分がある、見出しアイコン用の透過画像を作成しまし

記事を読む

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