*

[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をインストールしてサイトを作成する方法

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

[WordPress]WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる

WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる方法 &n

記事を読む

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  大宮自動車教習所  アニメーション 専門学校  スタッドレスタイヤ 通販  タイヤ 交換時期  タイヤ エルグランド 格安  ボカロ 専門学校  GULF  天然石とパワーストーン  保育士 大学  株マイスター 投資顧問  中古タイヤ 越谷  名簿業者