FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

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

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

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

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">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</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; /* 入力欄の幅 */
}

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

関連記事

[ 2009/07/23 21:52 ] カスタマイズ共通カスタマイズ | TB(0) | CM(17)

≪ メニューをマウスオーバーするとタイトル背景が変わる | HOME | メニューバーの中央寄せ ≫

[ 5590 ] 検索窓の設置について

lightframeを愛用させていただいております。

通常の公式プラグインでの検索フォーム設置とは別に、

「ページ下部(フッター上部)にフリースペースを設ける」
http://10plate.blog44.fc2.com/blog-entry-112.html

で出来たブログの最下部付近の（好きな）場所に検索窓を設置することは可能でしょうか？

試しに公式プラグインの【HTMLの編集】をコピペして、フリースペースの置きたい場所に設置しプレビューしてみたら、一応理想通りの表示はするものの、これが正しい方法なのか判断できない為、質問させていただきました。

また、

「意見・要望・感想・バグ報告等お聞かせ下さい vol.3」
http://10plate.blog44.fc2.com/blog-entry-275.html

に表示されているような記事内での検索窓設置も非常に魅力を感じております。

もし、可能でしたらご教示の程よろしくお願い申し上げます。

[ 2009/08/22 08:39 ] [ 編集 ]

[ 5591 ] > ろごきちさん

ページ下部に設けたフリースペースでも検索窓を設置することは可能です。

記事内での検索窓は、記事投稿時に検索用HTMLを貼付けるだけで表示できます。「改行の扱い」を「HTMLのタグのみ」で投稿するほうが簡単です。

コメントを含めた検索
http://10plate.blog44.fc2.com/blog-entry-195.html

[ 2009/08/22 21:11 ] [ 編集 ]

[ 5986 ]

この検索欄をもっと右に置きたいのですが何処を変更すればいいですか？

[ 2009/09/11 12:01 ] [ 編集 ]

[ 5991 ] > ZEROさん

スタイルシートを変更してください。

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

[ 2009/09/11 18:57 ] [ 編集 ]

[ 5996 ]

数値を色々変更しても移動しません・・・。
どうしましょうか？

[ 2009/09/11 23:05 ] [ 編集 ]

[ 6000 ] > ZEROさん

ご使用のブラウザとURLを教えてください。

[ 2009/09/12 00:03 ] [ 編集 ]

[ 6011 ]

ブラウザ:Fire Fox
URL:http://dragun00modification.blog58.fc2.com/

[ 2009/09/12 16:16 ] [ 編集 ]

[ 6015 ] > ZEROさん

スタイルシートのコメントアウトの前に不必要なドット「.」があります。
これを取り除いてください。

./* メニューバーの検索窓 */

[ 2009/09/12 17:50 ] [ 編集 ]

[ 6109 ]

できました！！
有り難うございます。
後出来れば検索する空白の部分の少し右側にちょっとした画像を入れてみたいのですがどうすればいいですか？
例：
http://gamehacksforraczip.blog53.fc2.com/

[ 2009/09/19 14:09 ] [ 編集 ]

[ 6118 ] > ZEROさん

検索フォームがあるリストに
<li class="lis">
とクラスを設定し、スタイルシートの末尾に以下を加えてください。

.lis {
background-image: url("画像URL");
background-repeat: no-repeat;
background-position: 20px 5px; /* 左余白、上余白 */
}

[ 2009/09/20 00:03 ] [ 編集 ]

[ 6128 ]

<li><form action="./" method="get">
<input type="text" name="q" value="" maxlength="200" class="msearch" />
<input type="submit" value=" 検索 " />
<li class="lis">
</form></li>
</ul>

このように付け足してみましたが
こんな感じですか？

[ 2009/09/20 21:18 ] [ 編集 ]

[ 6133 ] > ZEROさん

違います。フォームを囲んでいるリストにクラスを設定するのです。

<li class="lis"><form action="./" method="get">
～

[ 2009/09/21 01:03 ] [ 編集 ]

[ 6283 ]

iPhone(標準ブラウザ)からブログをみるとなぜかブログタイトルの下に表示ニューバーを設置し、検索フォームの位置しているのですがてしまい、メニューバーが変なところに移動してします・・・
ttp://art11.photozou.jp/pub/137/264137/photo/26973399.v1254151686.jpg
PCのブラウザだとこのようにずれたりしないのですが何とかできないでしょうか？

[ 2009/09/29 00:42 ] [ 編集 ]

[ 6293 ] > Geckoさん

スタイルシートの以下の数字を小さくしてもこの現象が見られますか？

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

[ 2009/09/29 23:32 ] [ 編集 ]

[ 6469 ] Googleフォーム

Google検索フォームを表示したいのですが、どうやっても崩れてしまいます。どうすればいいでしょうか？

[ 2009/10/14 00:58 ] [ 編集 ]

[ 6473 ] > Tさん

この記事を参考にして、メニューバー全体を<div id="layer_base"></div>で囲み、その中の検索スクリプトを<div id="layer_1"></div>で囲んでみてください。

画像の上に文字等を重ねる
http://10plate.blog44.fc2.com/blog-entry-317.html

[ 2009/10/15 00:10 ] [ 編集 ]

[ 8718 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2010/07/15 08:37 ] [ 編集 ]

コメントの投稿