Web Design

コピペでOK!wordpressに設置するシンプルな検索ボックス


こんにちは。mayukouです。
最近は、wordpressのカスタマイズにはまり、
新しいテーマを作りたくてウズウズしている今日この頃です。

さて、今回はwordpressのテンプレートに欠かせない、
検索ボックスの設置方法をご紹介します。
今回は、2カラムを前提で、サイドバーに設置する方法です。

スポンサードリンク

サンプル

51-searchbox-ex

 

1.ウィジェットに検索ボックスを加えます

52-widget

2.searchform.phpファイルを作成し、FTPサーバーにアップします。

デフォルトの場合、下記のようなコードとなりますが、
webdesignrecipe参考)

これを下記のように書き変えます。

ポイントは、dlタグを追加していることと、
ボタンが input ではなく button タグになっていることです。
後はデフォルトと同じです。

3.cssを設定します

(mororeco参考)

以上となります。

検索アイコンは
search
これをご使用ください。

最後に

いかがでしたか?wordpressに欠かせない、

検索フォームのCSSをご紹介しました。
ぜひ参考になられてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  2. Web Design

    今すぐできる!HTMLメールの作り方

    みなさんこんにちは、mayukouです。ECサイトを運営していると…

  3. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  4. ブログリニューアル

    wordpress

    ブログリニューアルしました。そのときやったことなど。

    3連休まっただ中!ちょっといつもよりグダグダな生活です。福岡はあい…

  5. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  6. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. ブログ

    webの最新情報を学べた!webデザインセミナー「CSS nite fukuok…
  2. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しまし…
  3. Photoshop

    Photoshopでパターンを作ろう!斜めストライプを作る方法とは?
  4. Mac

    Marvericksアップデート時のPhotoshopのバグが直りました
  5. デザイン

    webデザインのトレンドを取り入れよう!デザインの参考になるリソース 〜日本編〜…
PAGE TOP