WordPressウィジェット(Widget)サイドバーの検索ボックスの表示をカスタマイズ

SearchBox

この 愚者の紋章 のテーマは自分で作ったオリジナルテーマですが、ウィジェットから検索ボックスを追加すると 「う~ん、どうなんコレ?」 的なものが表示されるのでちょっと修正してみました。

といっても既存の自サイトから移植しただけなので、作業自体は3分もかからず終了。


Sponsored Link

Widgetサイドバーの検索ボックスカスタマイズ

カスタマイズ前の検索ボックス。
ウィジェット(Widget)サイドバーの検索ボックス1
カスタマイズ後の検索ボックス。
ウィジェット(Widget)サイドバーの検索ボックス2

サイドバー内のコードは以下。

<div id="searchform">
<form method="get" id="search" action="http://the-fool.me/">
<div id="search-form">
<input type="text" value="search word" name="s" id="s" size="26" class="search_box" onfocus="if (this.value == 'search word') this.value = '';" onblur="if (this.value == '') this.value = 'search word';" /> <input type="submit" id="searchsubmit" value="検索" /></div>
</form></div>

CSS は以下。

/* サーチフォーム  */
div#sidebar #searchform {
    text-align:center;
   margin-left: auto;
   margin-right: auto;
}
div#sidebar input#s {
    width:180px;
    color: #333;
}

こんな感じで完成。

たぶん、どちらかのサイトか WordPress の書籍を見たのではないかと思うのですが、出先をすっかり忘れてしまいました。 申し訳ない。

Sponsored Link

コメントを残す