*

[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

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

[Welcart]複合検索をチェックしたもの全て表示させる

Welcartの複合検索はデフォルトではチェックしたすべてに当てはまらないとヒットしないようになって

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

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