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

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法

    みなさんこんにちは、mayukouです。先日、ホームページを作る際に…

  2. illustration

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

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

  3. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた

    みなさんこんにちは、mayukouです。ウェブデザインのトレンドであ…

  4. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpressで作るメリットとデ…

    みなさんこんにちは、mayukouです。約3年ぶりにポートフォリオサ…

  5. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  6. jQuery

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. 未分類

    便利!IllustratorやPhotoshopを使ったボタンの作り方記事まとめ…
  2. 日記

    2015年の振り返りと今年の抱負
  3. Web Design

    今流行りのロングシャドウの簡単な作り方
  4. お仕事紹介

    【お仕事紹介】学生向けアンケートパンフレット作りました
  5. デザイン

    脱自己流!上手くいくデザインの手順とは。
PAGE TOP