以下の内容はhttp://10plate.blog44.fc2.com/blog-entry-244.htmlより取得しました。


メニューバーに検索フォームを表示

以前に横メニューバーをブログタイトル下に表示する方法を紹介しましたが。

今回はこの中に検索窓を表示させる方法を紹介します。

HTMLを編集します。
赤い部分を加えてください。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>
<li><form action="./" method="get">
<input type="text" name="q" value="" maxlength="200" class="msearch" />
<input type="submit" value=" 検索 " />
</form></li>

</ul>
<!--▲ メニューバー ▲-->


そしてスタイルシートの末尾に以下を加えてください。

/* メニューバーの検索窓 */
.msearch {
margin-left:20px; /* 左の余白 */
width:200px; /* 入力欄の幅 */
}


余白や幅の設定値はお好みにあわせて変えてください。
関連記事



以上の内容はhttp://10plate.blog44.fc2.com/blog-entry-244.htmlより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.13