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. jQuery

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

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

  2. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介

    みなさんこんにちは、mayukou です。肌寒いような暖かくなった…

  3. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

  4. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  5. ブログリニューアル

    wordpress

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

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

  6. CSSフレームワーク

    簡単にBootstrapで!100%表示のレスポンシブ対応のカルーセルスライダー

    こんにちは、mayukouです。お盆も過ぎて、後半戦が始まった感じで…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Mac

    イラストレーターにオススメ!iPad Pro 9.7 wifiレビュー
  2. Photoshop

    Photoshopでかすれたスタンプ風表現をする方法 その2
  3. 未分類

    モバイルフレンドリー!フラットデザインなwordpressテーマ ACCIOに変…
  4. デザイン

    【随時更新】クリスマス&年賀状に使えるイラスト素材を無料配布します♩
  5. Illustrator

    自分で作れると便利!illustratorでチェック柄を描く方法
PAGE TOP