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. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

  2. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

  3. Web Design

    丸からスライドして出てくる検索ボックスの作り方

    みなさまこんにちは、mayukouです。今日は天気がいいのでランニ…

  4. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  5. jetpack

    wordpress

    多機能プラグイン!Jetpack for wordpressのインストール方法

    みなさんこんにちは、mayukouです。みなさんはwordpr…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法
  2. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。
  3. Web Design

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

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!
  5. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ
PAGE TOP